浏览器 Cache

一. 强缓存

请求不会发送到服务器，浏览器直接返回缓存结果

1. expires - HTTP/1.0

response header

expires: Wed, 10 Oct 2020 09:51:00 GMT

2. cache-control - HTTP/1.1

• public：所有内容都将被缓存（客户端和代理服务器都可缓存）
• private：所有内容只有客户端可以缓存，默认为 private
• no-cache：客户端缓存内容，但是否使用缓存需要经过协商缓存来决定
• no-store：所有内容都不会被缓存
• max-age=xxx：缓存内容将在 xxx 秒之后失效

response header

cache-control: max-age=2592000

总结:

• 当 expires 和 cache-control 同时存在时，只有 cache-control 生效（优先级高）。
• 在某些不支持 HTTP/1.1 的环境下，expires 就会发挥用处，现阶段它的存在只是为了兼容性。

二. 协商缓存

如果请求没有命中强缓存，或者强缓存失效后，就需要向服务器发起请求，验证资源是否有更新

1. last-modified (服务器) 和 if-modified-since (浏览器)

last-modified 表示文件的最后修改日期，由服务器添加到 Response Header 中；if-modified-since 由浏览器添加到 Request Header 中，是上一次该资源的 last-modified 值。(秒级)

response header

last-modified: Fri, 20 Nov 2020 12:01:01 GMT

request header

if-modified-since: Fri, 20 Nov 2020 12:01:01 GMT

2. etag (服务器) 和 if-none-match (浏览器)

etag (文件指纹)，如 md5，由服务器添加到 Response Header 中，浏览器再次请求该资源时，会在 Request Header 中添加 if-none-match 头，值为上次 etag 的值。

总结:

• etag / if-none-match 的优先级要比 last-modified / if-modified-since 高。

三. 前端优化

• HTML 文件不设缓存
• CSS、JS以及图片等文件资源，可以设置一个较长的缓存有效期，比如一年，cache-control: max-age=31536000，只有当 HTML 文件引入的文件名发生变化时，才会去下载最新的资源文件，否则就一直使用缓存

参考：浏览器 & HTTP 缓存策略