动画性能

动画每一帧都可能触发样式计算、布局、绘制和合成。改变几何属性通常需要重新布局，改变颜色可能需要绘制，transform 和 opacity 在合适条件下更容易只进入合成；这只是优化方向，不能代替实际测量。

.drawer { transition: transform 180ms ease; }
.drawer.is-open { transform: translateX(0); }

不要默认给所有元素加 will-change；它可能增加内存和图层管理成本。动画性能要看真实元素数量、阴影、滤镜、图片、设备刷新率和主线程负载。开发者工具 Performance 面板比“某个属性永远快”更能说明当前页面发生了什么。

实验与练习

制作同一页面中的两个 240×160 面板：A 只动画 left，B 只动画 transform。每组点击 10 次、录制 5 秒 Performance，记录长任务数量、Layout/Paint 事件和输入响应；再只给 B 增加大面积阴影，解释绘制成本为何可能改变。

可运行微实验：状态、时间线与降级

<button id="toggle">切换</button><div id="panel" class="panel"></div>
<style>
.panel { width: 240px; height: 160px; background: coral; transition: transform 180ms ease; }
.panel.is-open { transform: translateX(120px); }
@media (prefers-reduced-motion: reduce) { .panel { transition-duration: 1ms; } }
</style>
<script>
  const toggle = document.querySelector('#toggle')
  const panel = document.querySelector('#panel')
  toggle.addEventListener('click', () => panel.classList.toggle('is-open'))
</script>

记录普通模式与 prefers-reduced-motion: reduce 下的持续时间和位置变化；将 transform 替换为 width 后重新录制，只有行为等价且证据一致时才讨论性能差异。

常见错误

• 只看 DevTools 的 FPS 数字，不看长任务和实际输入响应。
• 给整个页面设置 will-change。
• 把一次空页面测试结果推广到复杂生产界面。

继续阅读

性能不是唯一边界，下一篇把用户偏好和可访问性加入动画设计：用户偏好与可访问性。

练习

1. 用最小输入复现“动画性能”的成功路径，并记录可观察结果。
2. 改变一个时序、数据或宿主条件，解释结果为何变化。
3. 删除清理、校验或降级分支，写出能证明缺陷的断言。

查看本节答案