Web性能优化之浏览器缓存机制：详解缓存策略，提升网站加载速度

# 1. 浏览器缓存概述

浏览器缓存是一种机制，它允许浏览器将经常访问的资源（如 HTML、CSS、JavaScript 和图像）存储在本地计算机上。这可以显着提高网站的加载速度，因为浏览器不必从服务器重新下载这些资源。

浏览器缓存有两种主要类型：强缓存和协商缓存。强缓存由浏览器根据缓存头（如 Expires 和 Cache-Control）中的指令控制。协商缓存由浏览器和服务器之间的协商控制，使用 Last-Modified 和 ETag 等头。

# 2. 浏览器缓存策略

### 2.1 强制缓存

强制缓存是一种无需与服务器交互即可直接从浏览器缓存中获取资源的缓存策略。它通过设置 Expires 头或 Cache-Control 头来实现。

#### 2.1.1 Expires 头

Expires 头指定资源的过期时间，单位为 GMT 时间戳。当资源请求的时间超过 Expires 头指定的过期时间时，浏览器将从服务器重新获取该资源。

Expires: Wed, 21 Oct 2023 07:28:00 GMT

**参数说明：**

* **Expires：**过期时间，格式为 "星期，日期 月份 年份 时分秒 GMT"。

**逻辑分析：**

当浏览器收到此 Expires 头时，它会将资源缓存到本地，并在资源的过期时间之前直接从缓存中获取。如果资源的过期时间已过，浏览器将向服务器发送请求以重新获取该资源。

#### 2.1.2 Cache-Control 头

Cache-Control 头提供更灵活的缓存控制选项，它可以指定缓存的有效期、是否允许缓存以及缓存的类型。

Cache-Control: max-age=3600

**参数说明：**

* **max-age：**缓存的有效期，单位为秒。

**逻辑分析：**

当浏览器收到此 Cache-Control 头时，它会将资源缓存到本地，并在资源的有效期内直接从缓存中获取。如果资源的有效期已过，浏览器将向服务器发送请求以重新获取该资源。

### 2.2 协商缓存

协商缓存是一种在资源请求时与服务器交互以确定资源是否需要更新的缓存策略。它通过设置 Last-Modified 头或 ETag 头来实现。

#### 2.2.1 Last-Modified 头

Last-Modified 头指定资源的最后修改时间，单位为 GMT 时间戳。当资源请求的时间与 Last-Modified 头指定的最后修改时间相同或更早时，浏览器将从缓存中获取该资源。

Last-Modified: Wed, 21 Oct 2023 07:28:00 GMT

**参数说明：**

* **Last-Modified：**资源的最后修改时间，格式为 "星期，日期 月份 年份 时分秒 GMT"。

**逻辑分析：**

当浏览器收到此 Last-Modified 头时，它会将资源缓存到本地。当再次请求该资源时，浏览器会将请求头中的 If-Modified-Since 字段设置为 Last-Modified 头指定的时间。服务器会检查资源是否自该时间以来已被修改。如果未修改，服务器将返回 304 Not Modified 状态码，浏览器将继续使用缓存中的资源。如果已修改，服务器将返回 200 OK 状态码以及更新的资源。

#### 2.2.2 ETag 头

ETag 头是一个唯一的字符串，用于标识资源的版本。当资源请求的时间与 ETag 头指定的 ETag 相同或更早时，浏览器将从缓存中获取该资源。

ETag: "1234567890"

**参数说明：**

* **ETag：**资源的唯一标识字符串。

**逻辑分析：**

当浏览器收到此 ETag 头时，它会将资源缓存到本地。当再次请求该资源时，浏览器会将请求头中的 If-None-Match 字段设置为 ETag 头指定的 ETag。服务器会检查资源的 ETag 是否与请求头中的 ETag 相同。如果相同，服务器将返回 304 Not Modified 状态码，浏览器将继续使用缓存中的资源。如果不同，服务器将返回 200 OK 状态码以及更新的资源。

# 3. 浏览器缓存优化实践

### 3.1 启用强缓存

#### 3.1.1 设置 Expires 头

Expires 头指定一个绝对时间，表示资源在该时间之前有效。在该时间之后，浏览器将从服务器重新获取资源。

**语法：**

Expires: <date>

**参数说明：**

* `<date>`：资源的过期时间，格式为 RFC 1123。

**代码示例：**

Expires: Thu, 15 Apr 2023 12:00:00 GMT

**逻辑分析：**

该代码设置资源在 2023 年 4 月 15 日 12:00:00 GMT 之前有效。在此时间之后，浏览器将从服务器重新获取资源。

#### 3.1.2 设置 Cache-Control 头

Cache-Control 头指定资源的缓存行为。它可以设置以下指令：

* `max-age`：指定资源在缓存中保存的最大时间，单位为秒。
* `no-cache`：指示浏览器不要缓存资源。
* `no-store`：指示浏览器不要存储资源。

**语法：**

Cache-Control: <directive>

**参数说明：**

* `<directive>`：缓存指令，可以是 `max-age`、`no-cache` 或 `no-store`。

**代码示例：**

Cache-Control: max-age=3600

**逻辑分析：**

该代码设置资源在缓存中保存的最大时间为 3600 秒（1 小时）。

### 3.2 优化协商缓存

#### 3.2.1 使用 Last-Modified 头

Last-Modified 头指定资源的最后修改时间。浏览器在请求资源时会发送该头，服务器会比较头中的时间和资源的实际修改时间。如果资源未修改，服务器将返回 304 Not Modified 状态码，浏览器将使用缓存中的资源。

**语法：**

Last-Modified: <date>

**参数说明：**

* `<date>`：资源的最后修改时间，格式为 RFC 1123。

**代码示例：**

Last-Modified: Thu, 15 Apr 2023 12:00:00 GMT

**逻辑分析：**

该代码设置资源的最后修改时间为 2023 年 4 月 15 日 12:00:00 GMT。

#### 3.2.2 使用 ETag 头

ETag 头指定资源的唯一标识符。浏览器在请求资源时会发送该头，服务器会比较头中的标识符和资源的实际标识符。如果资源未修改，服务器将返回 304 Not Modified 状态码，浏览器将使用缓存中的资源。

**语法：**

ETag: <etag>

**参数说明：**

* `<etag>`：资源的唯一标识符，可以是任何字符串。

**代码示例：**

ETag: "1234567890"

**逻辑分析：**

该代码设置资源的唯一标识符为 "1234567890"。

# 4. 浏览器缓存高级应用

在掌握了浏览器缓存的基础知识和优化实践之后，我们可以进一步探索一些高级应用，以充分利用浏览器缓存的优势。

### 4.1 服务端缓存控制

服务端缓存控制允许服务器指定哪些资源可以被缓存，以及如何缓存。这可以通过使用以下 HTTP 头来实现：

#### 4.1.1 使用 Vary 头

Vary 头允许服务器指定资源的响应应该根据请求的某些特征而有所不同。例如，我们可以使用 Vary: Accept-Encoding 头来指示服务器根据客户端接受的编码类型提供不同的响应。

HTTP/1.1 200 OK
Content-Type: text/html
Vary: Accept-Encoding

如果客户端接受 gzip 编码，服务器将提供一个经过 gzip 压缩的响应。否则，服务器将提供一个未压缩的响应。

#### 4.1.2 使用 Vary: Accept-Encoding 头

Vary: Accept-Encoding 头用于指示服务器根据客户端接受的编码类型提供不同的响应。这可以帮助减少网络流量并提高页面加载速度。

HTTP/1.1 200 OK
Content-Type: text/html
Vary: Accept-Encoding

如果客户端接受 gzip 编码，服务器将提供一个经过 gzip 压缩的响应。否则，服务器将提供一个未压缩的响应。

### 4.2 客户端缓存控制

客户端缓存控制允许客户端指定如何缓存资源。这可以通过使用以下 HTTP 头来实现：

#### 4.2.1 使用 Service Worker

Service Worker 是一个脚本，它在浏览器后台运行，可以拦截网络请求并控制缓存。Service Worker 可以用来实现离线缓存、预缓存和自定义缓存策略。

self.addEventListener('install', (event) => {
  event.waitUntil(
    caches.open('my-cache').then((cache) => {
      return cache.addAll([
        '/',
        '/index.html',
        '/main.js',
      ]);
    })
  );
});

self.addEventListener('fetch', (event) => {
  event.respondWith(
    caches.match(event.request).then((response) => {
      return response || fetch(event.request);
    })
  );
});

#### 4.2.2 使用 HTTP/2 Push

HTTP/2 Push 允许服务器在客户端请求之前主动推送资源到客户端。这可以帮助减少页面加载时间并提高用户体验。

HTTP/2 200 OK
Link: </main.js>; rel=preload; as=script

通过使用 Vary 头和 Service Worker，我们可以实现更加精细的缓存控制，从而提高缓存的命中率和性能。

# 5.1 浏览器缓存性能分析

### 5.1.1 使用 Chrome DevTools

Chrome DevTools 是一个强大的工具，可用于分析浏览器缓存性能。它提供了一系列功能，包括：

- **网络面板：**显示有关网络请求和响应的详细信息，包括缓存命中和未命中。
- **缓存面板：**显示有关浏览器缓存中存储的资源的信息，包括大小、类型和上次访问时间。
- **性能面板：**提供有关页面加载性能的详细信息，包括缓存利用率和请求时间。

要使用 Chrome DevTools 分析浏览器缓存性能，请执行以下步骤：

1. 打开 Chrome DevTools（按 F12 或右键单击并选择“检查”）。
2. 导航到“网络”面板。
3. 重新加载页面。
4. 在“网络”面板中，单击“大小”列标题对请求进行排序。
5. 检查缓存命中和未命中的请求。

### 5.1.2 使用 WebPageTest

WebPageTest 是一个在线工具，可用于分析网站性能，包括浏览器缓存性能。它提供了一系列功能，包括：

- **瀑布图：**显示有关页面加载过程的详细信息，包括缓存命中和未命中。
- **内容分析：**提供有关页面内容的详细信息，包括缓存大小和类型。
- **性能报告：**总结页面加载性能，包括缓存利用率和请求时间。

要使用 WebPageTest 分析浏览器缓存性能，请执行以下步骤：

1. 访问 WebPageTest 网站（https://www.webpagetest.org/）。
2. 输入要分析的网站 URL。
3. 选择测试位置和浏览器。
4. 单击“开始测试”按钮。
5. 测试完成后，查看“瀑布图”和“内容分析”部分以获取有关浏览器缓存性能的信息。