在 Web 开发中，浏览器缓存是一个至关重要的概念。它不仅可以显著提升网站的加载速度，还能减轻服务器的负担，优化用户体验。本文将深入探讨浏览器缓存的机制，帮助你更好地理解和应用缓存技术。
一、什么是浏览器缓存？
浏览器缓存是一种存储机制，它允许浏览器将从服务器获取的资源（如 HTML、CSS、JavaScript、图片等）保存在本地。当用户再次访问相同的资源时，浏览器可以直接从本地缓存中读取，而无需再次请求服务器。这不仅减少了网络请求的次数，还加快了页面的加载速度。
二、按缓存位置分类
浏览器缓存可以按照存储位置分为以下几种：
（一）Service Worker
Service Worker 是一种运行在浏览器背后的独立线程，可以用来实现缓存功能。它允许开发者在客户端拦截网络请求，并根据自定义逻辑返回缓存的内容。使用 Service Worker 时，传输协议必须为 HTTPS，以确保安全。
Service Worker 的缓存机制与其他浏览器内建的缓存机制不同，它提供了更高的灵活性和控制能力。开发者可以自由决定哪些文件需要缓存、如何匹配缓存以及如何读取缓存。
（二）Memory Cache
Memory Cache 是存储在内存中的缓存，主要用于存储当前页面中已经加载的资源，如样式表、脚本、图片等。内存缓存的读取速度非常快，但缓存持续性较短，会随着页面的关闭而释放。
由于内存容量有限，Memory Cache 通常只存储最近访问的资源，以确保高效利用内存。
（三）Disk Cache
Disk Cache 是存储在硬盘中的缓存，它提供了更大的存储空间和更长的缓存持续性。Disk Cache 会根据 HTTP 响应头中的字段（如 Cache-Control 和 Expires）来决定哪些资源需要缓存，哪些资源可以直接使用，哪些资源已经过期需要重新请求。
Disk Cache 是最常见的缓存类型，它遵守 HTTP 协议头中的字段，因此也被称为 HTTP Cache。
（四）Push Cache
Push Cache 是 HTTP/2 中新增的一种缓存机制，用于存储服务器主动推送的资源。Push Cache 只在会话（Session）中存在，一旦会话结束，缓存就会被释放。它的缓存时间较短，通常只有几分钟。
Push Cache 的使用场景相对较少，但它在某些情况下可以显著提升资源的加载速度。
三、按缓存类型分类
（一）强制缓存
强制缓存 是一种直接减少请求数的缓存策略。当客户端请求资源时，浏览器会先检查本地缓存中是否存在该资源，并且缓存是否有效。如果缓存有效，浏览器将直接使用缓存内容，而无需再次请求服务器。
强制缓存的字段包括 Cache-Control 和 Expires。
1. Expires
Expires 是 HTTP/1.0 中的字段，表示缓存的绝对过期时间。例如：
Expires: Thu, 10 Nov 2017 08:45:11 GMT
Expires 的缺点是依赖于客户端和服务器的时间同步，如果客户端时间被修改，可能会导致缓存失效。
2. Cache-Control
Cache-Control 是 HTTP/1.1 中的字段，表示缓存的最大有效时间。例如：
Cache-Control: max-age=2592000
Cache-Control 的优势是使用相对时间，不受客户端时间修改的影响。它还支持多种指令，如 no-cache、no-store、must-revalidate 等，提供了更灵活的缓存控制。
（二）协商缓存
协商缓存 是在强制缓存失效后使用的一种缓存策略。当浏览器发现强制缓存失效时，会向服务器发送请求，携带缓存标识（如 Last-Modified 或 ETag），服务器根据这些标识判断资源是否发生变化。如果资源未变化，服务器返回 304 状态码，浏览器继续使用缓存；如果资源已变化，服务器返回新的资源和缓存规则。
协商缓存的字段包括 Last-Modified、If-Modified-Since、ETag 和 If-None-Match。
1. Last-Modified 和 If-Modified-Since
Last-Modified 是服务器返回的资源最后修改时间，If-Modified-Since 是浏览器请求时携带的上次缓存的最后修改时间。服务器通过比较这两个时间来判断资源是否发生变化。
2. ETag 和 If-None-Match
ETag 是服务器返回的资源的唯一标识，If-None-Match 是浏览器请求时携带的上次缓存的 ETag。服务器通过比较这两个标识来判断资源是否发生变化。
ETag 的精度更高，因为它是一个哈希值，每次资源变化都会改变。
四、缓存读取规则
当浏览器请求资源时，缓存的读取规则如下：
- Service Worker：如果设置了 Service Worker，优先从 Service Worker 中获取内容。
- Memory Cache：其次查看内存缓存。
- Disk Cache：如果内存缓存中没有找到，查看硬盘缓存。
- 如果强制缓存有效，直接使用缓存。
- 如果强制缓存失效，使用协商缓存。
- 网络请求：如果所有缓存都未命中，发送网络请求。
- 更新缓存：将从网络请求中获取的资源存入硬盘缓存和内存缓存。
五、浏览器行为
不同的浏览器行为会触发不同的缓存策略：
- 打开网页：查找硬盘缓存中的匹配项，如有则使用，否则发送网络请求。
- 普通刷新 (F5)：优先使用内存缓存，其次硬盘缓存。
- 强制刷新 (Ctrl + F5)：不使用缓存，直接发送网络请求。
六、缓存的最佳实践
（一）频繁变动的资源
对于频繁变动的资源，使用 Cache-Control: no-cache，并配合 ETag 或 Last-Modified 进行验证。
Cache-Control: no-cache
（二）不常变化的资源
对于不常变化的资源，设置较长的 max-age，并在文件名中添加哈希值或版本号，以便在资源更新时更改引用 URL。
Cache-Control: max-age=31536000
（三）静态资源缓存策略
在使用打包工具（如 Webpack）时，可以在生成的文件名中添加哈希值，例如 bundle.abc123.js。这样，当文件内容发生变化时，哈希值也会变化，从而触发缓存更新。
