requestAnimationFrame（rAF）不是必须，而是为匹配屏幕刷新节奏、避免丢帧、节省资源；它自动对齐刷新率、页面不可见时暂停、比定时器更精准节能，并保证回调在渲染前执行。
JavaScript动画用 requestAnimationFrame（简称 rAF）不是“必须”，而是为了**匹配屏幕刷新节奏、避免丢帧、节省资源**。它本身不负责绘制，只是告诉浏览器：“我下一帧要更新画面，请在下一次重绘前调用我的函数”。这和 CSS 动画的底层机制有本质区别。
requestAnimationFrame 的核心作用
rAF 是浏览器提供的调度接口，它：
- 自动对齐显示器的刷新率（通常是 60Hz，即每 16.7ms 一帧），避免因定时器误差导致的卡顿或掉帧
- 在页面不可见（如切换标签页）时自动暂停回调，省电且不浪费 CPU
- 比
setTimeout或setInterval更精准、更节能——后者无法感知浏览器渲染周期，容易出现“画了两帧才更新一次”或“一帧里更新多次”的问题 - 保证回调执行时机在样式计算、布局、绘制之前，便于做 DOM 更新并让浏览器批量处理
CSS 动画由浏览器直接驱动
CSS 动画（@keyframes + animation）不经过 JavaScript 主线程，而是由浏览器的合成器（compositor）在独立线程中运行：
- 只要只修改
transform和opacity这类可被硬件加速的属性，动画就能跑在 GPU 线程上，不阻塞 JS 执行 - 浏览器知道整个动画的时间轴，能提前规划、插值、跳帧优化，甚至做时间拉伸（如页面卡顿时自动跳过中间帧）
- 无需手动写循环或帧逻辑，声明式写法更简洁、更稳定
关键差异：控制权与适用场景不同
两者不是替代关系，而是分工明确：
立即学习“Java免费学习笔记（深入）”；
- CSS 动画适合固定路径、预设行为的交互动画：比如按钮悬停缩放、菜单淡入、加载转圈。它性能好、代码少、易维护
- JavaScript + rAF 适合动态、响应式、数据驱动的动画：比如跟随鼠标移动的粒子、物理模拟（弹簧、重力）、滚动视差、Canvas 绘图动画。JS 能实时读取状态、计算、决策
- 混合使用也很常见：用 CSS 做基础过渡，用 JS + rAF 处理复杂交互逻辑，再通过 class 切换触发 CSS 动画
一个小提醒：别滥用 rAF
rAF 不是“加了就一定更流畅”。如果每次回调里做了大量 DOM 读写、强制同步布局（如读 offsetTop 后立刻改样式），反而会引发重排重绘，拖慢帧率。真正流畅的关键是：
- 只动
transform/opacity（让合成器接管） - 避免在 rAF 回调中读取布局信息（把读操作提前提到 rAF 外，或用
getBoundingClientRect后缓存） - 必要时用
will-change提示浏览器哪些元素将被动画化
基本上就这些。rAF 是 JS 动画的“节拍器”，CSS 动画是浏览器的“自动演奏员”——用对地方，动画才既顺滑又可控。
