什么是总阻塞时间?
那么总阻塞时间是什么意思呢?该标准在某种程度上与用户与页面的交互有关。当主线程繁忙(即阻塞)时,FCP 和 TTI 之间的总时间称为总阻塞时间。我知道这有点困难。那么我们先一起来了解一下主线程的概念。 什么是总阻塞时间? GT 指标中的总阻塞时间 什么是主线程? 网站页面加载时,需要调用很多资源,页面背后会发生各种任务和操作。比如解析HTML和CSS文件、创建DOM(什么是DOM文章)、执行 JavaScript 文件等任务。用很简单的话来说,浏览器使用主线程来执行这些任务或用户请求(比如点击)。 为了更好地理解,一个很好的例子: 将主线程视为餐厅服务员。这位服务员的任务多种多样,例如接受订单、将订单送到厨房、将食物送到餐桌、清洁桌子等。现在,如果这位服务员的其中一项任务花费了太长时间,会发生什么情况?是的,它没有涉及其他重要的事情。因此,我们应该以这样的方式设计服务员(主线程)的任务:处理特定任务不会花费太多时间。 下面的例子会更好地帮助你: 现在,阻塞 伊朗电报数据 主线程意味着什么?每当主线程的一项任务花费超过 50 毫秒时,我们就说主线程被阻塞。现在,在 FCP 和 TTI 时间之间,我们计算主线程被阻塞的所有时间,并将它们加在一起得到 TBT 或总阻塞时间。 (我们在第 10 场讨论了 TTI 或交互时间) 什么是总阻塞时间? (图片来源) 上图明确表示要做4个任务,现在比如一个任务可以是读取一个JS文件,基本上JS文件会让TBT时间变长。现在,除了第二个任务,其余的任务,即一、三、四,花费了超过 50 毫秒,我们用红色标记它们。 TBT有什么影响? HTML页面分析 处理CSS文件 处理JS文件(这个最重要) 构建DOM 生成布局树 和 …。 TBT标准是新GTmetrix面向用户的标准之一。
https://verifiedbadgeswebsite.files.wordpress.com/2024/04/fhfghg.jpg?w=519
因为在这段时间(即主线程被阻塞的时候),用户的请求和输入都没有完成。例如,如果用户单击按钮,则不会发生任何事情。因此,用户认为我们的网站有问题并离开页面,造成糟糕的用户体验。 我认为这些统计数据是使用HTTP /2 的令人信服的理由。 使用被动侦听器提高滚动性能:此结构报告错误是 GTmetrix 和 Lighthouse 的新标准之一,并在最新版本的 Lighthouse(即 Lighthouse 6.0)中添加到此工具中。像 Chrome 这样的浏览器在初始页面加载期间和执行 JavaScript 之前不允许页面滚动。虽然这个问题削弱了用户体验。因此,在 Structure 菜单的这个标准中,GT Metrics 建议我们使用 Passive Listeners,这样用户就不会遇到这样的问题,并且可以在资源加载时滚动页面。 使用视频格式制作动画内容:虽然GIF格式看起来比 MP4 等视频格式小。
頁:
[1]