Total Blocking Time指标

Total Blocking Time

总阻塞时间 (TBT) 是一项用于衡量加载响应能力的重要实验指标，因为它有助于量化网页在变为可靠交互之前处于非交互状态的严重程度。

TBT（Total Blocking Time），阻塞总时间，记录在 FCP 到 TTI 之间所有长任务的阻塞时间总和。用于衡量在页面加载过程中，用户交互受到阻塞的总时间。

假如说在 FCP 到 TTI 之间页面总共执行了以下长任务（执行时间大于 50ms）及短任务（执行时间低于 50ms）

如果任务时间足够长（超过 50 毫秒），用户很可能会注意到延迟，并认为网页运行缓慢或出现网络问题。

每个长任务的阻塞时间就等于它所执行的总时间减去 50ms，网页的总阻塞时间是在测量的时间范围内（在 FCP 后，TTI 之前）发生的每项长任务的阻塞时间的总和。

所以对于上图的情况来说，TBT 总共等于 345ms。

这个指标的高低其实也影响了 TTI 的高低，或者说和长任务相关的几个指标都有关联性。

获取阻塞总时间：

const observer = new PerformanceObserver((list) => {
  let totalBlockTime = 0;
  for (const entry of list.getEntries()) {
    if(entry.duration > 50) {
        totalBlockTime += (entry.duration - 50)
    }
    console.log('longtask candidate: ', entry.duration);
  }
  console.log('total block time: ', totalBlockTime)
});
observer.observe({entryTypes: ['longtask']});

TBT 得分

为了提供良好的用户体验，在一般移动设备硬件上进行测试时，网站应力求将总阻塞时间控制在 200 毫秒以内。

优化 TBT 的方法

1. 减少主线程任务:

   将 JavaScript 代码分成较小的任务块，避免在主线程上执行过长的任务。使用 requestIdleCallback 和 setTimeout 来将任务分片处理。

2. 优化资源加载:

   延迟加载非关键资源，确保关键内容优先加载。使用 async 和 defer 属性来优化 JavaScript 文件的加载。

3. 使用 Web Workers:

   将计算密集型的任务移到 Web Workers 中，减少主线程的负载。

4. 优化代码性能:

   确保 JavaScript 和 CSS 代码经过压缩和优化，以减少解析和执行时间。

除了在页面加载过程中可以用来判断用户交互受到的阻塞总时长外，还可以用来监控记录和优化用户交互中的长任务，比如说点击按钮这些，虽然 TBT 不是专门用于测量这些任务的，但这些用户体验也是需要关注和优化的。