RequestAnimationFrame特点

  • 回调函数会在浏览器重绘之前调用
  • 想要在下次重绘时产生另一个动画画面,回调函数中必须调用 requestAnimationFrame()
  • 回调函数会被传入一个参数,DOMHighResTimeStamp,指示当前被 requestAnimationFrame() 排序的回调函数被触发的时间
  • 会把每一帧中的所有DOM操作集中起来,在一次重绘或回流中完成
  • 在隐藏或不可见的元素中,将不会进行重绘或回流
  • 并且如果页面不是激活状态下的话,动画会自动暂停,有效节省CPU开销

对比setTimeout的特点

  • setTimeout是多个独立绘制,每次eventLoop只会取一个setTimeout任务
  • 页面非激活状态,setTimeout不会停止
  • 现代浏览器,对setTimeout/setInterval做了优化,页面非激活状态下,timer < 1000ms的会自动暂停

引用结论

  • 对于动画效果的实现,避免使用 setTimeout 或 setInterval,请使用 requestAnimationFrame。
  • 将长时间运行的 JavaScript 从主线程移到 Web Worker。
  • 使用微任务来执行对多个帧的 DOM 更改。

优化 JavaScript 执行