vlambda博客
学习文章列表

加快网站速度的技术

下列两个选项中，人们更愿意谈论哪一个？ 

• 网站加载速度快，交互时间 (TTI) 低，用户可以轻松完成网站上的任务。 

• 一个网站需要永远加载，用户已经忘记了他们为什么访问该网站，他们发誓永远不会再次打开网站。

第二个可能是一个更有趣的故事——但它也是一种令人难以置信的令人沮丧的用户体验。用户不仅会尽可能避免返回该网站，而且还会警告他们的朋友不要访问网站。 

作为网站开发人员，您面临的最大挑战是确保您的网站必须立即向用户展示所有信息。优化图像是提高页面加载速度的一种方法，但止步于此还不够。您还必须深入研究您的代码并优化您的 JavaScript代码。在本指南中，我们将向您展示如何操作。

为什么你应该优化你的 JavaScript

先来看看：没有添加任何元素或没有代码的空白网站默认是最快的，性能得分为 100/100。但是我们很多人不想要一个空白网站。我们希望为用户创建一个复杂、非凡的网站并具有丰富的交互体验。所有这些添加的资产（assets）都会占用用户的资源，包括CPU 和 GPU，内存和网络。

但是，当您开始向站点添加元素时，您会看到对性能的影响。每个第三方脚本，包括A/B Testing到分析再到小部件，再加上本身的第一方代码，都会增加性能成本。（如果我们在Builder.io网站上完全以其默认状态使用聊天机器人小部件，我们将失去 50 个性能点！） 

从中得出的一个结论是，代码越精简轻便，运行速度越快。但是添加的未优化的 JavaScript 越多，性能就越低。沉重、缓慢的网页需要超过 14 秒才能进行页面交互。这就是为什么优化JavaScript很重要：研究表明10 秒是用户集中注意力的极限。 

未优化 JavaScript代码 的成本 

我们将几个顶级网站放入我们的Performance Insights工具（可以免费试用！），绝大多数情况下，优化 JavaScript 使性能得分提高了 50 多分。JavaScript 是网站速度慢的罪魁祸首，优化 JavaScript 势必会影响网站加载速度。

没有针对页面加载进行优化的网站将失去：

用户体验。如果要确保良好的用户体验，JavaScript 优化是绝对不能跳过的一步。缓慢的网站会导致糟糕的体验，从而使用户离开。根据谷歌的说法，如果您希望用户在网站上停留更长时间，您的页面应该在 3 秒内加载。如果您的页面加载时间从 1 秒增加到 3 秒，则用户跳出的概率为 32%。

转换。糟糕的网站性能对转化有直接影响。尤其是当用户在他们的移动设备上访问网站时，提升网站性能从未像现在这样重要。页面加载时间每延迟一秒，转化率就会下降 20% 。

这对于零售和电子商务网站来说变得更加重要，因为用户在网站上的体验会导致花费更多的时间，这甚至可能导致花费更多的钱。换句话说，优化网站加载速度对收入有直接影响。德勤表示，仅 0.1 秒的网站速度提升就可带来平均8% 的转化率和9% 的零售订单增长。

搜索引擎优化。影响 SEO 的因素有很多，网站性能是关键因素之一。您网站的性能会影响其在搜索结果中的排名，从而影响其获得的自然流量。网站51% 的自然流量来自在线搜索。更重要的是，平均超过 40% 的收入来自自然搜索，而91.5% 的搜索者在首页就关闭网站。 

如何优化 JavaScript

无论设备、网速或浏览器性能如何，一个完全优化的网站都能快速加载并运行良好。以下是被广泛好评的优化实例。

减少代码中的 JavaScript

当JavaScript处理过多字节时，您的页面加载时间会更长——当您的用户网络速度较慢时，这种情况会变得更糟。 

为了最大限度地降低这些与网络相关的性能成本，开发人员可以 

• 仅通过代码拆分发送用户需要的代码，以区分哪些是关键的，哪些不是，以及延迟加载非渲染关键的组件。

• 缩小 JavaScript

• 使用 gzip 压缩 JavaScript

• 删除未使用的代码

• HTTP 缓存、Service Worker 缓存和长期缓存以减少加载时间。

  

这还涉及延迟加载初始页面加载不需要的元素。例如，可以首先加载首屏组件，并且可以减低非首屏组件的优先级，直到用户滚动页面。拥有正确的加载顺序对于最大限度地减少操作次数至关重要，并且对用户关注度有直接影响。

降低解析/编译和执行 JavaScript 的成本

正如 Tom Dale 所说，相比同等大小的图像或 Web 字体，浏览器处理 JavaScript需要更长时间。虽然处理大型、未优化的图像仍然会花费一定成本，但它不会妨碍主线程或阻止界面进行交互。然而，JavaScript 会对页面的交互性产生负面影响。

就像我之前说的，平均网页需要 14 秒才能进行交互。其中 4 秒用于简单地解析和编译 JavaScript，这大大延迟了用户与网站交互。并非所有用户都拥有出色的网络速度和快速的高端移动设备。拥有良好网络连接的用户可能没有高性能手机，反之亦然。普通手机解析和编译代码的时间是市场上最快的手机的 2-5 倍。获取和处理 JavaScript 和其他资源也需要时间，这意味着用户可能需要等待一段时间才能进行页面交互。

为了降低成本，删除页面中所有非关键 JavaScript 至关重要。这有助于减少传输时间、CPU 密集型解析/编译以及潜在的内存开销。这也有助于页面更快地进行交互。另一个很好的解决方案是使用web workers。Web workers允许您在后台线程中执行处理器密集型任务，因此您的主线程保持畅通。

在解析/编译代码之后，就该执行了。主线程执行，将花费更多宝贵时间。由于主线程被阻塞，站点在下载、解析/编译和运行代码的整个过程中无响应。减少解析时间的一种方法是将代码拆分为小块以便更快地执行。另一个推荐的做法是在 HTML 中内联 JavaScript，这可以显著加快页面加载速度。但是，过多的 JavaScript 会使 HTML 文件变得太大。 

为什么您应该考虑使用自动化解决方案来优化 JavaScript

与上面探讨的相比，还有更多传统的优化方法。优化代码时，您必须确保只优化关键且影响很大的部分代码，以避免在优化非关键组件上浪费时间和资源。这可以通过对整体性能的影响来衡量。手动执行此操作既复杂又耗时。

不仅如此，优化的 JavaScript 使代码更加复杂，并显著降低了可读性。换句话说，阅读、维护和调试优化的代码更加困难。最大的挑战是在可读性和优化之间保持微妙的平衡。

但即使有这些缺点，优化 JavaScript 仍然至关重要。这就是更新的自动化解决方案发挥重要作用的地方。 

优化第一方 JavaScript 以获得最佳性能

最终，使用较小的函数和可重用代码编写好的、干净的 JavaScript 代码是最有效的解决方案，但说起来容易做起来难。另外，像 React 这样的JavaScript 框架在性能方面消耗昂贵成本。

降低这些性能成本的最佳方法是从代码中删除尽可能多的 JavaScript。 

解决方案

这些解决方案按影响的升序排列，减少了代码中的 JavaScript。

⭐️ 有效：Astro

Astro是一个免费的开源静态站点构建器，可让您使用您最喜欢的 JavaScript Web 框架（React、Svelte、Vue 等）的 UI 组件来构建站点。Astro 在构建过程中将您的整个网站呈现为静态 HTML，从而生成一个完全静态的网站，最终页面删除了所有 JavaScript代码。当一个组件确实需要一些客户端 JavaScript（例如，图像轮播）时，Astro 只加载那个组件（以及任何依赖项），而将站点的其余部分保留为静态的、轻量级的 HTML。虽然 Astro 简单且易于迁移，但它并不是更复杂应用程序的最佳解决方案。

⭐⭐更有效：Marko 

Marko是一个 UI 库，它使用高级编译技术来减少您需要在网站上加载的 JavaScript 数量。它是一种声明性的、基于 HTML 的语言，具有渐进式渲染、部分水合（hydration）、优化编译器和缩短的执行时间。一旦针对服务器和浏览器进行了优化，它就允许您编写代码。虽然它比 Astro 更有效，但它并没有完全从您的代码中删除 JavaScript代码。

⭐️ ⭐️ ⭐️ 最有效：Qwik

Qwik从首页面加载中删除所有 JavaScript，仅在需要时才延迟加载。与其他高级 Web 框架非常相似，Qwik 渲染组件树，从而形成交互式应用程序。Qwik 的目标是只下载和执行最少的应用程序。其主要策略包括尽可能延迟Javascript的执行和下载，以及在服务器端序列化应用程序和框架的执行状态并在客户端恢复。它是开源的，由 Builder 维护。

删除第三方脚本的性能问题

像pixel trackers、 A/B testing、广告、小部件、CDN 等第三方脚本是导致页面加载时间变慢的最大因素。第三方脚本，即嵌入网站的代码，会与其他代码争夺浏览器的主线程，从而延迟内容呈现。 

根据GoogleWeb Fundamentals，第三方脚本可能会导致几个问题，包括：

• 产生过多对多个服务器的网络请求 

• 发送过多的 JavaScript 代码

• 资源密集型脚本解析和执行 

• HTTP     缓存不足

• 服务器资源压缩不足

• 阻止内容显示，直到完成JS代码处理

• 使用已知对用户体验有害的遗留 API（例如document.write()     ）

• 过多的 DOM 元素或庞大的 CSS 选择器

这些第三方脚本对电子商务网站和在线商城的业务运行来说尤其重要。

解决方案：Partytown

Partytown是一个轻量级的开源解决方案，通过将第三方脚本卸载到在后台线程中运行的 Web Worker 来减少由于第三方 JavaScript 导致的执行延迟。这释放了浏览器的主线程来运行您自己的代码。它由Builder.io维护，目前处于测试阶段。 

为开发人员和非开发人员简化 JavaScript 优化

仅使用 Qwik 和 Partytown 等解决方案，您就可以解决很多问题。然而，像Partytown 这样的解决方案最适合后端脚本，并且不是为个性化、A/B 测试、构建弹出窗口和登录页面等渲染关键脚本而构建的，同时仍将 JavaScript 保持在最低限度。众所周知，一些渲染关键脚本如果做得不好，会破坏 JavaScript 框架并变得难以调试。这些脚本需要立即从 CDN 提供。但是，将所有这些直接插入浏览器的大量 JavaScript 工具分层会导致网站速度缓慢，并且用户在看到网站并与网站交互之前要等待大量内容加载。

使用 API 驱动的开发密集型解决方案，总是存在开发人员依赖的压力。想象一下长达数月的积压工作，网站的每一次更新都需要开发人员进行手写代码。对于希望只需单击几下即可更改网站的开发人员和非开发人员来说，这可能非常耗时且令人沮丧。

Builder.io 等可组合的、API 驱动的工具使用最佳方法自动化编码。Builder 将性能、JavaScript 优化等方面的高标准作为默认设置，同时仍保持其简单性和易用性，为开发人员和非开发人员提供良好的服务。Builder 还积极拆分代码并确保在加载页面或组件时仅包含绝对需要的 Javascript。Builder 提供压缩、压缩和去重的 Javascript，与上面列出的其他一些解决方案类似，可以将内容作为非常轻量级的 HTML 交付，并延迟加载任何额外的 JavaScript 用于在初始加载后水合的交互式元素。