通常我们利用缓存是提高用户体验、减少网络请求、提高页面加载速度。
正确使用缓存策略，能显著减少服务器负担，同时加速资源加载。
前端缓存主要有两种类型：强缓存 和协商缓存。
一、强缓存（Cache-Control & Expires）
1.1 强缓存简介
强缓存是指在浏览器发起请求之前，直接从本地缓存中读取资源，而不需要再向服务器发送请求。如果资源在缓存中存在且没有过期，浏览器会直接加载缓存数据，不与服务器进行任何交互。这种方式可以极大减少请求时间，提高加载速度。
强缓存的控制主要依赖于两种 HTTP 头部信息：
- Cache-Control ：用来设置缓存策略的标准 HTTP 头部字段。常见的指令有
max-age、no-cache、no-store等。 - Expires：指定缓存的过期时间，过期后会重新请求资源。
1.2 Cache-Control 详解
Cache-Control 是强缓存策略的核心，它能更细粒度地控制缓存行为。常见的指令包括：
max-age: 设置缓存的最大有效时间（单位：秒）。比如Cache-Control: max-age=3600表示资源在缓存中有效 1 小时。no-cache: 即使缓存中有资源，也会每次向服务器发起请求，进行验证。no-store: 不缓存任何请求和响应。每次请求都会从服务器获取数据。public: 资源可以被任何缓存（浏览器、CDN 等）缓存。private: 资源只能被客户端缓存，不能被 CDN 等共享缓存缓存。immutable: 表示缓存的资源永远不会变化，适用于一些静态资源如图片、字体文件等。
1.3 Expires 详解
Expires 头部指定资源的过期时间，在该时间点后，缓存会失效。它的值是一个绝对的日期时间，表示资源在此时间之前都是有效的。
Expires: Wed, 21 Oct 2025 07:28:00 GMT
与 Cache-Control 的 max-age 指令不同，Expires 指定的是一个具体的时间点，而不是相对时间。需要注意的是，Expires 是 HTTP/1.0 的标准，在 HTTP/1.1 中，推荐使用 Cache-Control 来代替。
1.4 强缓存的优缺点
优点：
- 减少网络请求，提高页面加载速度。
- 降低服务器压力，节省带宽。
缺点：
- 强缓存一旦生效，在缓存过期之前，用户无法获取到更新后的资源。
- 可能需要手动修改文件名或版本号，来保证资源的更新。
二、协商缓存（Last-Modified & ETag）
2.1 协商缓存简介
协商缓存是指浏览器在请求资源时，向服务器发送请求，并附带上本地缓存的条件信息（如资源的最后修改时间或 ETag），服务器根据这些条件判断资源是否被修改。如果资源没有变化，服务器会返回 304 状态码，告知浏览器继续使用本地缓存。这样，浏览器就能避免重复下载相同的资源。
协商缓存主要依赖于以下两个 HTTP 头部字段：
- Last-Modified：资源的最后修改时间。
- If-Modified-Since ：浏览器在请求时，发送的上次缓存的
Last-Modified时间。 - ETag：资源的唯一标识符。
- If-None-Match ：浏览器发送的上次缓存的
ETag值。
2.2 Last-Modified 与 If-Modified-Since
Last-Modified 是服务器在响应中返回的资源最后修改时间，浏览器会将其保存在缓存中。在下一次请求时，浏览器会将该时间通过 If-Modified-Since 头部发送给服务器。如果资源没有发生变化，服务器返回 304 状态码，告知浏览器使用本地缓存。
Last-Modified: Tue, 01 Jan 2025 00:00:00 GMT
2.3 ETag 与 If-None-Match
ETag 是由服务器根据资源内容生成的一个唯一标识符，每次资源发生变化时，ETag 值也会变化。与 Last-Modified 不同，ETag 可以更精确地判断资源是否发生变化，因为它是根据资源内容生成的。
在请求时，浏览器会将上次缓存的 ETag 值通过 If-None-Match 发送给服务器，服务器根据这个值判断资源是否变化。如果没有变化，服务器返回 304 状态码。
ETag: "abc123"
2.4 协商缓存的优缺点
优点：
- 可以精确判断资源是否发生变化，避免不必要的下载。
- 相比强缓存，协商缓存能够更灵活地控制缓存的更新策略。
缺点：
- 每次请求都需要与服务器进行协商，即使资源没有变化，也需要进行一次请求（虽然返回的是 304 状态码，但依然会消耗一定的资源和时间）。
- 需要服务器支持处理
ETag或Last-Modified。
三、强缓存与协商缓存的优缺点对比
|--------------|-----------------------------------|-------------------------|
| 特性 | 强缓存 | 协商缓存 |
| 缓存时间 | 固定时间（通过 max-age 或 Expires 控制） | 通过资源是否变更动态判断 |
| 是否与服务器交互 | 不与服务器交互 | 需要与服务器协商（发送条件请求） |
| 使用场景 | 静态资源，如图片、字体、CSS 文件等 | 动态内容、API 请求等 |
| 控制粒度 | 较粗粒度，依赖时间或版本号 | 较细粒度，基于资源内容的标识符 |
| 性能 | 性能最好，零请求 | 每次请求需要进行条件判断，但能有效减少无效请求 |
四、结合使用强缓存与协商缓存
强缓存与协商缓存往往是结合使用的。
例如，静态资源（如图片、字体等）可以使用强缓存，而动态数据（如用户信息、订单详情等）则可以使用协商缓存。
推荐的实践方式：
- 对于资源变化较少且更新频率较低的静态文件（如图片、脚本、样式表），可以使用强缓存。
- 对于资源变化较频繁的文件或需要实时获取最新内容的接口，可以使用协商缓存。
- 可以通过合理设置
Cache-Control和ETag来实现两者的结合，进一步优化前端性能。
五、总结
缓存是提升性能的一个非常重要的技术点。理解强缓存和协商缓存的工作原理，并合理选择和配置缓存策略，可以大幅度提高网页加载速度，减少网络延迟，提升用户体验。通过合理地结合强缓存与协商缓存，可以实现高效且灵活的缓存策略，为用户提供更流畅的浏览体验。