前端学堂
学有所用

“总阻塞时间”(TBT)

总阻塞时间(TBT)是衡量负载响应能力的重要实验室指标,因为它有助于量化页面在变得可靠交互之前的非交互性的严重程度-低TBT有助于确保页面 可用

什么是TBT?

“总阻塞时间”(TBT)度量标准度量了“首屏内容渲染(FCP)”“可交互时间”(TTI)之间的总 时间, 在该时间中,主线程被阻塞足够长的时间导致阻塞输入响应。

只要存在任务且该任务在主线程上运行超过50毫秒(ms),该主线程即被视为“阻塞”。我们说主线程“被阻止”是因为浏览器无法中断正在进行的任务。因此,如果用户确实在较长的任务中间与页面进行交互,则浏览器必须等待任务完成才能响应。

如果任务足够长(例如,超过50毫秒的任何时间),则用户很可能会注意到延迟,并感觉页面缓慢或过时。

给定的长任务的阻塞时间是其持续时间超过50毫秒。页面的总阻塞时间是FCP和TTI之间发生的每个长任务的阻塞时间之和。

例如,考虑页面加载期间浏览器主线程的下图:

上面的时间轴有五个任务,其中三个是长任务,因为它们的持续时间超过50毫秒。下图显示了每个长任务的阻塞时间:

因此,虽然在主线程上运行任务所花费的总时间为560毫秒,但只有345毫秒的时间被视为阻塞时间。

任务持续时间 任务阻止时间
任务一 250毫秒 200毫秒
任务二 90毫秒 40毫秒
任务三 35毫秒 0毫秒
任务四 30毫秒 0毫秒
任务五 155毫秒 105毫秒
总封锁时间 345毫秒

TBT与TTI有何关系?

TBT是TTI的一个很好的辅助指标,因为它有助于量化页面在变为可靠交互之前的非交互阻塞程度。

如果主线程至少有五秒钟没有执行长任务,则TTI认为页面“可靠地交互”。这意味着,在10秒内分布的三个51毫秒任务可以将TTI推迟到单个10秒长的任务,但是对于试图与页面进行交互的用户而言,这两种情况会感觉非常不同。

在第一种情况下,三个51毫秒的任务的TBT为3毫秒。而单个10秒长的任务的TBT为9950 ms。在第二种情况下,较大的TBT值量化了较差的体验。

如何衡量TBT 

TBT是应该在实验室中测量的指标。衡量TBT的最佳方法是在您的站点上运行Lighthouse性能审核。有关用法的详细信息,请参见TBT上Lighthouse文档

也可以通过监听longtask,在tti之前计算tbt时间。参考打造企业级私有前端监控体系课程中有介绍。

实验室工具

尽管可以在现场测量TBT,但不建议这样做,因为用户交互会以导致大量差异的方式影响页面的TBT。要了解该页面在现场的交互性,您应该测量“首次输入延迟”(FID)

良好的TBT分数是多少?

为了提供良好的用户体验,在一般的移动硬件上进行测试时,站点应努力使总阻止时间小于300毫秒

有关页面的TBT怎样影响您的Lighthouse性能得分的详细信息,请参阅Lighthouse如何确定您的TBT得分

如何提高TBT 

要了解如何提高特定站点的TBT,可以运行Lighthouse性能审核,并注意审核建议的任何特定 机会

要总体了解如何提高TBT(针对任何站点),请参考以下性能指南:

关联课程

赞(0) 打赏
未经允许不得转载:前端学堂 » “总阻塞时间”(TBT)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏