Chrome DevTools单个Task关联丢帧分析及requestAnimationFrame疑问

1. 为何耗时极短的requestAnimationFrame会出现执行间隔？ #

requestAnimationFrame（以下简称rAF）的触发时机由浏览器帧调度逻辑决定，它会在浏览器准备重绘之前被调用，但前提是主线程有足够空闲时间完成完整渲染流程（rAF回调 → 样式计算 → 布局 → 绘制）。哪怕你的rAF回调本身耗时极短，只要主线程被其他任务占用，就会导致rAF触发被推迟甚至跳过：

• 主线程被同步JS、垃圾回收（GC）、用户事件处理、资源加载等任务阻塞，占用时长超过单帧预算（比如60Hz刷新率下的~16.6ms）；
• 浏览器帧调度与显示器刷新率同步，若某一帧周期内主线程被占满，浏览器会直接跳过该帧的rAF调用，避免累积延迟。

2. 为什么4帧里只出现3次调用栈？ #

你看到的4个帧标记中，有一帧的rAF回调根本未被执行——这就是典型丢帧场景。当浏览器判断当前帧周期内，无法及时完成rAF回调及后续渲染步骤时，会主动放弃该帧的rAF调用，直接进入下一帧调度流程，因此调用栈数量会比可见帧少一次。

3. 右侧红色帧为何未执行requestAnimationFrame？ #

红色帧通常代表该帧耗时已超过单帧预算，或主线程在该帧周期内完全被阻塞：

• 高优先级任务抢占主线程：比如同步JS执行、GC、页面布局重计算等任务，在rAF触发前就耗尽了整个帧的时间，浏览器没有多余时间执行rAF回调；
• 浏览器帧优化策略：当检测到当前帧剩余时间不足以完成rAF回调+全量渲染流程时，浏览器会直接跳过rAF调用，优先保证后续帧调度，避免更严重的卡顿；
• rAF触发逻辑在重绘前，若之前的任务已直接启动重绘阶段，rAF回调就会被跳过。

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