Lighthouse总阻塞时间始终为0ms问题排查求助

你的代码没产生预期的Total Blocking Time（TBT），核心原因有三个：

1. JS引擎的死代码优化 #

你写的while循环是空的，没有任何实际操作。现代JS引擎（比如V8）会执行死代码消除优化——编译器发现这个循环对程序状态没有任何影响，会直接跳过整个循环的执行，主线程根本不会被阻塞。哪怕把i值调得再大，实际执行时间也趋近于0，自然TBT为0。

解决方法：在循环里加一些带有副作用的操作，避免被引擎优化，比如：

let i = 999999999;
while (i--) {
  // 给全局变量赋值，让引擎无法忽略这个循环
  window.__dummy = i;
}

2. Lighthouse的TBT测量范围限制 #

TBT统计的是First Contentful Paint (FCP) 到 Largest Contentful Paint (LCP) 之间，主线程任务执行时长超过50ms的部分总和。你的同步脚本是在<h1>之后立即执行的，同步脚本会阻塞DOM解析和渲染，导致FCP要等到脚本执行完才会触发。这意味着脚本的阻塞时间全部落在FCP之前，不在TBT的测量窗口内，所以不会被统计。

要让阻塞时间被TBT捕获，可以把循环放到宏任务里，让它在FCP之后执行：

setTimeout(() => {
  let i = 999999999;
  while (i--) {
    window.__dummy = i;
  }
}, 0);

3. Vite开发环境的干扰 #

当前你用的是Vite开发服务器，开发模式下Vite会注入热模块替换（HMR）相关代码，还会对脚本做特殊处理，这可能改变脚本的执行时机或方式，导致Lighthouse无法准确捕获阻塞时间。

建议：先执行npm run build构建生产环境代码，再用静态服务器（比如serve）启动项目，之后再运行Lighthouse测试，这样结果才符合真实生产环境的情况。

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