为什么JavaScript的动画需要requestAnimationFrame_它与CSS动画有何不同？

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 执行
• 浏览器知道整个动画的时间轴，能提前规划、插值、跳帧优化，甚至做时间拉伸（如页面卡顿时自动跳过中间帧）
• 无需手动写循环或帧逻辑，声明式写法更简洁、更稳定

关键差异：控制权与适用场景不同

两者不是替代关系，而是分工明确：

标签： css javascript java js 浏览器 显示器 区别 css动画 硬件加速 重绘 为什么 canva