requestAnimationFrame 在何时执行

Question

requestAnimationFrame 是一个 microtask 还是一个 macrotask

setTimeout(() => {
  console.log('setTimeout')
}, 0)

requestAnimationFrame(() => {
  console.log('requestAnimationFrame')
})

new Promise(r => {
  console.log('promise')
  r()
}).then(() => console.log('then')

如果是一个 microtask, 那么他应该打印 promise requestAnimationFrame then setTimeout

如果是一个 macrotask, 那么他应该打印 promise then setTimeout requestAnimationFrame

但是实际上有两种可能的打印： promise then requestAnimationFrame setTimeout 和 promise then setTimeout requestAnimationFrame

难道是它既不是一个 macrotask 也不是 microtask ，但是浏览器会在下一帧开始的时候把它加入到 microtask 队列的最前方

Answer 1

requestAnimationFrame是一个单回调，和setTimeout差不多

区别是：

setTimeout的时间是你指定的

requestAnimationFrame你不用写时间，它的重绘时间间隔是根据不同浏览器的刷新频率自行脑补的- -所以有严重兼容问题，记得有封装好的处理兼容的函数。

W3C 标准，requestAnimationFrame在浏览器每次刷新页面之前执行(之前是何时？浏览器刷新频率才知道，不归你管)