浏览器缓存

[bibi7]

关于缓存

所有的资源都从服务器拉，如果在大量资源的情况下，造成的结果就是可能会造成一个比较长的的等待时间，从优化的角度上来说是不太能忍的_(:з」∠)_，所以为了提高页面的访问速度，在进行资源访问的时候，浏览器会根据资源返回的header头来进行相应的缓存设置。可能采用的是强缓，也可能会采用协商缓存。

强制缓存

返回的header头会包含着一些有关于缓存机制的描述信息，客户端直接根据描述信息进行操作（如果缓存命中则返回200），其中和强制缓存相关的字段为Expires和Cache-Control。这两个字段主要是用来区分缓存的过期时间，具体区别如下：

Expires是http1.0的规范，格式是一个GMT时间格式的字符串，如Sun Jun 03 2018 14:47:26 GMT，是服务器返回的资源到期时间，如果请求的时间在该时间之前则视为有效。但一个隐藏的问题是，该时间是由服务端产生的， 所以可能会和客户端的时间存在着误差。

Cache-Control是http1.1的规范，常见的值主要有private，public，no-cache，max-age，no-store。

type	description
private	只允许终端用户缓存
public	所有用户都可以缓存，包括终端用户和CDN
no-cache	不使用本地缓存，只使用协商缓存
max-age	值为一个数字，缓存内容将在一定的时间后失效
no-store	禁止缓存，每一次请求都从服务器拉资源下来

协商缓存

协商缓存和强制缓存不一样，具体的区分为，协商缓存需要判断改缓存是否可用。
协商缓存都是由服务器来确定缓存资源是否可用的，所以客户端与服务器端要通过某种标识来进行通信，从而让服务器判断请求资源是否可用。
主要涉及到以下四个字段：Last-Modified，If-Modified-Since，Etag，If-None-Match

type	description
Last-Modified	为一个GMT格式的时间， 在浏览器第一次访问一个资源时，服务器在返回这个资源的同时，在响应头的header加上Last-Modified，这个header表示这个资源在服务器上的最后修改时间
If-Modified-Since	当再次访问该资源时，请求头上会包含该字段，值为上次缓存下来的值，服务器获取该值并进行比对，从而判定资源是否已被更改，如果资源被改动则返回资源并且状态码为200，如果资源尚未改动，则返回304，浏览器直接从缓存加载资源
Etag	与上文的标识符为时间不同，etag的标识符为一串由服务器规则生成的字符，与上两者的区别主要在于标识符的不同，其余一样
If-None-Match	同上

其他的一些该注意的点

1.强制缓存的优先级比协商缓存高。
2.Etag和Last-Modified可同时存在，并且优先检测Etag，再检测Last-Modified

[bibi7]

除了强制缓存和协商缓存，最好也需要了解一下缓存位置。
四种位置按照优先级读取：

1. Service Worker
2. Memory Cache
3. Disk Cache
4. Push Cache

详见
from disk or from memory