总阻塞时间(Total Blocking Time - TBT)

+ 查看更多

总阻塞时间(TBT)是首次渲染时间(FCP)和可互动时间(TTI)之间的这段时间内，用户无法和浏览器交互的时间。主线程通常被认为是“阻塞”的受害者。任何时候，假设有一个长任务（超过50毫秒的任务），那么主线程就会被阻塞掉。我们说主线程被“阻塞”是因为浏览器不能中断正在进行的任务。所以如果一个用户尝试在一个长任务的中间点个链接什么的，浏览器会等待任务完成后才响应。如果任务足够长(例如超过50毫秒)，用户很可能会注意到延迟，并认为页面缓慢或混乱。

所以，如果长任务的持续时间超过50毫秒，那么它就会造成阻塞。总阻塞时间就是每个长任务中超过50ms那部分。

鸽就知道你看不懂，咱们看图吧。例如，这个浏览器加载主线程的图:

上面有5个任务，其中3个是长任务，因为它们的持续时间超过50毫秒。下一个图表则显示了每个长任务的阻塞时间:

因此，虽然在主线程上运行任务的总时间是560毫秒，但其中只有345毫秒被认为是阻塞时间。

总阻塞时间TBT与可交互时间TTI有何关系?

TBT是TTI的一个很好的伙伴指标，因为它有助于量化一个页面在变成可靠的交互性之前的非交互性的严重程度。打个不是很精确比方，TTI是一辆晚点火车最终到站的时间，那么TBT就是晚点火车在路上多停留的时间。

如果主线程5秒没有长任务，TTI认为页面是“可靠的交互”。这意味着3个51毫秒的长任务分散在10秒内可以将TTI推到10秒的长度。但是这两个场景对于试图与页面交互的用户来说感觉非常不同。

什么是好的总阻塞时间?

总阻塞时间当然越小越好。为提供良好的用户体验，网站应力求其小于300毫秒。说到这里，鸽必须吐槽一下。像虎翼的手机加速站，可以做到100ms内打开一个页面了。这300ms的标准可真是低啊。

如何改进总阻塞时间

由于每个站点的情况各不相同，要了解如何改进特定站点的TBT，您可以运行36测的网站速度测试报告，其中会有关于TBT的具体改进意见。