你真的了解浏览器的缓存机制么？_浏览器静态资源缓存-CSDN博客

本文链接：https://blog.csdn.net/2404_88048702/article/details/143757103

你真的了解浏览器的缓存机制么？

大家好，今天我们来聊聊浏览器与服务器之间的缓存机制。我们每天都在用浏览器访问网页，但可能很多人对其中的缓存机制并不太了解。缓存机制不仅可以提升访问速度，还能减少带宽消耗和服务器的压力。今天，我们就再来解释一下浏览器和服务器之间的缓存是如何工作的。

什么是缓存？

简单来说，缓存就是把一些访问过的数据保存起来，以便下次再用的时候可以直接从缓存中读取，而不需要重新从服务器获取。这个过程可以极大地提升访问速度。对于浏览器来说，常见的缓存存储位置包括浏览器本地的缓存存储（硬盘或内存）和缓存服务器（比如CDN）。

缓存机制的工作原理

浏览器缓存机制主要依赖于HTTP协议中的缓存控制字段。我们来看一下这些字段是如何影响缓存行为的。

1. Cache-Control

Cache-Control 是HTTP头中最重要的字段之一，它用于定义资源的缓存策略。常见的取值有：

public：资源可以被任何缓存（包括浏览器、本地缓存服务器等）缓存。
private：资源只会被浏览器缓存，不会被那些共享的缓存服务器缓存。
no-cache：资源每次使用前都需要向服务器验证，虽然名称是“no-cache”，但它并不是真的不缓存，而是每次读取时都要检查是否有更新。
no-store：资源不会被缓存，无论是浏览器还是服务器，使用这种策略的资源一般是非常敏感的数据。
max-age：定义资源的最大缓存时间，单位为秒。例如，max-age=3600 表示资源可在缓存中保存1小时。

示例

Cache-Control: public, max-age=3600

这个指令告诉浏览器和缓存服务器，这个资源可以被缓存，并且缓存时间为1小时。

2. ETag 和 Last-Modified

这两个字段用于资源的验证和更新。

ETag：资源的唯一标识符，用于表示资源的特定版本。当资源改变时，ETag会变化。浏览器在请求资源时会发送 If-None-Match 头部来验证资源的ETag是否匹配。如果匹配，服务器返回 304 Not Modified 状态码，表示资源未变，浏览器可以直接使用缓存。
Last-Modified：资源的最后修改时间。浏览器可以通过 If-Modified-Since 头部询问服务器资源是否在某时间之后被修改过，如果没有修改，服务器返回 304 Not Modified。

示例

ETag: "686897696a7c876b7e"
Last-Modified: Wed, 21 Oct 2023 07:28:00 GMT

3. Expires

资源的过期时间，用于指定一个绝对的到期日期和时间。已被 Cache-Control: max-age 所取代，但仍兼容旧版。

示例

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

典型的缓存交互流程

当然，关于浏览器缓存和服务器之间的详细交互过程，这一过程主要分为以下几个阶段：首次请求、后续请求（缓存命中和缓存失效）以及缓存验证相关的HTTP请求和响应头。我们将详细探讨这些阶段以及相关的HTTP头信息如何配合工作。

客户端（浏览器）                          服务器
      |                                     |
(首次请求)                                  |
      | ---- GET /index.html -------------> |
      |                                     |
      | <--- 200 OK (Cache-Control, ETag, Last-Modified) ---- |
      |                                     |
(从服务器加载资源并缓存)                        |
      |                                     |
(后续请求，缓存未失效)                          |
      | ---- 从缓存加载资源 --------------   |
      |                                     |
(后续请求，缓存失效)                            |
      | ---- GET /index.html (If-None-Match, If-Modified-Since) -> |
      |                                     |
      | <---- 304 Not Modified ----         |
或者                                           |
      | <---- 200 OK (新内容, 新 ETag, 新 Last-Modified) ---- |
      |                                     |
(更新缓存)                                    |

1. 首次请求

步骤

浏览器发送请求：用户通过浏览器访问页面，浏览器向服务器发送HTTP请求。
服务器响应：服务器接收到请求之后，处理请求并返回资源，同时附带缓存控制相关的HTTP头。

主要HTTP头信息

Cache-Control: 告诉浏览器如何缓存响应数据。
Expires: 指定资源的过期时间。
ETag: 资源的唯一标识符，用于后续的验证请求。
Last-Modified: 资源最后修改时间，用于后续的验证请求。

示例

浏览器请求资源

GET /index.html HTTP/1.1
Host: www.example.com

服务器响应资源

HTTP/1.1 200 OK
Content-Type: text/html
Cache-Control: max-age=3600, must-revalidate
Expires: Wed, 21 Oct 2023 07:28:00 GMT
ETag: "686897696a7c876b7e"
Last-Modified: Wed, 21 Oct 2023 07:26:00 GMT

<body>
    <h1>Hello, World!</h1>
</body>

2. 后续请求

在首次请求之后，浏览器会根据缓存策略判断是否需要再次请求资源。

缓存命中

如果浏览器检测到缓存未失效（例如 Cache-Control: max-age 未过期，或者 Expires 日期未到），则直接从缓存中加载资源，而无需发送任何网络请求。

缓存失效

当资源过期或者缓存策略要求重新验证时，浏览器会发送一个条件请求来验证缓存的有效性。

条件请求

浏览器在发送条件请求时使用以下头信息：

If-None-Match: 携带之前缓存的 ETag 值。
If-Modified-Since: 携带之前缓存的 Last-Modified 值。

服务器响应

服务器根据接收到的条件请求进行验证：

资源未修改（304 Not Modified）：服务器返回 304 Not Modified 响应，浏览器从缓存中加载资源。
资源已修改（200 OK）：服务器返回新的资源数据和更新的缓存控制头信息，浏览器更新缓存。

示例

浏览器发送验证请求

GET /index.html HTTP/1.1
Host: www.example.com
If-None-Match: "686897696a7c876b7e"
If-Modified-Since: Wed, 21 Oct 2023 07:26:00 GMT

服务器响应资源未修改

HTTP/1.1 304 Not Modified

在这种情况下，浏览器知道资源未修改，可以直接从缓存中使用现有的资源。

服务器响应资源已修改

HTTP/1.1 200 OK
Content-Type: text/html
Cache-Control: max-age=3600, must-revalidate
ETag: "b4978d9e5991c68b8f"
Last-Modified: Wed, 21 Oct 2023 07:30:00 GMT

<body>
    <h1>Hello, Updated World!</h1>
</body>

在这种情况下，浏览器会用新的资源数据更新缓存。

交互过程示意图 |

其他HTTP头信息

除了上文提到的HTTP头信息，还有一些HTTP头在缓存机制中起着辅助作用：

Vary: 告诉缓存应基于哪些请求头来区分缓存的版本，例如 Vary: Accept-Encoding 表示根据不同的编码方式缓存不同的版本。
Age: 服务器响应中包含此头，表示资源在代理缓存中已存储的时间。
Pragma: 用于向后兼容的 HTTP 1.0 缓存控制指令，常见值为 Pragma: no-cache，和 Cache-Control: no-cache 类似。

一些优化策略

为了优化缓存机制，除了合理设置Cache-Controld，Etag等字段之外，我们需要根据资源的特性采取以下策略：

1. 静态资源使用长期缓存

对于一些不经常变化的静态资源（如图片、CSS文件和JS文件），可以使用较长的缓存时间，同时配合版本控制来强制刷新缓存。

版本化文件名：通过在文件名中加入版本号，确保资源更新时能强制浏览器请求新版本。

<link rel="stylesheet" type="text/css" href="style.v1.css">
<script src="script.v1.js"></script>

当资源更新时，可以将版本号更新为v2：

<link rel="stylesheet" type="text/css" href="style.v2.css">
<script src="script.v2.js"></script>

2. Content Delivery Network (CDN)

使用CDN可以将资源分发到离用户最近的服务器，提高资源加载速度，并减轻主服务器的负载。引入CDN之后，缓存的交互方式变得复杂，下图中展示了用户，浏览器，服务器，缓存，CDN之间的交互方式。

3. 预加载和懒加载

预加载关键资源：通过<link rel="preload">标签预加载关键资源，确保它们能够尽快被使用。
```
<link rel="preload" href="style.css" as="style">
<link rel="preload" href="main.js" as="script">
```
懒加载不关键资源：对于一些非关键资源可以使用懒加载（lazy loading）策略，延迟加载这些资源，降低首次加载时间。
```
<img src="image.jpg" loading="lazy" alt="Example image">
```