浏览器缓存详解

1. 分享一篇讲的极其透彻的文章，仅做个人学习使用，如有侵权，我会立即删除   https://www.cnblogs.com/chengxs/p/10396066.html

2. 个人理解：

当需要请求服务器的某资源时，浏览器先根据http请求头的某些header去浏览器缓存中寻找是否强缓存有效，
若有效，则不请求服务器，直接从缓存中读取资源，否则，则根据http请求头中另外一些header请求服务器，
询问服务器缓存资源是否有更改，若没有更改，则直接从缓存中读取资源，区别是，此次是协商缓存，需要请求服务器
而强缓存的判断不需要请求服务器，若两种缓存都未命中，则请求服务器资源，读取完毕后浏览器将其存放到浏览器缓存中


简单介绍：浏览器与服务器通信方式为应答模式：浏览器发出请求————服务器响应请求.
当浏览器第一次发出请求时，服务器返回结果以及缓存标识，决定是否缓存结果，
若是，则浏览器将此次请求得到的结果以及缓存标识存入浏览器缓存中.
也就是说每次浏览器请求得到的结果和缓存标识都会存入浏览器缓存
每次浏览器发出请求，都会先在浏览器缓存中寻找是否已经存在结果和浏览器缓存

具体缓存规则，根据是否需要向服务器发出请求分为强缓存以及协商缓存：
1. 强缓存就是向浏览器缓存查找请求结果，并根据结果的缓存规则决定是否使用该缓存
分为三种情况：(1) 不存在缓存结果，也不存在缓存标识，说明强制缓存失效，需要向服务器发送请求得到结果
(2) 存在缓存标识，但缓存结果失效，那么此时需要进行协商缓存
(3) 存在缓存标识，也存在缓存结果有效，那么直接从缓存中读取资源

问：那么强缓存的缓存规则是什么？
答：在服务器返回的响应头中已经包含缓存规则，控制强制缓存的header为expires和cache-control，后者优先级更高.

expires：是http 1.0中控制缓存的字段，其值为服务器返回结果的失效时间，即再次发送请求时，如果浏览器时间还未到
expires规定的时间，那么就说明缓存结果可以直接使用.
但是在http 1.1中，expires已经被cache-control所替代，因为expires是将客户端时间和其值【失效时间】作对比，如果
客户端和服务器因为时区等差异造成某些误差，那么会导致强制缓存失效.

cache-control：http 1.1中最重要的规则，主要取值有：
    * public：所有内容都被缓存【客户端和服务器均可缓存】
    * private：内容只有浏览器可以缓存，这也是默认取值
    * no-cache：客户端缓存，但需要协商缓存验证是否需要使用缓存
    * no-store：所有内容都不缓存，既不使用强制缓存，也不使用协商缓存
    * max-age=xxx 缓存内容将在多长时间后失效

扩展：缓存存放在哪里？
答：1. from memory cache 即存储在内存中，读取快速，但进程关闭就会失效
2. from disk cache 存储在硬盘中，读取较慢
一般js和图片都放在内存中，css等文件放在硬盘中缓存.

2. 协商缓存就是强缓存失效后，浏览器携带缓存标识向服务器请求，由服务器根据缓存标识判断是否使用缓存的过程.
分两种情况：(1) 缓存未更新，返回304，直接使用缓存
(2) 资源更新，返回新的结果，状态码200，浏览器将新的结果和标识存入浏览器缓存

我们知道强缓存是根据header中的expires和cache-control来判断，而协商缓存是根据字段：
(1)last-modified、if-modified-since
(2)etag和if-none-match 来判断

last-modified根据英文翻译我们得知这是最近一次浏览器得到服务器结果的时间，在下一次请求时，
if-modified-since会携带last-modified的值，与服务器该资源最近一次被修改的时间作对比，若时间不一致，
则重新返回资源，否则就使用缓存结果.

etag是对资源的唯一标识，如果资源更新就会更改此标识，每次浏览器请求得到对应资源的etag，在下一次请求时会将
上一次请求得到的etag赋给if-none-match发送给服务器，与服务器对应资源的etag作对比，若一致，则使用缓存，
否则重新请求结果.

这两种方式都可以，但etag方式优先级更高.