浏览器缓存即HTTP缓存

一.缓存的原理

        用户第一次请求数据后浏览器会存储该数据，等到下一次用户再次向服务端请求同一个数据时，如果判断缓存命中则拦截请求，将之前在浏览器中存储的数据返回给用户，不用再向服务器发起数据请求（提高性能）。

        缓存的技术种类有很多，比如代理缓存、浏览器缓存、网关缓存、负载均衡器及内容分发网络等，它们大致可以分为两类:共享缓存和私有缓存。共享缓存指的是缓存内容可被多个用户使用，如公司内部架设的Web代理;私有缓存指的是只能单独被用户使用的缓存，如浏览器缓存 HTTP 缓存应该算是前端开发中最常接触的缓存机制之一，它又可细分为强制缓存和协商缓存。

二.浏览器缓存特点

1. 减少冗余数据的传递
2. 减少服务器的负担
3. 加快客户端加载网页的速度
4. 浏览器缓存主要分为2类， 强制缓存 和 协商缓存

二.强制缓存

        不会向服务器发送请求，直接从缓存中读取资源，在chrome控制台的network选项中可以看到该请求返回200的状态码;

三.强制缓存中header的参数（响应头）

 Expires: response header里的过期时间，浏览器再次加载资源时，如果在这个过期时间内，则命中强缓存.(现在不用，因为在加载资源时本身时间以分钟为单位，若时间设在1分钟内则无法设置 ，所以在HTTP新增的协议中有Cache-Control)

Cache-Control: 比如值设为max-age=300时，则代表在这个请求正确返回时间(浏览器也会记录下来)的5分钟内再次加载资源，就会命中强缓存。

cache-control除了该字段外，还有下面几个比较常用的设置值:

-no-cache: 不使用本地缓存。需要使用缓存协商，先与服务器确认返回的响应是否被更改，如果之前的响应中存在ETag，那么请求的时候会与服务端验证，如果资源未被更改，则可以游免重新下载

-no-store: 直接禁止浏览器缓存数据，每次用户请求该资源，都会服务器发送一个请求，每次都会下载完整的资源。

-public: 可以被所有的用户缓存，不仅可以给终端用户的浏览器缓存，还可以给CDN等中间代理服务器.

-private: 只能被终端用户的浏览器缓存，不允许CDN等中继缓存服务器对其缓存

Expires:设置以分钟为单位的绝对过期时间,设置相对过期时间,max-age指明以秒为单位的缓存时间

Expires 优先级比Cache-Control低,同时设置Expires和Cache-Control则后者生效

四.协商缓存:

        在使用本地缓存之前，需要向服务器发送请求，服务器会根据这个请求的request header的某些参数来判断是否命中协商缓存，如果命中，则返回304状态码并带上新的response header通知浏览器从缓存中读取资源;协商缓存可以解决强制缓存的情况下，资源不更新的问题。

五.协商缓存中header的参数

设置协商缓存: cache-control: -no-cache（不强制缓存）

Last-Modify 和 lf-Modify-Since:

①当浏览器第一次请求一个资源的时，服务器返回的header中会加上Last-ModifyLast-Modify是一个时间标识该资源的最后一次修改时间;

②当浏览器再次请求该资源时，request的请求头中会包含lf-Modify-Since，该值为缓存之前返回的Last-Modify。

③服务器收到lf-Modify-Since后，根据资源的最后修改时间判断是否命中缓存

Last-Modify的值是资源最后修改时间

Etag 和 lf-None-Match:

①服务器响应请求时，告诉浏览器当前资源在服务器的唯一标识(生成规则由服务器决定)。

②lf-None-Match: 发现资源具有Etage声明，则再次向服务器发送请求时会带上头If-None-Match (Etag的值)。

③当服务器收到请求后发现有头lf-None-Match 则与被请求资源的hash值进行比对，决定是否命中协商缓存;

Etag的值是文件对应的hash值(但是会加服务器大开销，这个hash是在服务器端需要生成的)【如果文件过大，用到弱验证方法】

Etag和Last-Modified的区别:

1.Etag要优于Last-Modified。Last-Modified的时间单位是秒，如果某个文件在1秒内改变了多次，那么他们的Last-Modified其实并没有体现出来修改，但是Etag每次都会改变确保了精度;

2.在性能上，Etag要逊于Last-Modified，毕竟Last-Modified只需要记录时间，而Etag需要服务器通过计算法来计算出一个hash值;

3.在服务器中 Etag 比 Last-Modify 的优先级更高。

六.浏览器缓存过程

1.浏览器第一次向服务器请求并且加载资源，服务器返回200，浏览器将资源文件从服务器上请求下载下来，并把response header及该请求的返回时间一并缓存;
2.当浏览器下一次加载资源时，先计算这一次加载资源的时间和上一次服务器返回200时的时间差，如果没有超过cache-control设置的max-age，则没有过期，命中强缓存，不会向服务器发送请求并且从本地缓存读取该文件，如果时间差超过了之前的设置的max-age，则向服务器发送header带有if-None-Match和lf-Modified-Since的请求
3.服务器收到请求后，优先根据Etag的值判断被请求的文件有没有做修改，若Etag值一致则没有修改，命中协商缓存，返回304;如果不一致则有改动，直接返回新的资源文件带上新的Etag值并返回200;

4.如果服务器收到的请求没有Etag值，则将If-Modified-Since和被请求文件的最后修改时间做比对一致则命中协商缓存，返回304;不一致则返回新的last-modified和文件并返回200;