浏览器缓存机制

对于一个数据请求来说，可以分为发起网络请求、后端处理、浏览器响应三个步骤，浏览器缓存可以帮助我们在第一步和第三步中优化性能。例如直接使用缓存，不发起请求，或者发起了请求但是后端存储的数据和前端一致，就没有必要再将数据传输回来，这样就减少了响应数据。

浏览器缓存分为两类：

强缓存：

如果资源没过期，就取缓存，如果过期了，则请求服务器。强缓存的规则主要看response header。

Cache-Control（规则可以同时多个存在）

1. private: jin浏览器可以缓存；
2. 浏览器和代理服务器都可以缓存（前端可认为private和public一样）；
3. max-age=xxx : 过期时间；
4. no-cache: 不进行强缓存；
5. no-store: 不强缓存，也不协商缓存。

所以判断该资源是否命中强缓存，就看response中Cache-Control的值，如果有max-age=xxx秒，则命中强缓存；如果Cache-Control的值是no-cache，说明没命中强缓存，是协商缓存。

response header中的Cache-Control,ETag,Last-Modified

协商缓存：

触发条件为Cache-Control的值为no-cache（不强缓存）；或者max-age过期了

1. ETag：每个文件有一个，改动了文件就变了，可以看似md5；
2. Last-Modified：文件的修改时间；

每次服务器返回的response header中的ETag和Last-Modified，在下次请求时，request header 就把这两个带上，但是改变了名字（ETag -> If-None-Match，Last-Modified -> If-Modified-Since），服务器把request header带过来的资源目前的标识与服务器中的进行对比，然后判断资源是否更改；

每次请求资源时，把用户本地资源的ETag同时带到服务端，服务端和最新资源做对比；如果资源没更改，返回304，浏览器读取本地缓存；如果资源有更改，返回200，返回最新的资源；

协商缓存无论结果，都需要向服务端发起请求，如果资源未更改时，返回的是header信息，size很小，如果资源有更新，还要返回body数据，size很大。

为什么要有 ETag

ETag 是服务器响应请求时，返回当前资源文件的一个唯一标识（由服务器生成），只要资源有变化，ETag就会重新生成；http 中 ETag 的出现是为了解决几个Last-Modified难解决的问题：

1. 有些文件也许会周期性的更改，但是它的内容并不改变（仅改变修改时间），这时不希望客户端认为这个文件被修改了，而重新请求；
2. 某些文件修改非常频繁，例如在秒以下的时间进行修改，If-Modified-Since能检查到的粒度是s级的，所以这种修改无法判断；
3. 某些服务器不能精准的得到文件的最后修改时间

用户行为对缓存的影响

1. 打开网页，地址栏输入地址： 查找disk cache 中是否有匹配，如果有则使用；如果没有则发起网络请求；
2. F5刷新：跳过强缓存规则，直接走协商缓存；Ctrl+F5；
3. 跳过所有缓存规则，和第一次请求一样，重新获取资源，发送的请求头部带有 Cache-Control: no-cache

如果什么缓存策略都设置，那么浏览器会采用一个启发式的算法，取响应头中的Date 减去 Last-Modified 值的 10% 作为缓存时间