performance-optimization

性能优化

使用迪士尼的 12 条原则诊断并修复动画卡顿或运行不流畅的问题。

问题表现

• 帧率低于 60fps
• 动作断断续续或不流畅
• UI 响应迟缓
• 移动设备耗电量大
• 布局抖动

按原则诊断

逐帧动画与姿势到姿势动画

问题：实时计算每一帧 修复方法：使用姿势到姿势（关键帧）动画。让浏览器通过 CSS 过渡或 will-change 在不同状态之间进行插值。

时间安排

问题：同时运行的动画过多 修复方法：错开动画。将开始时间间隔设为 50-100ms，以减少并发计算。

次要动作

问题：次要效果过多 修复方法：在低功耗设备上移除非必要的次要动画。使用 prefers-reduced-motion 查询。

扎实绘图

问题：对开销较大的属性进行动画处理（width、height、top、left） 修复方法：只对 transform 和 opacity 进行动画处理。这些属性由 GPU 加速，无需布局或绘制。

演出布局

问题：对屏幕外的元素进行动画处理 修复方法：只对可见内容进行动画处理。使用 Intersection Observer 暂停屏幕外的动画。

快速修复

1. 用 CSS 动画替换 JS 动画 - 浏览器已优化
2. 用 transform 替代位置属性 - GPU 图层
3. 谨慎添加 will-change - 为浏览器提供提示
4. 减少同时运行的动画 - 错开或依次运行
5. 降低移动设备上的动画复杂度 - 检测设备性能

故障排查清单

• 在 DevTools 的 Performance 标签页中检查长帧
• 确认动画只使用 transform/opacity
• 统计同时运行的动画数量（控制在 3-4 个以内）
• 在目标设备中规格最低的设备上测试
• 检查是否存在布局抖动（强制回流）
• 确认没有过度使用 will-change
• 开启 CPU 降速后进行测试
• 检查标签页隐藏时动画是否暂停

代码模式

/* Fast */
.element {
  will-change: transform;
  transition: transform 200ms ease-out;
}
.element:hover {
  transform: translateY(-4px);
}

/* Slow - avoid */
.element:hover {
  top: -4px; /* Triggers layout */
}