浏览器缓存

浏览器缓存

归纳关于浏览器缓存的知识，主要讲浏览器请求资源流程，强弱缓存，浏览器资源的存放位置

一、请求资源流程

如下网上找的图：

浏览器向服务器请求某一资源时，会先判断本地有无该资源缓存，如果已有缓存，则获取该资源缓存的 header 信息，根据 header 中的 Control 和 Expires （即强缓存）来判断是否过期。这一时刻是没有向服务器发出请求的。

若显示已过期，浏览器会向服务器发送请求，通过 header 中的 Etag 和 Last-Modified（协商缓存）让服务器验证。若不需更新资源，返回状态码 304；若需要更新，则返回最新资源和状态码 200

二、强弱缓存

浏览器缓存主要分为强缓存（也称本地缓存）和协商缓存（也称弱缓存）。

	http1.1	http1.0
强缓存	Cache-Control	Expires
协商缓存	Etag/If None Match	Last Modify/If Modify Since

（1）强缓存

强缓存是利用 http 头中的 Expires 和 Cache-Control 两个字段来控制的，用来表示资源文件在本地的缓存时间。

Expires

Expires （实体首部）是 http1.0 的规范，它的值是一个绝对时间的GMT格式的时间字符串，代表资源失效时间。

格式： Expires：Fri, 19 Apr 2019 01:34:53 GMT

Cache-Control

Cache-Control （通用首部）是 http1.1 的规范，主要是利用该字段的 max-age 值来进行判断缓存时间，是一个相对时间。

格式： cache-control: max-age=315360000，表示资源可以缓存被缓存的最长时间为 315360000 秒。

如果同时出现 Cache-Control:max-age 和 Expires，那么 max-age 优先级更高，覆盖后者。

Cache-Control 常用字段：

字段	说明
max-age	缓存存在时间
no-cache	可以在本地和代理服务器缓存，但是这个缓存要服务器验证才可以使用
no-store	彻底禁用缓冲，每次都从服务器获取
public	表明响应可以被任何对象（包括：发送请求的客户端，代理服务器，等等）缓存
private	表明响应只能被单个用户缓存，不能作为共享缓存（即代理服务器不能缓存它）,可以缓存响应内容

这里只有 max-age 、 no-cache 和 no-store 会覆盖 Expires 的缓存策略。

（2）协商缓存

协商缓存就是由服务器来确定缓存资源是否可用，所以客户端与服务器端要通过某种标识来进行通信，从而让服务器判断请求资源是否可以缓存访问。

涉及到两组header字段：Etag 和 If-None-Match、Last-Modified 和 If-Modified-Since。不像强缓存优先级高会覆盖低的，这里的优先级是指判定的先后顺序而不是覆盖。

Last-Modify/If-Modify-Since

Last-Modify（实体首部）/If-Modify-Since（请求首部）是 http1.0 的规范，格式：Last-Modify: Fri, 19 Apr 2019 01:34:53 GMT

浏览器第一次请求一个资源的时候，response header 会加上 Last-Modify，Last-modify 是一个时间标识该资源的最后修改时间。

当浏览器再次请求该资源时，request 的请求头中会包含 If-Modify-Since，该值为缓存之前返回的 Last-Modify。服务器收到If-Modify-Since 后，根据资源的最后修改时间判断是否命中缓存。

如果命中缓存，返回304，则不会返回资源内容，并且不会返回 Last-Modify。

Etag和If-None-Match

Etag（响应首部）/If-None-Match（请求首部）是 http1.1 的规范，返回的是一个校验码，保证每一个资源是唯一的，格式： Etag：22FAA065-2664-4197-9C5E-C92EA03D0A16。

当资源被缓存时，服务器返回的 header 上有 Etag。当资源文件向服务器确认缓存是否可用时，会向服务器发送一个 request header 带有 If-None-Match 字段，值为当前文件的 Etag。服务器根据浏览器上送的If-None-Match 值来判断是否命中缓存。

与 Last-Modified 不一样的是，当命中缓存，服务器返回 304 Not Modified 的响应时，由于 ETag 重新生成过，response header 中还会把这个 ETag 返回，即使这个 ETag 跟之前的没有变化。

重点是，Etag 的优先级高于 Last-Modify，同时存在则优先判断 Etag，再判断 Last-Modify ，最后才决定是否返回304

三、浏览器资源的存放位置

状态	类型	说明
200	form memory cache	不请求网络资源，资源在内存当中，一般脚本、字体、图片会存在内存当中
200	form disk ceche	不请求网络资源，在磁盘当中，一般非脚本会存在硬盘当中，如css等
200	资源大小数值	从服务器下载最新资源
304	报文大小	请求服务端发现资源没有更新，使用本地资源

浏览器默认的缓存，一般脚本、字体、图片是放在内存内的，因为可能随时会执行；而一般非脚本会存在硬盘当中，如css，因为css样式加载一次即可渲染出网页。

但是内存里的缓存会因为进程的结束或者说浏览器窗口的关闭而被清除，而存在硬盘里的缓存才能够被长期保留下去。如果关闭浏览器再打开，脚本文件就会被存在硬盘中。

所以，服务器返回200也就是内存重新缓存脚本文件等，硬盘重新缓存非脚本文件。

顺带一提，浏览器普通刷新就是略过强缓存用协商缓存确认，而强制刷新则是直接向服务器请求资源。