Performance Optimization 是一个面向动画性能问题的技能，适用于动画运行缓慢、卡顿或出现掉帧的场景。其核心思路是借助迪士尼的十二动画原则来定位和修复性能问题。
【问题指标】 帧率低于 60fps、运动卡顿或抖动、界面感觉迟滞、移动端耗电、布局抖动（layout thrashing）。
【按原则诊断】
- Straight Ahead vs Pose-to-Pose：问题为实时计算每一帧，修复方式是改用 pose-to-pose（关键帧）动画，让浏览器通过 CSS 过渡或 will-change 在状态之间插值。
- Timing：问题为同时运行的动画过多，修复方式是错开动画，将起始时间偏移 50-100ms，以减少并发计算。
- Secondary Action：问题为次要效果过多，修复方式是在低功耗设备上移除非必要的次要动画，并使用 prefers-reduced-motion 查询。
- Solid Drawing：问题为动画使用了高开销属性（width、height、top、left），修复方式是只动画 transform 和 opacity，这些属性由 GPU 加速并跳过布局与绘制。
- Staging：问题为对屏幕外元素做动画，修复方式是只动画可见内容，使用 Intersection Observer 暂停屏幕外动画。
【快速修复】 用 CSS 替代 JS 动画（浏览器优化）；用 transform 替代位置属性（GPU 图层）；谨慎添加 will-change（向浏览器提供提示）；减少同时动画（错开或串行）；在移动端降低动画复杂度（检测设备能力）。
【排查清单】 在 DevTools 的 Performance 标签中检查长帧；确认动画只使用 transform/opacity；统计同时动画数量（保持在 3-4 个以下）；在最低配置的目标设备上测试；检查是否存在布局抖动（强制重排）；确认 will-change 未被过度使用；开启 CPU 节流进行测试；检查标签页隐藏时动画是否暂停。
【代码模式】 快速写法：.element { will-change: transform; transition: transform 200ms ease-out; } .element:hover { transform: translateY(-4px); } 应避免的慢写法：.element:hover { top: -4px; /* 触发布局 */ }
【使用方式与适用场景】 当动画出现掉帧、卡顿或界面迟滞时，可按上述原则逐项诊断，并结合快速修复与排查清单定位瓶颈，适用于 Web 与移动端的交互动画性能调优。
【限制】 资料未提供具体的安装命令、依赖要求、支持的平台范围、收费方式与价格信息。