Web 性能优化：如何使用缓存提高访问速度-JavaScript中文网-JavaScript教程资源分享门户

在现代 Web 应用中，性能优化是至关重要的。用户期望网站加载速度快，响应迅速，否则他们就会转向其他竞争对手的网站。其中一个性能优化策略是使用缓存，它可以减少服务器和客户端之间的数据传输量，从而提高网站的访问速度。本文将介绍如何使用缓存来提高 Web 性能，并提供示例代码和最佳实践。

什么是缓存？

缓存是指将资源存储在本地的一种技术。当用户访问一个网站时，服务器会将资源发送到客户端浏览器中，浏览器会将这些资源存储在本地缓存中，以便在将来访问同一网站时，可以直接从本地缓存中获取资源，而不必再次从服务器请求。这可以减少数据传输量，并提高网站的访问速度。

缓存的类型

在 Web 应用程序中，有两种类型的缓存：浏览器缓存和服务器缓存。

浏览器缓存

浏览器缓存是指将资源存储在浏览器中的缓存。浏览器缓存通常是基于 HTTP 协议的缓存机制。当用户访问一个网站时，浏览器会检查本地缓存，如果资源已经存在于本地缓存中，则可以直接从本地缓存中获取资源，而不必再次从服务器请求。

浏览器缓存主要有两种类型：强缓存和协商缓存。

强缓存

强缓存是指在指定的时间内，浏览器直接从本地缓存中获取资源，而不必向服务器发出请求。强缓存可以通过设置 HTTP 头来实现，如下所示：

Cache-Control: max-age=3600

上面的代码表示资源可以在 3600 秒内从本地缓存中获取，而不必向服务器发出请求。

协商缓存

协商缓存是指在强缓存过期后，浏览器需要向服务器发出请求，以检查资源是否已更改。如果资源未更改，则服务器会返回一个 304 状态码，告诉浏览器可以从本地缓存中获取资源。协商缓存可以通过设置 HTTP 头来实现，如下所示：

Last-Modified: Fri, 07 May 2021 00:00:00 GMT

上面的代码表示资源最后修改时间是 2021 年 5 月 7 日，服务器可以通过比较这个时间和浏览器缓存中的时间戳来检查资源是否已更改。

服务器缓存

服务器缓存是指将资源存储在服务器中的缓存。服务器缓存通常是基于应用程序的缓存机制。服务器缓存可以提高应用程序的性能，因为它可以减少数据库查询和计算的次数。

服务器缓存可以通过以下方式来实现：

内存缓存：将资源存储在内存中，以便快速访问。
文件缓存：将资源存储在文件系统中，以便快速访问。
数据库缓存：将资源存储在数据库中，以便快速访问。

如何使用缓存来提高 Web 性能？

使用缓存来提高 Web 性能需要遵循以下最佳实践：

1. 设置缓存控制头

设置缓存控制头可以控制浏览器缓存和服务器缓存的行为。可以使用以下 HTTP 头来设置缓存控制：

Cache-Control：指定缓存策略。
Expires：指定资源的过期时间。
Last-Modified：指定资源的最后修改时间。

2. 使用 CDN

使用 CDN（内容分发网络）可以将资源分发到距离用户更近的服务器上，从而减少数据传输量和延迟。CDN 可以缓存静态资源，如 CSS、JavaScript 和图像等。

3. 压缩资源

压缩资源可以减少数据传输量和延迟。可以使用以下技术来压缩资源：

Gzip：用于压缩文本资源。
Brotli：用于压缩文本资源。
图像压缩：用于压缩图像资源。

4. 避免重复请求

避免重复请求可以减少数据传输量和延迟。可以使用以下技术来避免重复请求：

预加载资源：在用户请求资源之前，预加载资源。
懒加载资源：在用户滚动页面时，懒加载资源。
合并资源：将多个资源合并为一个资源，从而减少请求次数。

示例代码

以下是使用缓存来提高 Web 性能的示例代码：

强缓存

app.get('/index.html', function(req, res) {
  res.setHeader('Cache-Control', 'max-age=3600');
  res.sendFile(__dirname + '/public/index.html');
});

协商缓存

-- -------------------- ---- -------
---------------------- ------------- ---- -
  --- ------------ - --- ---------------------------------
  -- --------------------------------- -- --- -------------------------------------- -- ------------- -
    -----------------------
  - ---- -
    ------------------------------ ----------------------------
    ---------------------- - ----------------------
  -
---

CDN

<link rel="stylesheet" href="https://cdn.example.com/styles.css">
<script src="https://cdn.example.com/scripts.js"></script>

压缩资源

const compression = require('compression');
app.use(compression());

预加载资源

<link rel="preload" href="/styles.css" as="style">
<link rel="preload" href="/scripts.js" as="script">

懒加载资源

-- -------------------- ---- -------
--------------------------------- ---------- -
  --- ------ - -------------------------------------------
  --- ---- - - -- - - -------------- ---- -
    -- -------------------------------------- - ------------------- -
      ----------------------------- ------------------------------------
      --------------------------------------
    -
  -
---

合并资源

<link rel="stylesheet" href="/styles.css">
<link rel="stylesheet" href="/print.css">
<script src="/scripts.js"></script>
<script src="/analytics.js"></script>

总结

缓存是提高 Web 性能的一个重要策略。使用缓存可以减少数据传输量和延迟，从而提高网站的访问速度。本文介绍了浏览器缓存和服务器缓存的类型，以及如何使用缓存来提高 Web 性能的最佳实践。我们希望这些信息对你有所帮助，并希望你能够在自己的项目中应用它们。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/6515954895b1f8cacde09b1f