Web 性能入门指南-3.5 优化单页应用程序 (SPA)

🌸 欢迎来到前端后花园！这里是一个温馨的小角落，专为热爱前端技术的你打造。没有华丽的辞藻，只有真诚的分享。希望你能在这里找到实用的内容，学到新知识，同时也欢迎你畅所欲言，分享你的思考和见解。
Web 性能入门指南专栏：我们将一起探讨如何提升网站的性能，从监控到分析，再到诊断和优化，每一步都力求实用、有效。让我们一起努力，让每一个网页都能以最佳状态展现在用户面前。🌱💻

单页应用程序 (SPA) 具有独特的页面速度优化挑战。让我们来看看 SPA 的一些常见 Web 性能问题，以及如何优化它们。

传统网页（有时称为多页应用程序或 MPA）通过允许用户导航到不同的页面来工作，而单页应用程序 (SPA) 则通过使用 JavaScript 在应用程序的不同部分之间执行页内转换来工作。

关键区别在于，在 MPA 中，浏览器在每个页面之间执行完整导航。在 SPA 中，应用程序负责加载新内容并将其显示在页面上。

因此，SPA 通常要求用户在初始页面加载时下载更多 JavaScript。它们不仅需要当前页面的 JavaScript，还需要处理页面间转换的 JavaScript。

减少页面上的 JavaScript 数量

在网页的所有资源类型中，JavaScript 对页面性能的影响是最大的。减少页面上的 JavaScript 数量可以改善几乎所有页面速度指标，包括最大内容绘制 (LCP)、下一次绘制交互 (INP) 和总阻塞时间 (TBT)。

大多数性能工具都认识到了这一点。例如，当 JavaScript 执行时间超过 2 秒时，Lighthouse 会发出警告，而当 JavaScript 执行时间超过 3.5 秒时，审核失败。

有多种方法可以减少页面上的 JavaScript 数量：

• 代码分割 JavaScript以仅发送用户需要的内容。

• 缩小 JavaScript并压缩 HTTP 响应以减少总负载大小。

• 删除未使用的 JavaScript以减少有效负载大小以及编译、解析和执行时间。

尽可能在服务器上呈现页面内容

通过在服务器上渲染尽可能多的内容，可以改善 SPA 中的“最大内容绘制”等指标。这样，浏览器就可以在后台加载 SPA 的 JavaScript 时向用户显示他们正在寻找的内容。

预加载用户可能需要的资源

当浏览器必须下载新资源时，SPA 中的页面转换可能会很慢。您可以通过智能地预加载用户可能很快需要的资源来缓解这种情况。例如，您可以在用户将鼠标悬停在链接或按钮上时开始加载资源，而不是等到他们点击它。