CSS高级动画与性能优化
考察知识点
- CSS动画原理与硬件加速（渲染管线、合成线程、GPU加速）
- transform与opacity优化（重排重绘规避、合成层创建）
- will-change与触发重排重绘（优化提示、性能代价、最佳实践）
- 复合层与渲染管线（层爆炸、内存管理、渲染分层）
- requestAnimationFrame与JS动画（帧率同步、回调调度、取消机制）
- 关键帧动画与性能调优（60fps策略、动画属性选择）
- 低性能设备适配策略（prefers-reduced-motion、降级方案）
CSS硬件加速动画完全绕过主线程，因此即使主线程被JavaScript阻塞，动画也能流畅运行。
opacity从1变化到0.99的动画不会触发重绘，与opacity从1变化到0的动画性能相同。
CSS transition的性能优于animation，因为transition只需要计算起点和终点，而animation需要解析所有关键帧。
连续修改多个触发重排的CSS属性时，浏览器会每次修改后立即执行重排，因此应尽量批量修改。
CSS属性变化触发重排与触发重绘的区别是什么？
"层爆炸（Layer Explosion）"是指什么问题，应该如何避免？
使用left: 0到left: 100px的动画与使用transform: translateX(0)到transform: translateX(100px)的动画，性能差异的主要原因是什么？
如何取消requestAnimationFrame注册的动画回调？
CSS属性will-change的核心作用是什么？
关于opacity动画的性能特性，以下说法正确的是？
CSS动画触发硬件加速的核心原理是什么？
使用requestAnimationFrame实现动画，相比setTimeout/setInterval有哪些优势？
浏览器渲染管线中，各阶段的主要职责是什么？
关于will-change属性的合理使用，以下哪些做法是正确的？
实现60fps流畅CSS动画的关键策略有哪些？
以下哪些场景可以使用transform替代传统CSS属性来优化动画性能？
CSS媒体查询prefers-reduced-motion的应用场景包括哪些？
以下哪些CSS属性动画可以触发硬件加速，在合成线程处理？
浏览器渲染管线包含四个阶段：____________、____________、____________、合成。其中transform和opacity动画可以跳过布局和绘制阶段，直接在合成阶段由GPU处理。
CSS中，设置____________属性中的3D变换函数（如translate3d、translateZ）会强制创建合成层，这是早期触发硬件加速的常用hack方式，现代浏览器推荐使用____________属性来显式提示。
