当页面中的 motion-anything 动效出现明显掉帧、卡顿或过渡不平滑时，建议先按“复现—量化—定位—验证”的顺序排查，而不是直接改代码加 GPU 加速。动效性能问题往往不是单一原因，需要把现象收敛到一个可重复的最小场景，再用浏览器自带的性能工具确认瓶颈到底出在脚本执行、样式计算、绘制还是合成阶段，最后再针对具体环节做改动并对比效果。

这类问题通常由动画属性选型不当、触发频次过高、长列表重复渲染或内存增长引起。建议先使用浏览器性能工具采集帧率和耗时，确认瓶颈在脚本执行、样式计算还是绘制阶段，再有针对性地调整动画实现，并保留改动前后的对比记录。

先稳定复现并限定范围

动效卡顿经常是偶发的，直接打开 Profile 录制可能抓不到现场。先固定一条操作路径，比如进入页面后等待 2 秒，再点击某个按钮触发动画，期间不移动鼠标、不切换标签页。在无痕模式下、关闭所有浏览器扩展后重复三次，确认是否必现。如果只有特定页面组件或特定分辨率下才卡，就先把范围缩到那个组件和尺寸。

用性能工具测量帧率、耗时和 Event Loop

打开 DevTools 的 Performance 面板，录制动效播放的 5 到 10 秒。在摘要区域重点看 FPS 条、CPU 占用，以及 Scripting、Rendering、Painting 各自的耗时占比。也可以先用一段简单的 FPS 计数代码观察实时帧率，辅助判断卡顿是否持续存在：

let frames = 0, last = performance.now();
function loop(t) {
  frames++;
  if (t - last >= 1000) {
    console.log("FPS: " + frames);
    frames = 0;
    last = t;
  }
  requestAnimationFrame(loop);
}
requestAnimationFrame(loop);

这段代码适合在页面里临时验证帧率波动，但它只反映 rAF 的触发频率，不能代替 Performance 面板的完整数据。真正的判断依据应来自录制结果里的长任务和每帧耗时分布。

检查动画属性与合成层

动画性能通常从浏览器渲染流程来判断：改动 width、height、left、top、box-shadow 这类属性，会触发样式计算和布局，甚至导致大面积重绘；而使用 transform 和 opacity 做动画，大多数情况下可以跳过布局和绘制，只走合成阶段。在 Performance 录制的 Summary 里，如果 Painting 占比偏高，说明动画元素的绘制成本大。打开 DevTools 的 Rendering 面板，勾选 Paint flashing 和 Layer borders，能看到被重绘的区域以及哪些元素拥有独立合成层。若整块页面都在高亮闪烁，说明动画元素没有独立成层，可以尝试在动画元素上临时加 will-change: transform 或 transform: translateZ(0)，但要控制这类元素的数量，动画结束后应及时移除，否则会占用额外内存。

排查 JS 驱动动画与状态更新

如果 motion-anything 的动效是通过 JS 在 requestAnimationFrame 里逐帧修改样式，那么每帧里的 DOM 读取和写入顺序就格外重要。比如在动画循环里访问 offsetTop、clientWidth 会强制同步布局，容易造成帧耗时突增。建议把需要读取的布局值在动画开始前一次性读取，然后只改负责执行的样式属性。如果动效嵌在 Vue 或 React 这类框架里，还要检查是否在动画帧中触发了组件状态更新或重新渲染。临时把动画绑定的样式改为纯 style 变量、避免在动画过程中调用 setState，可以快速判断框架 re-render 是否是卡顿主因。在 Performance 的 Call Tree 面板按 Self Time 排序，能直接看到哪些函数占用了每帧时间，进一步缩小排查范围。

检查内存与长时间运行动效

有些动效刚播放时流畅，持续滚动或循环播放十几秒后逐渐变慢，这通常和内存增长或节点累积有关。在动效播放前拍一次 Heap Snapshot，播放结束后再拍一次，对比两次的堆内存增长量。如果每次播放完都有明显增长且不回落，说明有对象没被释放，常见来源是未移除的事件监听器、闭包引用或不断创建的新 DOM 节点。对于列表型动画，也要检查是否在每帧中重新生成节点而不是复用原有节点。

排查动效性能问题，最终要落在可见的瓶颈上。推荐的改进顺序是：先去掉不必要的动画帧，再改用合成器友好的属性，最后再优化 JS 逻辑。每做一处改动，就用同一个录制流程重新采集一次数据，对比 FPS 和耗时占比，确认改动有效后再进行下一步，避免把几个方案一次塞进去，回头又说不清是哪一步起的作用。