优化前端数据加载性能的 9 个最佳实践-技术圈

☝点击上方蓝字关注我们，无用的注释比没有注释更糟糕

有研究表明，用户在 50 毫秒^[1] 的时间内就会对访问网站形成第一印象。也就是用户只需 50 毫秒就可以决定出他们是留下还是离开。

由于前端优化不佳，大多数网站无法提供令人满意的用户体验。其中最常见的原因是资源加载和图像优化不理想。因此，在本文中，我将讨论九个有助于优化前端资源加载的最佳实践。

1. 压缩 (Minify) 代码

压缩代码是指从 HTML、CSS 和 JavaScript 中删除不需要加载的不必要的冗余数据。这包括消除代码注释和格式、空白字符、未使用的代码、换行符等。

❝
缩小 HTML、CSS 和 JavaScript 能有效减少前端加载时间，因为它减少了需要从服务器请求的代码量。
❞

下面是一些压缩代码资源相关的工具：

HTML：PageSpeed Insights^[2]，HTML Minifier^[3]。
CSS：cssmin.js^[4], Coverage tool in Chrome Dev Tools^[5], YUI Compressor^[6].
JavaScript：JSMin^[7], Coverage tool in Chrome Dev Tools^[8]

2. 减少 HTTP 请求

通常，一个完整的 HTTP 请求需要经历 DNS 查找，TCP 握手，浏览器发出 HTTP 请求，服务器接收请求，服务器处理请求并发回响应，浏览器接收响应等过程。你的前端的 http 请求越多，相应的所需的花费时间就越多。但是其中真正的加载数据时间所占的百分比相当小，其余大部分时间都一次次用来用来查找以及与服务器通讯了。你可以采用多种方法来减少网站的 http 请求数。

使用 CSS Sprites 这是减少服务器调用次数的最简单方法之一。sprite 我们不再将多个图像单独加载到站点，而是加载一个使用图像集合组合的单个图像文件。你可以使用 CSS 中的 background-image 和 background-position 属性来展示所需的图像片段。通过这样做，你可以减少所需的服务器请求数量。
减少使用不可控的发出大量外部请求的第三方插件。
防止使用指向不存在的文件的无用链接。

除此之外，现如今 SPA 应用十分多，在单页面应用中我们还可以启用服务器端渲染以加快应用程序的首屏加载。往往首屏的加载速度是对用用户感知影响巨大的。

3. 删除不必要的自定义字体

自定义字体已经变得非常流行，因为它有助于为网站添加个性化。但是，它们也以性能为代价。

自定义字体的大小可能非常大（中文字体则会相当巨大！），并且诸如 Google 字体之类的 Web 字体会将 HTTP 请求添加到外部资源。这会增加页面的加载渲染的速度。

以下是你必须在网站中使用字体时可以采取的一些优化操作：

将字体转换为最有效的格式：加载像 WOFF2 这样的现代格式可以比其他格式减少约 30% 的文件大小。
使用字体子集，删除字体集中未使用的字符：一个大而全的字体文件中包含许多可能永远不会使用的语言的字符。通过字体子集，我们可以从字体中删除不需要的字符，只保留我们在网站上编写内容所需的内容。
预加载页面中使用的字体。

对于网站使用自定义字体时，我们需要在性能与美观中不断权衡与评估。加载字体文件真的很慢。

4. 压缩文件

带宽量限制了在给定时间内传递的数据量，就像一个水管。文件越大，加载时间越长。现代网站通常具有大量 HTML、CSS 和 JavaScript 以及图片等资源。

通过使用合适的方法压缩文件，你可以轻松地对缩短文件加载时间。以下是你可以使用的的两个很好的文件压缩选项：

Gzip 流行的数据压缩和解压方法，目前所有现代浏览器都支持。Gzip 在服务器端压缩站点的 HTML、CSS 和 JavaScript 包，然后将它们发送到浏览器，在客户端，它解压缩文件并交付内容。
Brotli 当前压缩比最高的工具。根据 CertSimple^[9] 的研究，Brotli 压缩后的 JavaScript 文件比 Gzip 小 14%，而 HTML 和 CSS 压缩率比 Gzip 好 21% 和 17%。

5. 优化图片

对于大部分网站来说，图像是至关重要的部分。互联网上 93.7% 的网站使用至少一种图像文件格式，因为它们有助于丰富内容，提高用户参与度。然而，图像的体积往往远大于代码，它会对前端加载时间产生不利影响，因此我们需要时刻记住优化图片尺寸。

有几种方法可以优化图像：

使用 WebP 或 AVIF

使用 WebP 和 AVIF 等新图像格式，他们比 JPEG 和 PNG 等旧格式能提供更好的性能。

❝
WebP 比 PNG 小 26%，比 JPEG 小 25-35%。AVIF 比 JPEG 小 50%，比 WebP 小 20%。
❞

但是，目前它们的浏览器支持还不是太好。WebP 最近获得了所有最新版浏览器的支持，旧版本可能不支持它。而 AVIF 仅在 Chrome 和 Opera 中受支持。因此，你需要使用元素来为不同的显示设备场景提供不同的图像版本。

提供正确尺寸的图像。

另一种减少图像加载时间和提高网站性能的方法是使用响应式图像。现如今超过 50% 的流量来自智能手机和平板电脑。将图像缩放到流行的设备尺寸并使用srcset是适应不同显示设备加载不同体积的图片。

你还可以通过其他几种方法通过图像优化来减少前端加载时间。以下是你可以使用的一些其他最佳实践：

图像压缩
使用渐进式 JPEG。
为连接速度较慢的用户提供较小的图像。
使用 HTTP/2 而不是 HTTP/1.1。
使用image-set。

6. 延迟加载（懒加载）

延迟加载有助于进一步改善前端加载时间。使用延迟加载，网页首先只加载需要的内容，然后在用户需要时加载剩余的内容。例如，在 Google 图片搜索结果中，首先只加载一小部分图片,更多内容显示为占位符图像，而不是实际内容，从而减少加载时间。如果用户向下滚动页面，再加载呈现实际内容。

除了延迟占位符加载外，你还可以选择其他的方式，例如原生的懒加载loading="lazy"和“模糊图像效果”。

7. 善用缓存

每次访问网站时，我们都需要从服务器上把 HTML、CSS、JavaScript、图片等资源下载下来再显示。每次加载都会很耗时。防止此问题的最佳方法是使用缓存。如果配置得当，浏览器会将文件缓存在本地，避免了不停地加载相同的资源。

浏览器缓存，是我们最常用的也是最有效提升加载速度的方式！

缓存服务器：用户请求从缓存服务器集合中发送到最近的缓存服务器。（例如：内容交付网络。将在第 9 点中详细讨论）
内存缓存：通过将数据的某些部分存储在内存中（例如：JavaScript 变量）
磁盘缓存：类似于内存缓存，但它使用磁盘存储文件，绝大部分的缓存都来自磁盘缓存。

8. 预加载 Prefetching

资源预加载是一种可用于优化前端数据加载的性能增强技术。

❝
作为开发人员，你比浏览器更了解你的应用程序。因此你可以使用预加载来告诉浏览器接下来可能需要的资源。
❞

预加载用户接下来可能需要的资源以减少用户点击后的等待时间。预取主要有三种类型：链接预取(Link prefetching)、DNS 预取(DNS prefetch)、预呈现(prerender)

链接预取

链接预取是一种浏览器机制，其利用浏览器空闲时间来下载或预取用户在不久的将来可能访问的文档。网页向浏览器提供一组预取提示，并在浏览器完成当前页面的加载后开始静默地拉取指定的文档并将其存储在缓存中。当用户访问其中一个预取文档时，便可以快速的从浏览器缓存中得到。但是，链接预取仅适用于图像和 JavaScript 等可缓存资源。

DNS 预取

DNS-prefetch (DNS 预获取) 是尝试在请求资源之前解析域名。当浏览器从（第三方）服务器请求资源时，必须先将该跨域域名解析为 IP地址，然后浏览器才能发出请求。此过程称为 DNS解析。DNS 缓存可以帮助减少此延迟，而 DNS解析可以导致请求增加明显的延迟。对于打开了与许多第三方的连接的网站，此延迟可能会大大降低加载性能。

DNS 预取允许浏览器在用户浏览当前页面时在后台对网页中的链接执行 DNS 查找，以最大限度地减少用户点击链接时的延迟。