什么是总阻塞时间？

mdasaduzzaman17

那么总阻塞时间是什么意思呢？该标准在某种程度上与用户与页面的交互有关。当主线程繁忙（即阻塞）时，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面向用户的标准之一。




因为在这段时间（即主线程被阻塞的时候），用户的请求和输入都没有完成。例如，如果用户单击按钮，则不会发生任何事情。因此，用户认为我们的网站有问题并离开页面，造成糟糕的用户体验。 我认为这些统计数据是使用HTTP /2 的令人信服的理由。 使用被动侦听器提高滚动性能：此结构报告错误是 GTmetrix 和 Lighthouse 的新标准之一，并在最新版本的 Lighthouse（即 Lighthouse 6.0）中添加到此工具中。像 Chrome 这样的浏览器在初始页面加载期间和执行 JavaScript 之前不允许页面滚动。虽然这个问题削弱了用户体验。因此，在 Structure 菜单的这个标准中，GT Metrics 建议我们使用 Passive Listeners，这样用户就不会遇到这样的问题，并且可以在资源加载时滚动页面。 使用视频格式制作动画内容：虽然GIF格式看起来比 MP4 等视频格式小。