Total Blocking Time 总阻塞时间 (TBT)

2023-05-16

总阻塞时间 (TBT) 是测量加载响应度的重要实验室指标,因为该项指标有助于量化在页面交互性变为可靠前,不可交互程度的严重性,较低的 TBT 有助于确保页面的可用性。

什么是 TBT? #

总阻塞时间 (TBT) 指标测量First Contentful Paint 首次内容绘制 (FCP)与Time to Interactive 可交互时间 (TTI)之间的总时间,这期间,主线程被阻塞的时间过长,无法作出输入响应。

每当出现长任务(在主线程上运行超过 50 毫秒的任务)时,主线程都被视作"阻塞状态"。我们说主线程处于"阻塞状态"是因为浏览器无法中断正在进行的任务。因此,如果用户在某个长任务运行期间与页面进行交互,那么浏览器必须等到任务完成后才能作出响应。

如果任务时长足够长(例如超过 50 毫秒),那么用户很可能会注意到延迟,并认为页面缓慢或卡顿。

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

例如,请看以下这张页面加载期间浏览器主线程的图表:

 

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

 

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

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

TBT 与 TTI 有什么关系? #

TBT 是 TTI 的一个出色的配套指标,因为 TBT 有助于量化在页面交互性变为可靠前,不可交互程度的严重性。

TTI 会在主线程至少有五秒钟没有长任务时,认为页面具备"可靠交互性"。也就是说,分布在 10 秒钟里的三个 51 毫秒长的任务与单个 10 秒长的任务对 TTI 的影响是相同的,但对于试图与页面进行交互的用户来说,这两种情况给人的感觉是截然不同的。

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

如何测量 TBT #

TBT 指标应该在实验室中进行测量。测量 TBT的最佳方法是在您的网站上运行一次灯塔性能审计。有关使用详情,请参阅灯塔中关于 TBT 的说明文档。

实验室工具 #

  • Chrome 开发者工具
  • 灯塔
  • WebPageTest 网页性能测试工具

虽然 TBT 可以在实际情况下进行测量,但我们不建议这样做,因为用户交互会影响您网页的 TBT,从而导致您的报告中出现大量差异。如需了解页面在实际情况中的交互性,您应该测量First Input Delay 首次输入延迟 (FID) 。

怎样算是良好的 TBT 分数? #

为了提供良好的用户体验,网站在普通移动硬件上进行测试时,应该努力将总阻塞时间控制在300 毫秒以内。

有关页面 TBT 对灯塔性能分数影响的详细信息,请参阅灯塔如何确定您的 TBT 分数

如何改进 TBT #

如需了解如何改进某个特定网站的 TBT,您可以运行一次灯塔性能审计,并留心查看审计建议的各种具体机会。

如需了解改进 TBT 的常见方式(针对任何网站),请参阅以下性能指南:

  • 减少第三方代码的影响
  • 减少 JavaScript 执行时间
  • 最小化主线程工作
  • 保持较低的请求数和较小的传输大小

Total Blocking Time (TBT)This post introduces the Total Blocking Time (TBT) metric and explains how to measure it https://web.dev/tbt/?utm_source=devtools

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

Total Blocking Time 总阻塞时间 (TBT) 的相关文章

  • 时间格式说明(Google Directions API)

    我已阅读用于提出方向请求的 Google Directions API 文档 URL 的示例如下 http maps googleapis com maps api directions json origin Brooklyn desti
  • Unix 时间戳到 FAT 时间戳

    我正在尝试将时间结构转换为 FAT 时间戳 我的代码如下所示 unsigned long Fat tm struct pTime unsigned long FatTime 0 FatTime pTime seconds 2 gt gt 1
  • 在 Julia 中,有没有办法让“现在”(至少)达到毫秒精度?

    通常 要了解代码中发生的情况 您需要高精度时间来分析您的应用程序或出于其他原因 显然 现在 https stackoverflow com questions 32407509 how to get the milliseconds fro
  • 当夏令时开始/结束时,自纪元以来的毫秒数会发生什么?

    自纪元以来的毫秒数表示自 1970 年以来经过的毫秒数 在夏令时结束之前的那一刻 或者当我们将时钟从 2 00 设置回 1 00 时 自纪元以来的毫秒数也会回退 或者他们继续吗 另一个问题 如果我住在美国加利福尼亚州 采用太平洋 夏令 标准
  • 将正在运行的计数显示计时器添加到 iOS 应用程序中,例如时钟秒表?

    我正在使用一个应用程序 该应用程序可以处理设备运动事件并以 5 秒的增量更新界面 我想向应用程序添加一个指示器 以显示应用程序运行的总时间 看起来像秒表的计数器 例如本机 iOS 时钟应用程序 是计算应用程序运行时间并将其显示给用户的合理方
  • 如何找到与日期范围最重叠的时间段

    假设您有一个包含标识符 开始时间和结束时间的表 这些开始和结束时间可以是任意时间长度 开始时间始终早于结束时间 假设没有空值 什么样的查询会告诉我最 流行 的时间 即每行中的两个范围与大多数其他行重叠的位置 它的实际应用是它是一个记录用户登
  • 如何在 Microsoft Excel 中获取两个日期之间的分钟差?

    我正在 Excel 中做一些工作 遇到了一些问题 我正在使用的仪器保存测量的日期和时间 我可以使用以下格式将此数据读入 Excel A B 1 Date Time 2 12 11 12 2 36 25 3 12 12 12 1 46 14
  • setTimeout 调用期间超出最大调用堆栈大小

    我试图每 4 秒调用一次我的函数 这样它就会实时增加一个数字 由于某种原因 我不断收到错误 这是我的代码
  • 如何使用 Haskell 中的 thyme 库从 Int 值创建 UTCTime?

    我有年 月 日 小时和分钟值 所有这些都是类型Int 我怎样才能将它们转换为UTCTime or UniversalTime 需要导入以下内容 import Control Lens import Data Thyme Clock impo
  • 验证随时间变化的连续条件

    我想开发一个Python程序 从某个时刻开始 等待60秒再执行操作 该程序必须具有的另一个功能是 如果我更新初始时间 它必须开始检查条件 我想过用线程来做 但我不知道如何停止线程并以新的开始时间重新启动它 import thread imp
  • 计时器显示负的已用时间

    我正在使用一个非常简单的代码来计算每个循环的时间for陈述 它看起来像这样 import time for item in list of files Start timing this loop start time clock Do a
  • 什么时候 Thread.sleep(1000) 睡眠时间少于 1000 毫秒?

    在这篇有趣的文章中程序员对时间的看法是错误的 http infiniteundo com post 25509354022 more falsehoods programmers believe about time wisdom 其中之一
  • 使用 Javascript 和 Mongodb 对时间序列数据重新采样

    时间序列数据的数据集需要从具有不规则时间间隔的数据集转换为规则时间序列 可能使用插值和重采样 蟒蛇的pandas Dataframe resample http pandas pydata org pandas docs stable ge
  • 如何确定算法函数的复杂度?

    您如何知道算法函数对于特定操作是否需要线性 常数 对数时间 它取决于CPU周期吗 您可以通过三种方式 至少 做到这一点 在网上查找算法 看看它是如何描述其时间复杂度的 根据输入大小 自己检查算法 查看嵌套循环和递归条件等内容 以及每个循环运
  • 从 varchar(100) 类型获取时间(HH:MM AM/PM)格式

    如何将字符串 RD OT 07 30 转换为时间 我只知道如何将 07 30 AM 转换为时间 下面的代码给了我一个空白数据 id strtoupper POST id query mysql query SELECT STR TO DAT
  • 为什么 System.nanoTime() 比 System.currentTimeMillis() 慢(性能)?

    今天我做了一个快速基准测试来测试速度性能System nanoTime and System currentTimeMillis long startTime System nanoTime for int i 0 i lt 1000000
  • PHP 中的 NOW() 函数

    是否有 PHP 函数以与 MySQL 函数相同的格式返回日期和时间NOW 我知道如何使用date 但我想问是否有专门用于此的功能 例如 返回 2009 12 01 00 00 00 您可以使用date https www php net m
  • R 中按时间划分的平均值

    我每秒测量一次化合物浓度 我想求 30 秒和 60 秒的平均值 我一直在阅读这里的帖子 我尝试过lubridate and dplyr 但没有运气 我正在努力完成这项工作 但我一直没能做到 我正在从 SAS 过渡到 R 所以请耐心等待 这是
  • `SystemTime::now` 是否受夏令时影响?

    在时间 T 我调用SystemTime now duration since UNIX EPOCH 在时间 T 10 当夏令时开始时 我调用相同的调用 我可以预期这两个实例之间会出现任何奇怪的行为吗 SystemTime本身完全独立于时区
  • Android 中 localTime 和 localDate 的替代类有哪些? [复制]

    这个问题在这里已经有答案了 我想使用从 android API 获得的长值 该值将日期返回为长值 表示为自纪元以来的毫秒数 我需要使用像 isBefore plusDays isAfter 这样的方法 Cursor managedCurso

随机推荐

  • Java Runtime (class file version 61.0), this version of the Java Runtime only recognizes class file

    maven打包报错 org springframework boot maven BuildInfoMojo hasbeen copiled by a more recent version of the Java Runtime clas
  • 前端JS接收服务端的二进制文件流实现文件下载

    前端JS接收服务端的二进制文件流实现文件下载 var binaryData 61 binaryData push res 改成Boole或者file类型 const url 61 window URL createObjectURL new
  • debian10ssh配置用户限制,日志等

    需求 xff1a 工作端口为2021 xff1b 只允许用户user01 xff0c 密码ChinaSkill21登录到router 其他用户 xff08 包括root xff09 不能登录 xff0c 创建一个新用户 xff0c 新用户可
  • CentOS搭建PySpider爬虫服务

    1 环境准备 前置环境部署 在开始部署前 xff0c 我们需要做一些前置准备 yum 更新 yum span class hljs operator span class hljs keyword update span y span 安装
  • openGauss5.0企业版CentOS单节点安装

    目录 一 安装环境 二 前置依赖包 三 安装前准备1 四 安装前准备2 五 安装 一 安装环境 CPU xff1a 2核 内存 xff1a 4G 磁盘 xff1a 20G 操作系统 xff1a CentOS 7 9 python版本 xff
  • SpringBoot+PageHelper+Bootstrap+Thymeleaf 实现分页功能

    本文针对那种想要快速实现功能 xff0c 而不是研究原理的 xff0c 那你就直接复制我的东西 xff0c 运行就好 如果想深入学习的同学请另行百度 第一种 Spring Boot 43 Thymeleaf 使用PageHelper实现分页
  • Idea集成使用SVN教程

    idea 从项目窗口跳到打开项目选项窗口 操作之后即可跳到如下界面 第一步 下载svn的客户端 xff0c 通俗一点来说就是小乌龟啦 xff01 官网下载地址 xff1a Downloads TortoiseSVN 下载之后直接安装就好了
  • IntelliJ IDEA 下的svn配置及使用的非常详细的图文总结

    IntelliJ IDEA 下的svn配置及使用的非常详细的图文总结 请叫我大师兄 CSDN博客 ideasvn配置 https blog csdn net qq 27093465 article details 74898489 首先 x
  • webpack 错误

    1 ERROR in src main css Module build failed from node modules mini css extract plugin dist loader js ReferenceError docu
  • 客户端js 读取 json 数据

    采用 XMLHttpRequest 读取 1 new 初始化 XMLHttpRequest 2 open 设置请求方式 xff0c 地址 3 send 发起请求 4 onload 请求成功 xff0c 返回结果 代码 xff1a lt DO
  • dataTable的中文文档

    DataTables Table plug in for jQuery https datatables net 用google 打开 xff0c 直接翻译 参考 选项 DataTables 及其扩展是极其可配置的库 xff0c 它们对 H
  • nodejs核心API

    1 Buffer对象 不需要引入 Bufferd对象用途 以二进制流进行数据的传送传递 1 三种创建方式 类似于数组的创建 用16进制存储 let buf1 61 Buffer alloc 20 13 console log buf1 lt
  • mysql select, from ,join ,on ,where groupby,having ,order by limit的执行顺序和书写顺序

    mysql select xff0c from xff0c join xff0c on xff0c where groupby having order by limit的执行顺序和书写顺序 关键字或 解释执行顺序select 查询列表 x
  • jQuery对checkbox的各种操作

    注意 xff1a 操作checkbox的checked disabled属性时jquery1 6以前版本用attr 1 6以上 xff08 包含 xff09 建议用prop 1 根据id获取checkbox 34 cbCheckbox1 3
  • dom 操作排他思路

    1 遍历所有 xff0c 操作 xff0c 对具体的重新操作 实现点击一个按钮就把背景颜色改为pink颜色 lt DOCTYPE html gt lt html lang 61 34 en 34 gt lt head gt lt meta
  • web前端兼容

    兼容性 xff1a Compatibility overview https www quirksmode org compatibility html 当前测试 CSS所有 CSS 选择器和声明 xff08 最终 xff09 DOM所有
  • 使用跨域资源共享的 DOM 访问控制

    Dev Opera DOM Access Control Using Cross Origin Resource Sharing https dev opera com articles dom access control using c
  • react-typescript 错误

    64 types jsurl index d ts 39 is not a module npm i jsurl 安装错误 xff0c 因为 typescript无法用此方法安装 xff0c 卸载干净 1 增加types目录 新建jsurl
  • react-router-dom错误

    index tsx 24 Uncaught Error useLocation may be used only in the context of a lt Router gt component at invariant index t
  • Total Blocking Time 总阻塞时间 (TBT)

    总阻塞时间 TBT 是测量加载响应度的重要实验室指标 xff0c 因为该项指标有助于量化在页面交互性变为可靠前 xff0c 不可交互程度的严重性 xff0c 较低的 TBT 有助于确保页面的可用性 什么是 TBT xff1f 总阻塞时间 T