网页性能优化中 有一条叫做“避免使用未合成的动画”，请问该如何理解？
在网页性能优化中，“避免使用未合成的动画”是指通过减少浏览器渲染流程中的 布局（Layout） 和 绘制（Paint） 步骤，从而提升动画的流畅性和性能。以下是具体解释和优化方法：
1. 浏览器渲染流程与动画的关系
浏览器渲染页面时，通常分为四个步骤：
- JavaScript：执行脚本（如修改 DOM、CSS）。
- 样式计算（Style）：计算元素的最终样式。
- 布局（Layout）：计算元素的位置和几何信息（如宽高）。
- 绘制（Paint）：将元素的像素填充到屏幕上。
- 合成（Composite）：将各图层合并后显示到屏幕。
未合成的动画：
若动画直接修改了元素的布局属性（如 width、height、left、top 等），会触发 重新布局（Layout） 和 重绘（Paint），导致性能开销大。
合成的动画：
若动画仅修改了 合成层属性（如 transform、opacity），浏览器可以跳过布局和绘制，直接进入合成阶段，性能更高效。
2. 为什么“未合成的动画”会导致性能问题？
- 触发重排（Layout Thrashing）：
例如，使用left或top实现位移动画时，每次修改都会触发布局计算，导致主线程阻塞。 - 频繁重绘（Paint）：
修改background-color或box-shadow等属性会触发大面积重绘，消耗 GPU 资源。 - 帧率下降（FPS Drop）：
复杂的布局和绘制操作可能导致动画帧率低于 60 FPS，用户会感知到卡顿。
3. 如何优化？使用“合成动画”
(1) 优先使用 transform 和 opacity
这两个属性在大多数现代浏览器中 不会触发布局和绘制，直接由合成器处理：
/* 优化前：使用 left 导致重排 */
.box {
position: absolute;
left: 0;
transition: left 0.3s;
}
.box:hover {
left: 100px;
}
/* 优化后：使用 transform 避免重排 */
.box {
transition: transform 0.3s;
}
.box:hover {
transform: translateX(100px);
}
(2) 提升动画元素到独立合成层
通过 CSS 属性将动画元素提升到单独的合成层，减少对其他部分的影响：
.animated-element {
will-change: transform; /* 提示浏览器提前优化 */
/* 或使用旧版 Hack（谨慎使用） */
transform: translateZ(0);
}
注意：过度使用会导致内存占用增加，仅在必要时使用。
(3) 使用 requestAnimationFrame 调度动画
避免使用 setTimeout 或 setInterval，确保动画与浏览器刷新率同步：
function animate() {
element.style.transform = `translateX(${currentX}px)`;
currentX += 1;
requestAnimationFrame(animate);
}
requestAnimationFrame(animate);
(4) 避免修改布局属性
- 避免的属性：
width、height、margin、padding、left、top、font-size等。 - 替代方案：
使用transform: scale()替代width/height修改，用transform: translate()替代top/left。
4. 验证工具：Chrome DevTools
- Performance 面板：
录制动画过程，查看是否触发了 Layout 或 Paint 步骤（紫色和绿色区块）。 - Rendering 面板：
勾选 Paint flashing，高亮显示重绘区域，确认动画是否触发不必要的绘制。 - Layers 面板：
查看动画元素是否被提升为独立合成层。
5. 实际案例对比
| 场景 | 未合成的动画（低效） | 合成的动画（高效） |
|---|---|---|
| 位移效果 | 修改 left/top | 使用 transform: translate() |
| 缩放效果 | 修改 width/height | 使用 transform: scale() |
| 淡入淡出 | 修改 visibility | 使用 opacity + transform |
| 性能开销 | 高（触发 Layout + Paint） | 低（仅 Composite） |
总结
- 核心原则：尽量让动画在合成阶段完成，避免触发布局和绘制。
- 实现方法：优先使用
transform和opacity，必要时提升元素到合成层。 - 验证工具：通过 DevTools 分析渲染流程，确保优化效果。
通过这种方式，可以显著提升动画的流畅性，尤其是在低端设备或复杂页面上效果更为明显。