Chrome Dev Tools：同一页面加载为何出现三种不同主线程阻塞时长？

• Lighthouse的双统计逻辑
  Lighthouse生成报告时，会统计两个时间窗口的TBT：一个是首次内容绘制（FCP）到最大内容绘制（LCP）之间的阻塞时间总和，另一个是从页面开始加载到完全稳定整个周期的阻塞时间总和。你看到的240ms和596ms，基本就是这两个不同阶段的统计结果。

• Lighthouse与Performance面板的计算场景差异
  Lighthouse是在受控模拟环境下运行的：它会自动清除缓存、禁用浏览器扩展、使用固定的网络/CPU节流规则，只统计页面加载到稳定状态前的阻塞时间。而Performance面板是基于你实际录制的真实交互过程——如果录制时你做了滚动、点击等操作，或者浏览器后台有其他进程占用资源、缓存没清空，就会捕获到更多后续的长任务，导致1212ms这类更大的数值。

• 加载环境的细微波动
  哪怕是同一页面，每次加载时的JS执行顺序、第三方资源加载速度、浏览器后台进程负载、磁盘缓存命中情况都可能有微小差异。这些波动会直接影响长任务的数量和持续时长，进而导致TBT计算结果出现偏差。

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