浏览器的缓存机制

浏览器的缓存机制
定义: 浏览器的缓存机制就是把一个请求过的web资源拷贝一份副本存储存在浏览器中;缓存会根据进来的请求保存输出内容的副本,当一下个请求到来的时候,如果是相同的url,缓存会根据缓存机制决定是否直接使用副本响应访问请求,还是向服务器再次发送请求.比较常见的就是浏览器会缓存访问过的页面,当再次访问这个URL地址的时候,如果网页没有更新就不会再次下载网页,而是直接使用本地缓存的网页;只有当网站明确标识已更新,浏览器才会再次下载网页

Cache-Control (与浏览器缓存机制有关的属性)
public
仅体现在响应头,通知浏览器可以无条件的缓存该响应 客户端和代理服务器都可以缓存该资源；

private
仅体现在响应头，通知浏览器只针对单个用户缓存响应. 且可以具体指定某个字段.如private –“username”

no-cache
请求头:告诉浏览器回去服务器取数据,并验证你的缓存
响应头:告诉浏览器,一定要回服务器校验,不管有没有缓存数据.如果没有确定没有被改,可以使用缓存中的数据

no-store
告诉浏览器任何情况下都不要被缓存

meta http-equiv
该属性相当于http头文件作用,可以向浏览器返回一些有用的信息,以帮助正确和精确的显示内容,http-equiv属性的值可以有content-type、expires、refresh等等。

浏览器缓存机制的好处
减少网络宽带产生较小的流量,减轻服务器的压力,渲染缓存的页面,就减少了对源服务器的访问,提高响应页的速度,用户再次打开不用等待时间过长

1.减少网络带宽消耗
带宽如果消耗过多,那么我们的服务器配置就得升级,升级就意味着花钱, 使用的浏览器缓存之后,就可以减少网络流量,降低成本

2.降低服务器的压力
使用浏览器缓存之后，除第一次访问需要向服务器请求网站全部资源，后续访问可以重复使用浏览器本地缓存，减少对服务器的请求，间接降低服务器的压力，同时，搜索引擎的爬虫也会根据缓存过期机制降低抓取的频率，也可以降低服务器压力。

3.减少网络延迟,加快网页加载速度
浏览器缓存 web资源后，减少网络请求，可以更快速地获取到服务器返回数据，同时使用浏览器缓存内的文件比服务器获取快很多，所以网页加载速度明显快很多。

缓存的规则
对于浏览器端的缓存来讲，这些规则是在 http 协议和 meta 标签中定义的。分别从两个维度：新鲜度和校验值，规定浏览器是否可以直接使用缓存中的副本，还是直接从服务器获取最新资源。

新鲜度
浏览器缓存的有效期,缓存必须满足俩个条件,浏览器才会认为是最新的,可以直接使用

1.含有完整的过期时间控制头信息,并在有效期内
2.浏览器已经使用过这个副本,并且在会话中已经检查过新鲜度了

检验值
服务器返回资源的时候，会在响应头信息中带上资源实体标签 Entity Tag，可以用来作为浏览器再次请求过程的校验标识，如果发现校验标识不匹配，说明资源已经被修改过或过期，浏览器需要重新请求资源。

如何控制缓存
缓存规则可以设置在html的meta标签，也可以设置在http协议头内。

前端的meta标签
在html页面中加入缓存设置

上边代码，禁止浏览器缓存，浏览器每次访问网页都要去服务器请求。事实这种禁用缓存形式作用有限：

只有IE浏览器才能标识这段 meta 的含义，其他主流浏览器仅认识 “Cache-Control:no-store” 的 meta 标签。
在IE浏览器中，并不一定添加 pragma，但是会让当前网页每次都会向服务器发送请求。

HTTP协议头
各种类型之间的关系和区别：

1.Cache-Control 与 Expires：它两作用一样，都表明当前资源的有效期，控制浏览器是取缓存还是直接向服务器获取，
2.Cache-Control可以设置的更细致，如果同时设置，它的优先级高于Expires。
3.Last-Modified / ETag 与 Cache-Control / Expires：配置Last-Modified/ETag的情况下，浏览器再次访问URL的资源，还是会发送请求到服务器，询问文件是否已经修改，如果没有，服务器会给浏览器返回304，浏览器直接从本地缓存中取就好了，反之，服务器会直接向浏览器返回数据。Cache-Control / Expires 检测本地缓存是否还在有效期内，在有效期内，直接使用本地缓存，阻止发送请求。如果同时设置，Cache-Control / Expiress 优先级更高。一般情况下，两者配合使用，因为即使服务器设置缓存时间, 当用户点击“刷新”按钮时，浏览器会忽略缓存继续向服务器发送请求，这时Last-Modified/ETag将能够很好利用304，从而减少响应开销。

Last-Modified 与 ETag：ETag主要是为了解决Last-Modified比较难解决的问题：

1.Last-Modified标注的最后修改只能精确到秒级,只有一个Last-Modified,如果1秒内多次更改是无法准确地标准文件修改的时间 , 但是如果多了一个ETag,不管你1秒内发送多少次更改请求,他都会以ETag是否变化为基准去返回更改的数据
2.有些文件他会自动生成,这些文件都是固定的一些文件,也就是说整体上内容是没有发生变化的, 但是它的Last-Modified发生的变化 , 导致他还会去发请求拿数据,而不是去找缓存. 如果加上Etag他就会去对比内容是否发生的变化,如果没有变化就走缓存
3.ETag是服务器自动生成或开发者生成对应资源在服务器的唯一标识符，能够更加精准控制缓存。两者可以一起使用，服务器优先验证ETag，一致时，才会继续比对Last-Mofifed，才决定是否要返回304。(不具有跳转的含义,表示资源未修改,重定向已存在的缓冲文件, 也称缓存重定向,用于缓存控制)

ETag: 告诉浏览器当前资源在服务器的唯一标识符(生成规则由服务器决定)
Last-Modified: 告诉浏览器这个资源最后的修改时间.服务器将资源传递给客户端时,会将资源最后更改的时间以“Last-Modified: GMT”的形式加在实体首部上一起返回给客户端【只能精确到秒级，如果某些文件在1秒钟以内，被修改多次的话，它将不能准确标注文件的修改时间】

浏览器缓存分为:强缓存和协商缓存
强缓存
这里的’强’是强制的意思,当浏览器去请求某个文件的时候,服务端就在响应头里面对该文件做了缓存配置,缓存的时间,缓存类型都由服务端控制,具体表现为:

cache-control: max-age public private no-cache no-store

max-age:表示缓存的时间

public表示可以被浏览器和代理服务器缓存，代理服务器一般可用nginx来做。

immutable 表示该资源永远不变,但是实际上该资源并不是永远不变,设置的意思是为了让用户在刷新页面的时候不要去请求服务器, 如果设置了cache-control:max-age,public这属于强缓存,每次用户打开页面的时候都会去判断缓存是否过期,没有过期就从缓存中读取数据, 但是如果我们去点击浏览器左上角的刷新按钮去刷新页面,这时候就算资源没有过期,浏览器也会直接去请求服务器,这就是额外的请求消耗了,这时候就想当于是走协商缓存的流程了, 如果在刚才的基础上加一个immutable的话,就算用户刷新页面,浏览器也不会发起请求,浏览器会直接从本地磁盘或者内存中读取缓存并返回200状态

强缓存总结:
1.cache-control: max-age=xxx，public
客户端和代理服务器都可以缓存该资源
客户端在xxx秒的有效期内,如果有请求该资源的需求的话就直接读取缓存,statu code:200,如果用户做了刷新操作,就向服务器发起http请求

2.cache-control: max-age=xxx, private
只让客户端可以缓存该资源;代理服务器不缓存
客户端在xxx秒内直接读取缓存,statu code:200

3.cache-control:max-age=xxx,immutable

客户端在xxx秒的有效期内,如果有请求该资源的需求的话就直接读取缓存,statu code:200,即使用户做了刷新操作,也不向服务器发起http请求

4.cache-control:no-cache
跳过设置强缓存,但是不妨碍设置协商缓存;一般如果你做了强缓存,只有在强缓存失效了才走协商缓存的,设置了no-cache就不会走强缓存了,每次请求都会询问服务端

5.cache-control:no-store

不缓存,这个会让客户端,服务端都不缓存,也就没有所谓的强缓存,协商缓存

协商缓存
上面说到的强缓存就是给资源设置个过期时间，客户端每次请求资源时都会看是否过期；只有在过期才会去询问服务器。所以，强缓存就是为了给客户端自给自足用的。而当某天，客户端请求该资源时发现其过期了，这是就会去请求服务器了，而这时候去请求服务器的这过程就可以设置协商缓存。这时候，协商缓存就是需要客户端和服务器两端进行交互的。

怎么设置协商缓存
response header里面的设置

etag每个文件有一个,改动文件了就变了,就是个文件hash,每个文件唯一,就像用webpack打包的时候,每个资源都会有这个东西

last-modified：文件的修改时间，精确到秒

每次请求返回来 response header 中的 etag和 last-modified，在下次请求时在 request header 就把这两个带上，服务端把你带过来的标识进行对比，然后判断资源是否更改了，如果更改就直接返回新的资源，和更新对应的response header的标识etag、last-modified。如果资源没有变，那就不变etag、last-modified，这时候对客户端来说，每次请求都是要进行协商缓存了，即：

协商缓存步骤总结:
请求资源时,把用户本地该资源的etag同时带到服务端,服务端和最新资源对比
如果资源没更改，返回304，浏览器读取本地缓存。
如果资源有更改，返回200，返回最新的资源。

浏览器是如何判断缓存是否过期
应该属根据Response Header里面的Cache-Control 和 Expires这俩个属性,当俩个都存在时,Cache-Control优先级较高.

不能被缓存的请求
post 请求无法被缓存。
需要根据cookie、认证信息等决定输入内容的动态请求不能被缓存。
http响应头中不包含Last-Modified/ETag，也不包含Cache-Control/Expiress的请求无法被缓存。
http信息头明确设置Cache-Control:no-cache,pragma:no-cache或Cache-Control:max-age=0浏览器不缓存时。

流程图

总结
1. 浏览器缓存分为强缓存和协商缓存 , 如果资源没有过期,即使你文件更改也会直接走缓存,这就是强缓存,遇到这种情况就该强刷新了.
2. 协商缓存主要还是看ETag和Last-Modified,根据上面得流程图返回304的情况,它就会直接去读取浏览器缓存.(304:不具有跳转的含义,表示资源未修改,重定向已存在的缓冲文件, 也称缓存重定向,用于缓存控制)