浅谈浏览器缓存

前言

浏览器的缓存机制也就是我们说的HTTP缓存机制，其机制是根据HTTP报文的缓存标识进行的。

HTTP 缓存

缓存过程：

1. 第一次请求：不存在缓存结果和缓存标识，直接向服务器发送请求

2. 强缓存：存在该缓存结果和缓存标识，且该结果尚未失效，强制缓存生效，直接返回缓存

3. 协商缓存：存在缓存标识和缓存结果，但是已经失效，强制缓存失效，则使用协商缓存

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

流程：

1. 浏览器首先发送一个请求，让服务端在response header中返回请求的资源上次更新时间，就是last-modified，浏览器会缓存下这个时间。
2. 然后浏览器再下次请求中，request header中带上if-modified-since:[保存的last-modified的值]。根据浏览器发送的修改时间和服务端的修改时间进行比对，一致的话代表资源没有改变，服务端返回正文为空的响应，让浏览器中缓存中读取资源。

②. ETag和If-None-Match

流程：

1. 浏览器会先发送一个请求得到etag的值，然后再下一次请求在request header中带上if-none-match:[保存的etag的值]。
2. 通过发送的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实际上还是会走协商缓存。

参考

浏览器缓存看这一篇就够了