Total Blocking Time指标

Total Blocking Time

TBT（Total Blocking Time），阻塞总时间，记录在 到 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 的方法

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