Total Blocking Time (TBT)

总阻塞时间 (TBT) 是用于衡量加载响应能力的重要实验室指标。它会测量首次内容绘制 (FCP) 之后的总时间,在该时间内,主线程处于阻塞状态的时间足够长,足以阻止对用户输入做出响应。较低的 TBT 有助于确保网页易于浏览

默认情况下,在可交互时间 (TTI) 之后,Lighthouse 会停止监控 TBT,一些其他测量页面加载的实验室工具也是如此。如需了解详情,请参阅 TBT 与 TTI 之间的关系

每当存在长任务(一种在主线程上运行时间超过 50 毫秒 (ms) 的任务)时,主线程就会被视为“阻塞”。我们说主线程处于“阻塞”状态,因为浏览器无法中断正在进行的任务。如果用户尝试在耗时较长的任务过程中与页面互动,浏览器必须等待任务完成才能响应。

如果主线程处于阻塞状态的时间超过 50 毫秒,用户很可能会注意到延迟,并认为网页运行缓慢或损坏。

给定耗时较长的任务的阻塞时间即超过 50 毫秒的时长。网页的总阻塞时间是指每个长任务在 FCP 后所测时间范围内(通常是 TTI,对于页面加载工具,或其他工具的总跟踪时间)的阻塞时间总和。

例如,下图显示了网页加载期间的浏览器主线程:

主线程上的任务时间轴
主线程上任务的时间轴。

此时间轴包含五个任务,其中三个任务是长时间运行的任务,因为它们的时长超过 50 毫秒。下图显示了每个长时间运行的任务的阻塞时间:

主线程上的任务时间轴,显示了阻塞时间
相同任务,但标记了阻塞时间。

在主线程上运行任务所花费的总时间为 560 毫秒,其中 345 毫秒被视为阻塞时间。

任务时长 任务阻塞时间
任务 1 250 毫秒 200 毫秒
任务 2 90 毫秒 40 毫秒
任务 3 35 毫秒 0 毫秒
任务 4 30 毫秒 0 毫秒
任务 5 155 毫秒 105 毫秒
Total Blocking Time 345 毫秒

TBT 与 TTI 有什么关系?

TBT 衡量的是一段时间内的指标。对于过去常用于测量页面加载情况的某些实验室工具(包括 Lighthouse),在 TTI 之前,会一直测量 TBT,因为这有助于量化页面在变为可靠的互动状态之前处于非交互式状态的严重程度。不过,在 TTI 之后,您可以继续测量 TBT,例如在 Lighthouse 时间跨度模式下。

如果主线程至少有 5 秒没有长任务,TTI 就会将页面视为“可交互”。这意味着,如果时间为 10 秒,延展至 3 个时长为 51 毫秒的任务就可将 TTI 推回 10 秒的任务。

不过,对于尝试与网页互动的用户来说,这两种场景感觉起来非常不同。三个 51 毫秒任务的 TBT 为 3 毫秒,而单个时长为 10 秒的任务的 TBT 为 9950 毫秒,这会导致用户体验差得多。

由于 TBT 能更准确地代表离群值,因此它通常比 TTI 更有帮助,即使 TBT 测量在 TTI 时停止也是如此。

衡量 TBT

TBT 是一个应在实验室中衡量的指标。衡量 TBT 的最佳方法是对您的网站运行 Lighthouse 性能审核。如需了解使用详情,请参阅关于 TBT 的 Lighthouse 文档

实验工具

TBT 得分是多少?

为了提供良好的用户体验,在普通移动硬件上测试网站时,网站的 TBT 应低于 200 毫秒

如需详细了解页面的 TBT 对 Lighthouse 性能得分的影响,请参阅 Lighthouse 如何确定您的 TBT 得分

改进 TBT

如需了解如何针对特定网站改进 TBT,请运行 Lighthouse 性能审核,并注意审核建议的任何特定机会

如需了解如何从总体上改进 TBT(针对任何网站),请参阅以下性能指南: