性能优化中的一个重要指标 TBT 总阻塞时间 Total Blocking Time-A5资源网

性能优化中的一个重要指标 TBT 总阻塞时间 Total Blocking Time

ご一剑?如固彡 2025-07-01 0 143 0 举报反馈

--正文开始--

Total Blocking Time（TBT，总阻塞时间）是前端性能优化中的一个重要指标，主要用于衡量网页在加载过程中，主线程被长任务（long tasks）阻塞的总时长。TBT 反映了用户在页面加载时的可交互性体验。

详细解释：

定义：TBT 是指从 First Contentful Paint（FCP，首次内容绘制）到 Time to Interactive（TTI，可交互时间）之间，主线程上所有超过 50 毫秒的任务中，超出 50 毫秒部分的总和。

计算方式：

找出 FCP 到 TTI 之间所有长任务（>50ms）。

对每个长任务，计算其耗时超过 50ms 的部分（即任务耗时 – 50ms）。

把所有长任务的超时部分加起来，就是 TBT。

举例说明：

假设在 FCP 到 TTI 之间有三个长任务，分别耗时 80ms、120ms、60ms。

第一个长任务阻塞时间：80-50=30ms

第二个长任务阻塞时间：120-50=70ms

第三个长任务阻塞时间：60-50=10ms

TBT = 30 + 70 + 10 = 110ms

为什么重要？

TBT 直接影响用户的交互体验。TBT 越高，用户在页面加载时点击、输入等操作的响应就越慢。优化 TBT 可以让页面更快变得可用和流畅。

优化建议：

拆分长任务，避免主线程长时间被占用。

使用 Web Worker 处理耗时计算。

懒加载非关键资源。

优化 JavaScript 执行效率。

相关指标：

FCP（首次内容绘制）

TTI（可交互时间）

LCP（最大内容绘制）

CLS（累积布局偏移）

点击查看更多...

提高网络安全意识,养成良好上网习惯，网络下载文件先扫描杀毒。不要随意点击不明邮件中的链接、图片、文件，适当设置找回密码的提示问题。当收到与个人信息和金钱相关(如中奖、集资等)的邮件时要提高警惕。不要轻易打开陌生人发送至手机的链接和文件。在微信、QQ等程序中关闭定位功能，仅在需要时开启蓝牙。安装手机安全防护软件，经常对手机系统进行扫描。不随意连接不明Wi-Fi、刷不明二维码。保证手机随身携带，建议手机支付客户端与手机绑定，开启实名认证。从官方网站下载手机支付客户端和网上商城应用。使用手机支付服务前，按要求在手机上安装专门用于安全防范的插件。登录手机支付应用、网上商城时，勿选择"记住密码"选项。通过网络购买商品时，仔细查看登录的网站域名是否正确，谨慎点击商家从即时通讯工具上发送的支付链接。谨慎对待手机上收到的中奖、积分兑换等信息，切勿轻易点击短信中附带的不明网址。资源收集自互联网，仅供用于学习和测试，请勿用于商业。资源如有侵权，请联系站长删除，敬请谅解！

正文结束：原文

本站高度重视知识产权保护，所有内容仅供学习与交流，严禁用于任何商业用途。
部分资料来源于互联网，仅作学习参考。若您认为本站内容侵犯了您的合法权益，请及时联系我们，我们将在第一时间核实并处理。

举报/联系邮箱：info@a5.org.cn