window.requestAnimationFrame与浏览器重绘

Posted by Mars at

window.requestAnimationFrame API的功能:精确控制函数在重绘前时间节点执行。

1. 有关浏览器重绘机制的几个事实

  1. 大多数浏览器会限制重绘频率,一般不大于屏幕刷新率60Hz;
  2. 浏览器发生重绘的时机不确定,但是两次重绘时间间隔一定不小于(1/60)s,也就是大约17ms;
  3. requestAnimationFrame API传入一个函数,控制这个函数精确在浏览器下次重绘前调用。

2. requestAnimationFrame的机制

requestAnimationFrame中传入的函数,会被依次加入一个回调队列,这个回调队列中的全部函数都会在浏览器下次重绘前依次执行。

requestAnimationFrame(fn1)中,如果fn1内部再次调用requestAnimationFrame(fn2),则传入的函数fn2会被放入下下次重绘前执行。

也就是说,如果递归调用requestAnimationFrame,则可以保证依次传入的函数fn1,fn2,fn3在每次重绘前依次执行。

微任务和requestAnimationFrame的执行顺序:

先依次执行微任务队列,最后依次执行requestAnimationFrame回调函数队列。(保证requestAnimationFrame传入的函数紧贴着重绘执行)

3. 取消requestAnimationFrame

和setTimeout一样,通过返回的id进行取消。

let a = requestAnimationFrame()
// 手动取消
cancelAnimationFrame(a)

取消后,requestAnimationFrame(fn)传入函数fn被从重绘前执行的回调队列中清除。

Keywords: JavaScript
previousPost nextPost
已经有 1000000 个小伙伴看完了这篇推文。