Skip to content

「译」是什么使网络慢?浏览器的瓶颈

Posted on:2022-04-19 13:40

原作者:  Medhat Dawoud
原文链接:https://medhatdawoud.net/blog/what-makes-the-web-slow

在上一篇文章中我解决了性能优化背后的动机。在这篇文章中,我将简要解释 web 是如何工作的,并解释 web 缓慢背后的核心原因,特别是浏览器的主线程。

Web是如何工作的

首先,我们需要了解从在浏览器中编写域名开始,直到拥有一个完全交互的网页,Web是如何工作的。

网站通常托管在具有 IP 地址 (x:x:x:x) 的服务器上,该 IP 地址附加到名为域的名称,例如example.com,因此当用户在浏览器中的地址栏,然后按回车键,这是短暂发生的事情:

上述所有这些过程通常需要几秒钟,因此您大多数时候都不会真正注意到它。但可能需要更多时间,具体取决于您对过程中各个方面的实施和理解,当然还有客户端的硬件。

从上面的场景中,我们有 3 个主要角色可能在互联网的缓慢中发挥作用:

网站速度慢的核心原因

上述所有原因都是由于浏览器的工作方式以及客户端和服务器的硬件造成的,在这篇文章中,我更多的是解释为什么 Web 浏览器很慢,并且需要一些理解来使浏览器快速,或者至少对Web用户能觉得更快。现在让我解释一下。

浏览器是单线程的

自从 Web 浏览器诞生以来,它们只有一个主线程,这使得浏览器“理论上”一次只能做一件事,要么渲染 HTML,要么基于 CSS 绘制 UI,要么解码和绘制图像,要么编译和运行 JavaScript。 其中的每一项任务都需要从主线程花费一些时间,这是慢速网站的主要问题,有一些长任务会长时间阻塞主线程,而不会让其他等待任务甚至部分执行。

为了减轻可能有点棘手的主线程上的任务负载,一种解决方案可能是将任务拆分为较小的可执行任务,这将使主线程能够在所有任务之间切换,并使网站感觉流畅和功能齐全 时间

您可能想知道,如果它只有一个,为什么我们称它为主线程? 这是一个好问题,因为您基本上可以使用 Web Worker 将一些繁重的工作从它转移到其他一些并行线程(您创建),并且可以使用一些浏览器 API 或使用一些使生活更轻松的库将它们连接在一起 工人,例如 chrome 团队的 comlink,我们可以在另一篇文章中详细说明。

文件类型影响渲染时间吗?

那当然!相同大小的不同文件可以在相同的网络条件下同时下载,但这里的重点是下载后是什么,浏览器如何处理呢? 所以在下面的例子中,我们有 2 个文件,一个是 170kb 的 JavaScript,另一个是相同大小的图像。

正如你所看到的图像,下载之后,然后解码并最终绘制,基于慢速 3G 和 Moto G4 移动(中间层)的测试,下载时间大约需要 3.4 秒,解码约 64 毫秒,最后约 28 毫秒 被光栅化绘制。

另一方面,JavaScript 文件需要同样多的时间来下载 3.4 秒,然后它进入解析/编译过程,需要大约 2 秒,最后是执行,需要大约 1.5 秒,这两个文件之间有多么大的差异 。所以我们发现 JavaScript 是您网站中最重的资产,它不仅与文件大小有关。

长任务的问题

不幸的是,一个主线程在一个任务中启动它不能被中断,如果我们阻塞它太久用户会觉得网站有点滞后,大多数屏幕都以 60fps 运行,这意味着浏览器应该每帧绘制一个新的帧~ 16 毫秒。

这就是为什么浏览器将任何超过 50 毫秒的任务视为一个长任务,它会下降大约 3 帧或更多帧,用户可能会注意到渲染速度很慢,这通常会带来糟糕的用户体验和更多等待用户输入响应的时间。

我们可以做些什么来增强主线程?

由于主线程是(网络)浏览器的瓶颈,我们可以减轻它的负担吗? 或者至少使它具有某种性能,一个快速的答案是肯定的,我们可以通过以下方式使主线程具有性能:

并且还可以应用更多的优化,一般尽量让主线程尽快空闲。

结束语

在本文中,我们讨论了 Web 的工作原理以及网站运行缓慢的原因,重点介绍了浏览器单线程的主要原因,讨论了文件类型的影响以及 JS 文件与图像相比如何花费更长的时间来处理 相同的文件大小,最后一些快速的想法来减轻主线程的压力。