浏览器缓存

东华帝君
68 阅读4分钟

1. 响应头设置 cache-control 设置 max-age

image.png

image.png

image.png

2.响应头 expires 设置缓存过期时间，在过期时间之前重复请求，无需访问服务器

image.png

image.png

image.png

3.Etag

客户端

请求头中携带 If-None-Match,如果缓存中有Etag就取缓存，没有就传null 返回首先判断是否返回304 ，如果返回304，就直接从本地里面获取缓存，如果正常返回，从返回值里获取Etag和数据，存储到localStorage中

image.png

服务器

image.png

image.png

4.lastModified

客户端

客户端缓存第一次请求返回的last-modified,在第二次请求时，通过header携带IF-Modified-Since属性给服务端，服务端通过比较，如果请求的 if-modified-since > 资源最后修改时间 ，直接返回304

image.png

image.png

服务端

image.png

了解这几个缓存字段的区别对前端性能优化很重要。下面这个表格汇总了它们的核心特性，方便你对比掌握。

特性维度Cache-Control: max-ageExpiresETagLast-Modified
​​HTTP版本​​HTTP/1.1HTTP/1.0HTTP/1.1HTTP/1.0
​​缓存类型​​强缓存强缓存协商缓存协商缓存
​​作用描述​​规定资源在多少秒（相对时间）内缓存有效规定资源在哪个绝对时间点之前缓存有效服务器生成的资源唯一标识符（如内容哈希值）服务器声明的资源最后修改时间
​​值类型​​相对时间（秒），例如 max-age=3600绝对时间（GMT格式），例如 Expires: Wed, 21 Oct 2025 07:28:00 GMT唯一标识字符串，例如 ETag: "33a64df551425fcc55e"时间戳（GMT格式），例如 Last-Modified: Tue, 06 Jun 2023 06:04:45 GMT
​​浏览器请求行为​​在max-age设定时间内，​​不发送请求​​，直接使用缓存在当前时间超过Expires时间前，​​不发送请求​​，直接使用缓存总是​​发送请求​​，由服务器验证ETag决定是否使用缓存（返回304或200）总是​​发送请求​​，由服务器验证最后修改时间决定是否使用缓存（返回304或200）
​​优先级​​高（与Expires同时存在时，​​max-age会覆盖Expires​​）低高（与Last-Modified同时存在时，​​服务器优先验证ETag​​）低
​​主要优势​​相对时间，避免因客户端与服务器时间不同步导致的缓存判断错误语法简单，易于理解能精准感知​​资源内容的变化​​，避免基于修改时间判断的固有缺陷语法简单，易于理解
​​主要劣势​​不适用于HTTP/1.0环境依赖客户端时间准确，若设置时间过长易忘记，可能导致过期“浪涌”服务器生成有开销，在集群服务器上需确保ETag生成算法一致精度仅为秒级，无法识别1秒内的多次修改；文件时间改变但内容未变时无效

💡 核心概念与工作流程

理解表格内容后，掌握以下几点能让你更得心应手地应用它们：

  1. ​​强缓存 vs. 协商缓存​​：这是HTTP缓存的两大策略。

    • ​​强缓存​​（由 Cache-Control: max-age和 Expires控制）：浏览器在缓存有效期内不会与服务器通信，直接使用本地缓存。状态码为 200 (from disk cache)或 200 (from memory cache)。
    • ​​协商缓存​​（由 ETag/If-None-Match和 Last-Modified/If-Modified-Since控制）：浏览器会向服务器发送请求，并携带验证字段（如 If-None-Match）。如果资源未变，服务器返回 304 Not Modified，浏览器使用缓存；如果已变，则返回 200和新资源。

  2. ​​优先级规则​​：当多个字段同时出现时，浏览器和服务器会遵循特定的优先级。

    • 在强缓存字段中，​​Cache-Control: max-age的优先级高于 Expires​​。
    • 在协商缓存字段中，​​ETag的优先级高于 Last-Modified​​。服务器会优先检查 If-None-Match，再检查 If-Modified-Since（如果 If-None-Match未提供）。

  3. 实际应用建议

    • ​​对于频繁变动且需要及时更新的资源（如HTML页面）​​：可设置为 Cache-Control: no-cache或 max-age=0，结合 ETag或 Last-Modified使用协商缓存。
    • ​​对于长期不变的静态资源（如带哈希指纹的JS、CSS、图片）​​：可设置较长的强缓存，例如 Cache-Control: max-age=31536000（一年）。由于文件名随内容变化，可放心设置长缓存。
    • ​​现代Web开发首选​​：​​优先使用 Cache-Control: max-age来控制强缓存，优先使用 ETag进行协商缓存验证​​。Expires和 Last-Modified更多是为了向下兼容。
avatar
文章
阅读
粉丝