从新学习浏览器缓存

浏览器如何缓存资源？

首先缓存按照位置能够分为：service worker、memory cache、disk cache

memory cache

顾名思义，在内存中缓存资源。 事实上全部的请求都会被内存缓存下来，memory cache 的特色是： 时间短——tab 关闭后就会失效； 容量有限，超过容量以后缓存也会失效； 控制权在浏览器，先后端没办法干涉。

disk cache

硬盘缓存。 也能够叫作 http 缓存，由于它的缓存规则严格遵照 http 头部规范。 disk cache 的控制权在后端，disk cache 能够被分为强缓存和协商缓存。

强缓存

强缓存有两个相关字段：

Expires：

这是一个响应头，它的值是一个 http 时间戳，表明在此时间以后，资源会过时。

例如：Expires: Wed, 21 Oct 2015 07:28:00 GMT

注意：

1. 若是设置了一个无效的日期，表明资源已通过期。
2. 若是在 Cache-control 中设置了 max-age 或者 s-max-age ，那么 Expires 会被忽略。

Cache-control：

这是一个请求和响应中通用的消息字段，经过指定指令来实现缓存。指定指令是单向的，也就是说，请求中设置了，不必定响应中也设置。

多个指令用逗号分隔。

请求指令以下：

//［到期］缓存的最大周期，时间是相对于请求的时间
Cache-Control: max-age=<seconds>
// [可缓存性]强制要求进行协商缓存
Cache-control: no-cache  
//［可缓存性］不缓存任何请求或响应的内容
Cache-control: no-store 
复制代码

响应指令以下：

Cache-Control: max-age=<seconds>
//［从新验证和从新加载］若是验证过时了，须要进行协商缓存
Cache-control: must-revalidate
Cache-control: no-cache
Cache-control: no-store
//［可缓存性］能够被任何对象（客户端、代理服务器）缓存
Cache-control: public
//［可缓存性］只能被单个用户缓存，不能做为共享缓存（好比代理服务器不能缓存）
Cache-control: private
复制代码

协商缓存

协商缓存即条件请求，不知足条件不缓存。

Last-Modified 、If-Modified-Since 、If-Unmodified-Since

Last-Modified 是响应头，包含服务器认定的资源作出修改的时间。精确度比 Etag 低。

If-Modified-Since 、If-Unmodified-Since 在条件请求中会使用 Last-Modified 的值。

• 对于 GET、HEAD 请求，若是请求的资源从 If-Modified-Since 那个时间以后没有被修改过，就返回一个不带消息主体的 304 ，不然返回 200。

• 对于 POST 、PUT 或其余 non-safe 方法的请求，若是资源从 If-Unmodified-Since 以后被修改了，就会返回 412 错误。

Etag 、 If-Match 和 If-None-Match

Etag 是响应头，是资源的特定版本标识符，可让缓存更高效，同时能够节省带宽。由于资源内容若是没变，web 服务器不须要发送完整的响应。

If-Match 和 If-None-Match 是请求头，值是从 Etag 中拿到的。

与 If-Modified-Since 一同使用时，If-None-Match 优先级更高。

两个例子说明 Etag 的用途：

一、POST PUT DELETE 等，返回 412 ，避免“空中碰撞”

好比用户 a 编辑 wiki 时，当前的文档内容响应中有：

Etag ："33a64df551425fcc55e4d42a148795d9f25f89d4"
复制代码

更改了文档，保存时， POST 请求将以前的 Etag 放入 If-Match 中，用来检查是否保存的是最新版本：

If-Match: "33a64df551425fcc55e4d42a148795d9f25f89d4"
复制代码

若是不匹配，意味着文档已经被另外一我的编辑了，抛出 412 错误。

二、GET HEAD ，判断客户端资源是否可用

若是用户请求里带着 Etag 再次访问给定的 url ，被提示资源过时了且不可用，客户端就把 Etag 放在 If-None-Match 中：

If-None-Match: "33a64df551425fcc55e4d42a148795d9f25f89d4"
复制代码

服务器将客户端的 If-None-Match 带来的值与当前资源的 Etag 进行比较，若是匹配，服务器将返回不带任何内容的 304 状态码。

service worker

memory cache 没法控制，disk cache 只能经过设置头部信息，由浏览器内部进行判断。

但经过 service worker 的 api ，咱们能够控制缓存，包括数据、静态资源、甚至拦截网络请求。

service worker 操做的缓存能够在 application -> cache storage 中看到，除非容量超过限制或者手动清除了，不然永久存在。