requestAnimationFrame(rAF)上报渲染性能标记的作用及rafTimer实现疑问

要搞懂这个问题，得先明确浏览器事件循环里几个关键阶段的执行顺序，以及这两个API的定位：

• setTimeout(callback, 0) 只是把回调塞进下一个宏任务队列，但这个队列的执行时机是在当前宏任务的微任务处理完毕后。这时候浏览器不一定完成了当前帧的渲染——如果当前同步逻辑后还有其他待处理任务，或者浏览器因负载推迟了渲染，setTimeout的回调可能在渲染前就执行，导致上报的性能标记和实际渲染时机不匹配。
• requestAnimationFrame(rAF) 是浏览器专门为当前渲染帧准备的钩子，它会严格跟随浏览器的渲染节奏：当浏览器要开始渲染当前帧时，先执行所有rAF回调，再进行布局、绘制等渲染操作。

把setTimeout嵌套在rAF里，实际的执行流程是：

1. 同步代码执行完毕
2. 进入渲染阶段，浏览器先执行rAF的回调
3. rAF回调里调用setTimeout，将上报回调放入下一个宏任务队列
4. 浏览器完成当前帧的全部渲染工作
5. 处理下一个宏任务，执行setTimeout里的上报回调

这种嵌套写法的核心目的，就是精准确保上报回调在当前帧渲染完成后执行，这样拿到的渲染性能数据（比如帧耗时、绘制完成时间）才是真实有效的，能准确反映当前帧的渲染状态。

如果直接用setTimeout，没法保证它的回调一定在渲染后触发，很可能导致性能标记上报时机错误，数据失真。

内容的提问来源于stack exchange，提问作者licaomeng