一文清晰搞懂requestAnimationFrame与requestIdCallback区别与执行时间顺序

1. 浏览器的一帧（16.67ms,1000/60）都做了什么？
   它包含了，js的执行+浏览器渲染。具体可以参考历史文章。
   事件循环
   浏览器渲染原理

如下图，一帧的执行过程

补充：
2. react的时间切片
react将一个大渲染任务切成一个个小任务，每个小任务只负责一小部分dom更新，每小部分在浏览器空闲的时候去更新（requestIdCallback v16实现, requesetHostCallbcak （内部通过setTimeout来兼容）调用message channel 实现v18）

3. • requestAnimationFrame: 在浏览器渲染之前执行，在事件循环的最后，类似setTimeout，但是不需要设置时间间隔，回调函数作为参数，回调函数会在浏览器绘制之前调用，返回一个整数表示定时器编号，可以传递给cancelAnimationFrame取消函数执行
4. • requestIdCallback:浏览器有空闲时间的时候执行，在浏览器渲染结束以后判断是否有时间间隔执行。第二个参数timeout如果传了，并且有一个正值，而回调在 timeout 毫秒过后还没有被调用，那么回调任务将放入事件循环中排队执行~