动画卡顿/掉帧时如何审计并修复渲染性能问题

当 UI 动画卡顿、过渡不流畅，或需要审查 CSS/JS 动画性能时，按渲染管线优先级定位并修复问题。

适用场景

解决思路

1. 按优先级执行规则：1 永不模式（critical）→ 2 选择机制（critical）→ 3 测量（high）→ 4 滚动（high）→ 5 绘制（medium-high）→ 6 图层（medium）→ 7 模糊与滤镜（medium）→ 8 视图过渡（low）→ 9 工具边界（critical）。
2. 永不模式：不要在同一帧内交错进行布局读取与写入；不要在大面积或重要表面上持续动画布局属性；不要用 scrollTop、scrollY 或 scroll 事件驱动动画；不要写没有停止条件的 requestAnimationFrame 循环；不要混用多个各自测量或修改布局的动画系统。
3. 选择机制：默认使用 transform 和 opacity 做动效；仅当交互需要时才用 JS 驱动动画；绘制或布局动画只允许在小而隔离的表面上使用；一次性效果比持续动画更容易被接受；优先降级技术手段而非完全移除动效。
4. 测量：只测量一次，然后通过 transform 或 opacity 做动画；把所有 DOM 读取批量放在写入之前；不要在动画过程中反复读取布局；布局类效果优先用 FLIP 风格过渡；优先选择能批量测量与写入的方案。
5. 滚动：可用时优先用 Scroll 或 View Timelines 实现滚动联动动效；用 IntersectionObserver 处理可见性与暂停；不要轮询滚动位置来驱动动画；元素离屏时暂停或停止动画；滚动联动动效不得在大面积表面上触发持续布局或绘制。
6. 绘制：触发绘制的动画只允许在小而隔离的元素上使用；不要在大容器上动画绘制开销大的属性；不要为 transform、opacity 或 position 动画 CSS 变量；不要动画继承的 CSS 变量；将动画 CSS 变量作用域限制在局部并避免继承。
7. 图层：合成器动画需要图层提升，不要假设已自动提升；临时且精准地使用 will-change；避免过多或过大的提升图层；性能关键时用工具验证图层行为。
8. 模糊与滤镜：模糊动画保持小范围（<=8px）；模糊只用于短时、一次性效果；绝不持续动画模糊；绝不在大面积表面上动画模糊；优先使用 opacity 和 translate 而非 blur。
9. 视图过渡：视图过渡只用于导航级变化；交互密集的 UI 避免使用视图过渡；需要中断或取消时避免使用视图过渡；把尺寸变化视为可能触发布局。
10. 工具边界：除非明确要求，不要迁移或重写动画库；在现有动画系统内应用这些规则；绝不在同一组件内部分迁移 API 或混用风格。
11. 常见修复示例：布局抖动时用 transform 替代 width（.panel { transition: transform 0.3s; } 而非 transition: width 0.3s）；滚动联动用 scroll-timeline 替代 JS（.reveal { animation: fade-in linear; animation-timeline: view(); } 而非 window.addEventListener('scroll', ...)）。
12. 测量修复示例（FLIP）：先 const first = el.getBoundingClientRect(); 再 el.classList.add('moved'); 再 const last = el.getBoundingClientRect(); 然后 el.style.transform = `translateX(${first.left - last.left}px)`; 最后 requestAnimationFrame(() => { el.style.transition = 'transform 0.3s'; el.style.transform = ''; })。
13. 审查时：优先执行 critical 规则（永不模式、工具边界）；选择与意图匹配的最低开销渲染工作；对任何非默认选择，说明其正当约束（表面大小、时长或交互需求）；审查时优先给出可操作建议和具体替代方案而非理论。
14. 使用方式：/fixing-motion-performance 将约束应用到当前对话中的所有 UI 动画工作；/fixing-motion-performance <file> 对照全部规则审查该文件并报告违规（引用确切行或片段）、原因（一句话）和具体修复（代码级建议）。

适用边界 · 注意事项

• 除非明确要求，否则不要迁移或重写动画库，也不要在同一组件内部分迁移 API 或混用风格。
• 不要用 scrollTop、scrollY 或 scroll 事件驱动动画，也不要轮询滚动位置。
• 不要在大面积或重要表面上持续动画布局、绘制开销大的属性或模糊。