在移动端开发中，针对动画性能优化，你会采取哪些策略？同时，从性能和使用场景角度，请说明 CSS 动画与 JavaScript 动画的选型依据。
考察说明
考查候选人是否掌握移动端动画性能优化的核心手段，以及能否根据动画特性正确选择 CSS 或 JS 动画。
回答思路
- 【回答框架 1】移动端动画性能优化的关键在于减少主线程负担和避免重排重绘。优先使用 transform 和 opacity 属性进行动画，这些属性可触发 GPU 合成，通过合成器线程处理，不阻塞主线程。避免动画引起布局变化（如修改 width、height、top、left），因为这会导致回流。使用 will-change 属性提前告知浏览器哪些元素将变化，促进独立层合成，但需谨慎使用，避免过多层导致内存压力。
- 【回答框架 2】CSS 动画适合简单、低开销的动画，如按钮反馈、过渡效果，它由浏览器优化，可在合成器线程执行，代码简洁，性能开销小。JS 动画（如 requestAnimationFrame）适合需要复杂控制、动态计算、暂停、回放、或与第三方交互的动画，例如游戏场景或异步数据驱动的动画。JS 动画更灵活，但需手动管理优化，否则容易造成性能问题。
- 【回答框架 3】选择依据：若动画是简单状态切换，优先 CSS 动画，性能好且实现简单。若动画需要持续更新、动态路径或依赖用户交互，选择 JS 动画，可使用 requestAnimationFrame 保证 60fps，并配合 transform 和 opacity。对于复杂动画，可使用 Web Animations API 或第三方库（如 GSAP）获得更好性能和可控性。
- 【回答框架 4】针对移动端，需注意设备性能差异，降低内存占用和 CPU 消耗。避免长时间运行的动画，适当使用节流或请求 id 停止。确保动画流畅，可通过性能分析工具（如 Chrome DevTools 的 Performance 面板）观察帧率，优化不必要的像素管道步骤。
- 【关键点 1】优先使用 transform 和 opacity 动画，避免触发布局和绘制。
- 【关键点 2】CSS 动画适合简单过渡，JS 动画适合复杂动态场景。
- 【关键点 3】使用 requestAnimationFrame 实现高性能 JS 动画。
- 【关键点 4】使用 will-change 时谨慎，避免过度使用。
- 【易错点 1】错误地认为所有动画都要用 JS，忽略了 CSS 动画的简化。
- 【易错点 2】过度使用 will-change 会导致内存占用过高。
- 【易错点 3】忽略了动画对低端设备的性能影响，未进行降级处理。