发布时间：2019 年 11 月 7 日；上次更新时间：2025 年 10 月 15 日
什么是 TBT？
总阻塞时间 (TBT) 指标用于衡量在首次内容渲染 (FCP) 之后，主线程处于阻塞状态的总时长，在此期间，主线程处于阻塞状态的时间够长，足以阻止输入响应。
默认情况下，Lighthouse 会在 Time to Interactive (TTI) 之后停止监控 TBT，一些用于衡量网页加载速度的其他实验室工具也是如此。请参阅“TBT 与 TTI 有何关系？”。
只要有长任务（在主线程上运行超过 50 毫秒的任务），主线程就会被视为“阻塞”。之所以说主线程被“阻塞”，是因为浏览器无法中断正在进行的任务。因此，如果用户在长时间任务执行到一半时确实与网页互动，浏览器必须等待任务完成才能做出响应。
如果任务足够长（超过 50 毫秒），用户很可能会注意到延迟，并认为网页运行缓慢或已损坏。
给定长任务的阻塞时间是指其时长超过 50 毫秒的部分。网页的总阻塞时间是指在测量时间范围内（通常是网页加载工具的 TTI 或其他工具的总轨迹时间）FCP 之后发生的每个长任务的阻塞时间之和。
例如，请看下图，其中显示了浏览器在网页加载期间的主线程：
上图所示的时间轴包含 5 个任务，其中 3 个是长任务，因为它们的时长超过 50 毫秒。下图显示了每个长任务的阻塞时间：
因此，虽然在主线程上运行任务的总时间为 560 毫秒，但只有 345 毫秒的时间被视为阻塞时间。
| 任务时长（以毫秒为单位） | 任务阻塞时间（毫秒） | |
|---|---|---|
| 任务 1 | 250 | 200 |
| 任务 2 | 90 | 40 |
| 任务 3 | 35 | 0 |
| 任务 4 | 30 | 0 |
| 任务 5 | 155 | 105 |
| Total Blocking Time | 345 毫秒 | |
TBT 与 INP 有何关系？
TBT 早于 INP，可作为 INP 问题的指标，尤其是在实验室环境中，INP 的衡量难度更大，TBT 就更有用了。不过，TBT 可能会标记潜在问题，但用户可能不会遇到任何问题（如果他们当时没有互动）。此外，在实验室环境中进行测量时，它还可能会遗漏因互动而导致的问题。我们建议在实际环境中衡量 INP，以了解用户遇到的实际响应速度问题。对于实验室而言，TBT 可能是 INP 的合理代理指标，但它本身并不能替代 INP。
TBT 与 TTI 有何关系？
TBT 是在一段时间内测量的。对于一些传统上用于衡量网页加载情况的实验室工具（包括 Lighthouse），TBT 一直衡量到 TTI，因为它可以帮助量化网页在变为能与用户进行可靠互动之前处于不可互动状态的时间（用严重程度表示）。不过，TBT 也可能会在网页加载后（即在 TTI 之后）继续进行衡量，例如在 Lighthouse Timespan 模式下。
如果主线程至少 5 秒内没有长时间运行的任务，TTI 会将网页视为“可靠的互动”。这意味着，分布在 10 秒内的 3 个 51 毫秒的任务可以将 TTI 推迟到与单个 10 秒长的任务相同的程度，但对于尝试与网页互动的用户来说，这两种情况的感觉会截然不同。
在第一种情况下，3 个 51 毫秒的任务的 TBT 为 3 毫秒。而一个时长为 10 秒的任务的 TBT 为 9, 950 毫秒。第二种情况中较大的 TBT 值量化了较差的体验。
此示例说明了为什么 TBT 通常比 TTI 更好，因为它不太容易受到离群值的影响。即使 TTI 用作 TBT 的端点，也是如此。
如何衡量 TBT
TBT 是一项应在实验室内测量的指标。衡量 TBT 的最佳方法是对您的网站运行 Lighthouse 性能审核。如需了解使用详情，请参阅 Lighthouse 中有关 TBT 的文档。
虽然可以在实际环境中衡量 TBT，但我们不建议这样做，因为用户互动可能会以多种方式影响网页的 TBT，从而导致报告中出现很大的差异。如果您想了解单个 INP 互动之外的情况，我们建议您改用实际应用中的 Long Animations Frame API。
实验室工具
TBT 得分多少才算好？
为了提供良好的用户体验，网站应尽力在平均移动硬件上测试时将总阻塞时间控制在 200 毫秒以内。
如需详细了解网页的 TBT 如何影响 Lighthouse 性能得分，请参阅 Lighthouse 如何确定 TBT 得分
如何缩短 TBT
一般来说，我们建议优先优化 INP，而不是 TBT，因为我们建议在实验室内（通常无法准确衡量 INP）使用 TBT 作为 INP 的代理指标。因此，如需改进 TBT，请参阅我们关于优化 INP 的指南。
如果您专门关注 TBT，可以运行 Lighthouse 性能审核，并注意审核建议的任何具体机会。
一般来说，要提高网站的 TBT，需要减少阻塞脚本的数量，这意味着要么优化脚本以减少阻塞，要么减少脚本的总量。请参阅以下性能指南：