共计 2291 个字符，预计需要花费 6 分钟才能阅读完成。
前言
浏览器的缓存机制也就是咱们说的 HTTP 缓存机制，其机制是依据 HTTP 报文的缓存标识进行的。
HTTP 缓存
缓存过程：
- 第一次申请：不存在缓存后果和缓存标识，间接向服务器发送申请
- 强缓存：存在该缓存后果和缓存标识，且该后果尚未生效，强制缓存失效，间接返回缓存
- 协商缓存：存在缓存标识和缓存后果，然而曾经生效，强制缓存生效，则应用协商缓存
1. 强缓存
强制缓存就是向浏览器缓存查找该申请后果，并依据该后果的缓存规定来决定是否应用该缓存后果的过程
条件：Cache-Control 的 max-age 没有过期或者 Expires 的缓存工夫没有过期
后果：间接应用浏览器的缓存数据，不会再向服务器发送任何申请
①. Cache-Control
HTTP1.1 中启用 Cache-Control 来管制页面的缓存与否，Cache-Control 属性是在服务器端配置的，不同的服务器有不同的配置，应用的是绝对工夫概念。
Cache-Control 的属性设置：
- (1). max-age：设置缓存的最大的无效工夫，单位为秒（s）。max-age 会笼罩掉 Expires
- (2). s-maxage：只用于共享缓存，比方 CDN 缓存（s -> share）。与 max-age 的区别是：max-age 用于一般缓存，
而 s -maxage 用于代理缓存。如果存在 s -maxage, 则会笼罩 max-age 和 Expires - (3). public：响应会被缓存，并且在多用户间共享。默认是 public
- (4). private：响应只作为公有的缓存，不能在用户间共享。如果要求 HTTP 认证，响应会主动设置为 private
- (5). no-cache：指定不缓存响应，表明资源不进行缓存。然而设置了 no-cache 之后并不代表浏览器不缓存，而是在缓存前要向服务器确认资源是否被更改 (即协商缓存)
- (6). no-store：相对禁止缓存
- (7). must-revalidate：如果页面过期，则去服务器进行获取
目前 Cache-Control 申请字段被各个浏览器反对的较好，其优先级也比拟高，当和别的字段（如 Expires）一起用时，会笼罩其余字段。
②. Expires
缓存过期工夫，用来指定资源到期的工夫，是服务器端的具体的工夫点。也就是说，Expires=max-age + 申请工夫，须要和 Last-modified 联合应用。
Expires 是 HTTP/1 的产物，受限于本地工夫，如果批改了本地工夫，可能会造成缓存生效。
Expires 属性也是在服务端配置的。
2. 协商缓存
协商缓存就是强制缓存生效后，浏览器携带缓存标识向服务器发动申请，由服务器依据缓存标识决定是否应用缓存的过程。
条件：强制缓存 max-age 和 Expires 都过期了 (或都未设置)
后果：浏览器发送申请将缓存标识（Last-Modified、ETags）发送给服务器，校验（re-validate）缓存是否陈腐，而后依据新鲜度返回 304 或者 200
①. Last-Modified 和 If-Modified-Since
流程：
- 浏览器首先发送一个申请，让服务端在 response header 中返回申请的资源上次更新工夫，就是 last-modified，浏览器会缓存下这个工夫。
- 而后浏览器再下次申请中，request header 中带上 if-modified-since:[保留的 last-modified 的值]。依据浏览器发送的批改工夫和服务端的批改工夫进行比对，统一的话代表资源没有扭转，服务端返回注释为空的响应，让浏览器中缓存中读取资源。
②. ETag 和 If-None-Match
流程：
- 浏览器会先发送一个申请失去 etag 的值，而后再下一次申请在 request header 中带上 if-none-match:[保留的 etag 的值]。
- 通过发送的 etag 的值和服务端从新生成的 etag 的值进行比对，如果统一代表资源没有扭转，服务端返回注释为空的响应，通知浏览器从缓存中读取资源。
etag 可能解决 last-modified 的一些毛病，然而 etag 每次服务端生成都须要进行读写操作，而 last-modified 只须要读取操作，性能开销更大。
用户行为与禁止浏览器缓存
1. 用户行为对浏览器缓存的影响
① 关上网页，地址栏输出地址：查找 disk cache 中是否有匹配。如有则应用；如没有则发送网络申请。
② 一般刷新 (F5)：TAB 没有敞开，优先应用 memory cache(如果匹配的话)，其次是 disk cache。
③ 强制刷新 (Ctrl + F5)：浏览器不应用缓存，因而发送的申请头部均带有 Cache-control:no-cache(为了兼容，还带了 Pragma:no-cache), 服务器间接返回 200 和最新内容。
2. 禁止浏览器缓存
有些时候，咱们须要齐全禁止浏览器缓存，比方 vue 打包过后的 html，为了确保用户可能即便取得最新的 html，须要禁止浏览器缓存。
网上有一个 meta 配置 no-cache
<meta http-equiv="Expires" content="0" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Cache-control" content="no-cache" />
<meta http-equiv="Cache" content="no-cache" />but 实际上设置是有效的 (谷歌、火狐)，须要服务器端设置 response header 中的 cache-control 为 no-store，因为 no-cache 实际上还是会走协商缓存。
参考
浏览器缓存看这一篇就够了