划重点 —— requestAnimationFrame

基本定义

function requestAnimationFrame( callback: ( time: DOMHighResTimeStamp ) => void ): number
function cancelAnimationFrame(requestId: number): void

浏览器在 下一次重绘之前 调用传入给该方法的动画函数（即回调函数）。回调函数执行次数通常是 每秒 60 次 ，但在大多数遵循 W3C 建议的浏览器中，回调函数执行次数通常与浏览器屏幕刷新次数相匹配。

requestAnimationFrame() 的执行是一次性的

用途

主要用途是按帧对网页进行重绘

优缺点

优点

• 利用显示器刷新机制，由系统决定回调函数的执行时机，节省系统资源，一般不会引起丢帧，不会卡顿；
• 在页面不处于浏览器的当前标签，自动停止刷新，节省了CPU、GPU和电力。

缺点

在主线程上完成。主线程繁忙，requestAnimationFrame的动画效果会降低。

相关知识点

回流、重绘、回调函数、浏览器刷新频率、动画原理