Skip to content
学习 衡量 博客 Case studies 关于
本页内容
  • TBT 测量什么
  • Lighthouse 如何确定您的 TBT 分数
  • 如何提高您的 TBT 分数
  • How to improve your overall Performance score

总阻塞时间

Oct 9, 2019 — 更新日期 Jun 4, 2021
Available in: Español, 日本語, 한국어, Português, Русский, English
Appears in: 性能审核
本页内容
  • TBT 测量什么
  • Lighthouse 如何确定您的 TBT 分数
  • 如何提高您的 TBT 分数
  • How to improve your overall Performance score

总阻塞时间 (TBT) 是 Lighthouse 报告的性能部分中跟踪的指标之一。每个指标都会捕获页面加载速度的某些方面。

Lighthouse 报告以毫秒为单位显示 TBT:

Lighthouse 总阻塞时间审计截图

TBT 测量什么 #

TBT 测量页面被阻止响应用户输入(例如鼠标点击、屏幕点击或按下键盘)的总时间。总和是首次内容绘制和互动时间之间所有长时间任务的阻塞部分之和。任何执行时间超过 50 毫秒的任务都是长任务。50 毫秒后的时间量是阻塞部分。例如,如果 Lighthouse 检测到一个 70 毫秒长的任务,则阻塞部分将为 20 毫秒。

Lighthouse 如何确定您的 TBT 分数 #

您的 TBT 分数是您的网页的 TBT 时间与在移动设备上加载时数百万个真实网站的 TBT 时间的比较。请参阅如何确定指标分数以了解如何设置 Lighthouse 分数阈值。

下表显示了如何解释您的 TBT 分数:

TBT 时间
(以毫秒为单位)
颜色编码
0–200绿色(快速)
200-600橙色(中等)
超过 600红色(慢)
See the Lighthouse performance scoring post to learn how your page's overall performance score is calculated.

如何提高您的 TBT 分数 #

请参阅是什么导致了我的长时间任务?了解如何使用 Chrome DevTools 的性能面板诊断长时间任务的根本原因。

一般来说,导致长时间任务的最常见原因是:

  • 不必要的 JavaScript 加载、解析或执行。在性能面板中分析您的代码时,您可能会发现主线程正在执行加载页面并不真正需要的工作。通过代码拆分减少 JavaScript 负载、删除未使用的代码或有效加载第三方 JavaScript 应该可以提高您的 TBT 分数。
  • 低效的 JavaScript 语句。例如,在性能面板中分析您的代码后,假设您看到对document.querySelectorAll('a')的调用返回 2000 个节点,则重构您的代码以使用仅返回 10 个节点的更具体的选择器,这样应该会提高您的 TBT 分数。
在大多数网站上,通常有很大的空间改进不必要的 JavaScript 加载、解析或执行。

How to improve your overall Performance score #

Unless you have a specific reason for focusing on a particular metric, it's usually better to focus on improving your overall Performance score.

Use the Opportunities section of your Lighthouse report to determine which improvements will have the most value for your page. The more significant the opportunity, the greater the effect it will have on your Performance score. For example, the Lighthouse screenshot below shows that eliminating render-blocking resources will yield the biggest improvement:

Lighthouse: Opportunities section

See the Performance audits landing page to learn how to address the opportunities identified in your Lighthouse report.

资源 #

  • 总阻塞时间审计的源代码
  • 长的 JavaScript 任务是否会延迟您的交互时间?
  • 优化首次输入延迟
  • 首次内容绘制
  • 互动时间
  • 通过代码拆分减少 JavaScript 负载
  • 删除未使用的代码
  • 高效加载第三方资源
Last updated: Jun 4, 2021 — Improve article
Return to all articles
分享
订阅

Contribute

  • 提交错误
  • 查看源代码

相关内容

  • developer.chrome.com
  • Chrome 动态
  • 网站开发基础
  • 案例研究
  • 播客
  • 节目

连接

  • Twitter
  • YouTube
  • Google Developers
  • Chrome
  • Firebase
  • Google Cloud Platform
  • 所有产品
  • 条款和隐私权
  • 社区准则

Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 4.0 License, and code samples are licensed under the Apache 2.0 License. For details, see the Google Developers Site Policies.