游览器缓存讲解

浏览器缓存是指浏览器在本地存储已经请求过的资源的一种机制，以便在将来的请求中能够更快地获取这些资源，减少对服务器的请求，提高页面加载速度。浏览器缓存主要涉及到两个方面：缓存控制和缓存位置。

缓存控制

Expires 头：

作用： 通过 Expires 头指定资源的过期时间，即资源在客户端缓存的有效期。

示例： Expires: Tue, 10 Nov 2023 12:00:00 GMT

Cache-Control 头：

作用： 提供更灵活的缓存控制，包括 public（可以被任何中间缓存和终端缓存）、private（只能被终端缓存）、no-cache（需要先验证是否过期）、max-age（指定缓存的最大有效时间）等。

示例： Cache-Control: max-age=3600, public

Last-Modified 头：

作用： 指定资源最后一次修改的时间。

示例： Last-Modified: Tue, 01 Nov 2022 08:00:00 GMT

If-Modified-Since 头：

作用： 客户端发送该头，用于条件性地请求服务器，仅在资源在指定时间后被修改时才会返回资源内容。

示例： If-Modified-Since: Tue, 01 Nov 2022 08:00:00 GMT

ETag 头：

作用： 提供一个唯一的标识符，当资源被修改时，ETag 会发生变化。

示例： ETag: “abc123”

If-None-Match 头：

作用： 客户端发送该头，用于条件性地请求服务器，仅在资源的 ETag 值与指定的值不匹配时才返回资源内容。

示例： If-None-Match: “abc123”

缓存位置

Memory Cache（内存缓存）：

缓存在内存中，读取速度快，但容量较小，仅在浏览器打开时有效。
Disk Cache（磁盘缓存）：

缓存在磁盘中，容量相对较大，可以在浏览器关闭后依然有效。
Service Worker Cache（Service Worker 缓存）：

使用 Service Worker 技术，可以在离线状态下提供缓存服务，用于构建离线应用。
Push Cache：

用于存储通过 HTTP/2 服务器推送而来的资源。

缓存的流程

首次请求：

浏览器向服务器请求资源。
服务器响应：

服务器返回资源，并在响应头中设置相应的缓存控制信息。
浏览器缓存：

浏览器将资源保存在缓存中，同时记录缓存控制信息。
再次请求：

如果资源没有过期，浏览器直接从缓存中读取资源，不再请求服务器。
条件性请求：

如果资源过期或被修改，浏览器通过条件性请求（如 If-Modified-Since 或 If-None-Match）向服务器验证是否需要获取新的资源。
更新缓存：

如果服务器返回新的资源，浏览器将新的资源存储在缓存中，更新缓存控制信息。
通过合理设置缓存控制头，开发者可以更好地控制客户端缓存的行为，从而提升用户体验和加速页面加载。