“主线程阻塞型帧堆积(Frame Backlog)” 是前端性能调优中一个非常核心但常被忽视的现象,尤其在 WebGL / Three.js / 游戏循环 或 高频 UI 渲染 场景下。
🧠 一、定义:什么是“主线程阻塞型帧堆积”
帧堆积(Frame Backlog) 指的是:
渲染任务(frame tasks)或消息事件的执行速度慢于它们的产生速度,导致多个帧的逻辑在后续的某一帧中被“挤在一起”执行,从而引发卡顿、延迟、掉帧等问题。
而当这一问题的根本原因是:
主线程(Main Thread)长时间被 JavaScript 执行或布局计算阻塞,无法及时进入下一帧的 requestAnimationFrame 回调时,
我们称它为 “主线程阻塞型帧堆积(Main Thread Blocking Frame Backlog)”。
🧩 二、浏览器帧循环原理简述
浏览器的渲染循环一般为 60 FPS(每帧约 16.6ms),主线程执行的顺序大致是:
如果第 [2] 或 [3] 阶段的执行时间 > 16.6ms,
则浏览器无法按时完成该帧的渲染,后续帧任务就会开始堆积。