优化 Web 性能：处理非合成动画（Non-Composited Animations）

news2025/4/6 15:00:02

在 Web 开发中，动画能够增强用户体验，但低效的动画实现可能导致性能问题。Google 的 Lighthouse 工具在性能审计中特别关注“非合成动画”（Non-Composited Animations），指出这些动画可能增加主线程负担，影响页面流畅性。本文将基于 Chrome 开发者文档，探讨非合成动画的影响、识别方法及优化策略，助你在2025年的 Web 项目中提升性能。

1. 什么是非合成动画？

1.1 定义

非合成动画（Non-Composited Animations）是指浏览器无法通过 GPU 合成（Compositing）直接处理的动画，而是需要主线程参与计算和重绘的动画。合成动画通常只涉及 transform 和 opacity，而非合成动画涉及更多属性（如 width、top）。

1.2 合成 vs 非合成

合成动画：由 GPU 处理，仅更新图层位置或透明度，性能高效。
非合成动画：由主线程计算布局（Layout）和绘制（Paint），开销大。

1.3 Lighthouse 的关注点

Lighthouse 检查页面中的动画，识别非合成属性，警告其可能导致的性能问题，如掉帧或卡顿。

2. 非合成动画的影响

2.1 主线程负担

非合成动画需要主线程重新计算布局和重绘，导致 CPU 使用率升高，尤其在低端设备上可能造成卡顿。

2.2 流畅性下降

动画帧率（FPS）下降，用户感知到不平滑的体验，影响“可交互时间”（TTI）。

2.3 性能得分降低

Lighthouse 的性能评分因非合成动画的低效性而下降，可能影响用户满意度。

3. 如何识别非合成动画？

3.1 使用 Lighthouse

打开 Chrome 开发者工具（F12）。
切换到“Lighthouse”选项卡。
选择“性能”类别，生成报告。
查看“诊断”下的“避免非合成的动画”（Avoid Non-Composited Animations），列出问题属性及动画。

3.2 使用开发者工具

在“性能”面板中录制动画，检查是否有频繁的“Layout”或“Paint”调用。
在“层”（Layers）面板中，确认动画元素是否独立合成。

3.3 检查 CSS

查看动画使用的属性是否超出 transform 和 opacity。

4. 优化非合成动画的策略

4.1 使用合成友好属性

将动画限制在 transform 和 opacity：

.box {
    animation: move 2s infinite;
}
@keyframes move {
    from { transform: translateX(0); }
    to { transform: translateX(100px); }
}

替代：
- left → transform: translateX。
- background-color → opacity（若适用）。

4.2 启用 GPU 加速

添加 will-change 或 transform 触发合成：

.box {
    will-change: transform;
    animation: move 2s infinite;
}

注意：避免滥用 will-change，仅用于动画元素。

4.3 检查触发布局的属性

避免在动画中使用以下属性：

width、height、top、left。
margin、padding。

示例优化：

/* 低效 */
@keyframes grow {
    from { width: 100px; }
    to { width: 200px; }
}
/* 高效 */
@keyframes grow {
    from { transform: scaleX(1); }
    to { transform: scaleX(2); }
}

4.4 使用 JavaScript 优化

通过 requestAnimationFrame 控制动画：

const box = document.querySelector('.box');
let pos = 0;
function animate() {
    pos += 1;
    box.style.transform = `translateX(${pos}px)`;
    requestAnimationFrame(animate);
}
animate();

4.5 测试和验证

使用“渲染”面板中的“帧率”（FPS）工具，确认动画流畅性。
确保优化后视觉效果一致。

5. 示例：优化前后对比

优化前

.box {
    animation: slide 2s infinite;
}
@keyframes slide {
    from { left: 0; }
    to { left: 100px; }
}

主线程调用：Layout + Paint。
FPS：30（卡顿）。

优化后

.box {
    will-change: transform;
    animation: slide 2s infinite;
}
@keyframes slide {
    from { transform: translateX(0); }
    to { transform: translateX(100px); }
}