第 3 卷

5 6// 优化实践：添加单个类，仅触发1次回流/重绘

7div.classList.add('box-style');

1. 使用绝对定位/固定定位，脱离文档流

绝对定位（ position: absolute）、固定定位（ position: fixed）的元素，其布局变更不会影响其他元素的布局，回流范围更小，性能消耗更低。

1. 避免使用触发回流的 CSS 属性，优先使用 transform/opacity

◦ 避免频繁修改 width、 height、 margin、 top 等布局属性

◦ 实现元素移动、缩放、透明度变化时，使用 transform 和 opacity，这两个属性由 GPU

加速，不会触发回流，仅触发合成层更新（性能最优）

Code block

1// 最优实践：无回流，仅合成层更新 2div.style.transform = 'translateX(100px)';

3div.style.opacity = '0.5';

1. 减少 CSS 选择器复杂度，避免复杂选择器匹配

复杂的 CSS 选择器会增加浏览器的样式计算时间，间接增加回流的性能消耗（后续问题9会详细说明）

1. 避免频繁操作样式表，减少样式重计算

尽量不要动态创建样式表、频繁添加/删除样式规则，避免浏览器频繁重计算样式。

8. Vue、React 中的虚拟DOM如何增强性能

核心前提：真实DOM操作的性能瓶颈

真实 DOM 不仅包含元素的布局、样式等数据，还绑定了大量浏览器内置方法，直接频繁操作真实 DOM 会触发大量的回流和重绘，这是前端性能瓶颈的核心来源之一。

Code block

1// 虚拟DOM对象 2const vnode = {

3tag: 'div', 4props: { className: 'box' },

虚拟DOM增强性能的核心原理

虚拟 DOM 并非「比真实 DOM 更快」，而是通过「减少不必要的真实 DOM 操作」来提升性能，核心流程分为3步：

1. 生成虚拟DOM树：组件渲染时，先根据组件状态（data/props）生成对应的虚拟 DOM 树，这个过

程是 JS 内部计算，无任何 DOM 操作，性能消耗极低

1. 对比虚拟DOM差异（Diff算法）：当组件状态发生变化时，会生成新的虚拟 DOM 树，框架

（Vue/React）会通过 Diff 算法，精准对比新旧虚拟 DOM 树的差异，只找出需要更新的节点（而非更新整个 DOM 树），这个差异对比过程同样是 JS 内部操作

◦ Diff 算法优化策略：同层对比（不跨层级对比，降低复杂度）、key 标识（精准复用节点，避免

不必要的节点创建和删除）、类型判断（不同类型节点直接销毁重建，不深入对比）

1. 批量更新真实DOM：将 Diff 算法找到的「差异节点」批量转换为真实 DOM 操作，一次性更新到页

面中，从而最小化真实 DOM 操作的次数和范围，大幅减少回流和重绘的触发，最终提升性能

补充：框架层面的优化

• Vue：通过响应式系统精准监听状态变化，结合虚拟 DOM 的 Diff 算法，实现按需更新；Vue 3 还引

入了 PatchFlags（补丁标记），进一步缩小 Diff 对比范围

• React：通过 Fiber 架构实现可中断的 Diff 过程，优先处理高优先级任务，避免长时间阻塞主线

程，提升页面流畅度

9. CSS选择器会影响浏览器的渲染性能吗

会影响，但影响程度分场景：在现代浏览器中，简单的 CSS 选择器对性能的影响几乎可以忽略，但复杂、低效的 CSS 选择器，会增加浏览器的样式计算时间，间接影响渲染性能（尤其是在大型应用或高

频 DOM 更新场景下）。

1. 先找到所有 <p> 元素
2. 再向上查找父级，是否存在 class 为 box 的元素
3. 最后再向上查找，是否存在 <div> 元素
4. 全部匹配成功，才会应用样式

这种反向匹配的目的是：快速过滤掉不匹配的元素，减少后续匹配次数，但也导致「右侧的选择器（关键选择器）」对性能影响最大。

低效CSS选择器（应避免）

1. 通配符选择器 *：匹配页面所有元素，性能消耗极大，尤其页面元素较多时

Code block

1* { margin: 0; padding: 0; } // 不推荐，可针对性重置样式

1. 深层嵌套选择器：嵌套层级过深（如 div > .a > .b > .c > p），会增加浏览器的匹配层

级和计算时间，同时降低样式可维护性

1. 低效关键选择器：将通配符、标签选择器作为关键选择器（右侧选择器），会匹配大量无关元素

Code block

1.box * { color: red; } // 关键选择器是*，匹配.box下所有元素，低效 2div .box p { color: blue; } // 关键选择器是p，匹配所有p元素后再向上验证，低效

1. 属性选择器（无明确匹配规则）：如 [class^="box"]（匹配class以box开头的元素），需要

遍历元素属性进行字符串匹配，性能低于类选择器

1. 伪类选择器（高频触发重计算）：如 :hover 在大量元素上使用，会高频触发样式重计算，影响

性能

优化CSS选择器的实践

1. 选择器尽量扁平化，嵌套层级不超过3层
2. 优先使用类选择器（ .box）、ID选择器（ #box，优先级最高，匹配最快），避免使用标签选

择器和通配符作为关键选择器

1. 避免使用不必要的复杂选择器，保持选择器简洁