浏览器缓存浅析

​ 浏览器缓存就是把一个已经请求过的web资源（如html页面，图片，JS，数据）拷贝一份放在浏览器中。缓存会根据进来的请求保存输入内容的副本。当下一个请求到来的时候，如果是相同的URL，浏览器会根据缓存机制决定是直接使用副本响应访问请求还是向源服务器再次发起请求。

使用缓存的原因

（1）减少网络带宽消耗：当web缓存副本被使用时，只会产生极小的网络流量，可以有效降低运营成本。
（2）降低服务器压力：给网络资源设定有效期之后，用户可以重复使用本地缓存，减少对源服务器的请求，简介降低了对服务器的压力，同时搜索引擎的爬虫机 器人也能根据过期机制降低爬取的频率，也能有效降低服务器压力。
（3）减少网络延迟：缓存的使用可以明显加快页面打开速度，达到更好的用户体验。

浏览器的缓存机制

对于浏览器的缓存来讲，这些规则是在HTTP协议头部和HTML页面的Meta标签中定义的。他们分别从新鲜度和校验值两个维度来规定浏览器是否可以直接使用缓存中的副本，还是需要去源服务器获取新版本。

过期机制：指的是缓存副本的有效期。一个缓存的副本必须满足以下条件，浏览器会认为它是有效的，足够新的：
1.含有完整的过期时间控制头信息（HTTP协议报头），并且仍在有效期内
2.浏览器已经使用过这个缓存的副本，并且会在一个会话中已经检查过新鲜度(即服务器上的资源是否发生改变)
满足以上两种情况的一种，浏览器会直接从缓存中获取副本进行渲染

校验值（验证机制）：服务器返回资源的时候有时在控制头信息带上这个资源的实体标签Etag(Entity Tag),它可以用来作为浏览器再次请求过程中的校验标识，如果发现校验标识不匹配，说明资源已经被修改或者过期，浏览器需要重新获取资源内容。

当客户端需要请求一个服务端资源的时候,会率先检查浏览器中是否有缓存,没有则直接调取接口，若有,则会检查缓存是否过期,判断是否过期的方法有两种。

1. Expires(到期时间)(http1.0规则下的响应头)

​ 如果服务端返回的response header中含有 Expires字段,且这个字段应该是一个时间戳,类似

Expires: Wed, 25 Oct 2019 16:48:00 GMT

​ 如果客户端此次发送请求的时间在Expires之前,则会直接触发缓存,不再去发起请求.

不过Expires 是HTTP 1.0的东西，现在默认浏览器均默认使用HTTP 1.1，所以它的作用基本忽略。

2. Cache-Control(缓存控制)(http1.1规则下的响应头)

   Cache-Control与Expires的作用一致，都是指明当前资源的有效期，控制浏览器是否直接从浏览器缓存取数据还是重新发请求到服务器取数据。只不过Cache-Control的选择更多，设置更细致，如果同时设置的话，其优先级高于Expires。

Cache-Control同样是服务端返回的一个响应头,他有几个选项可供使用:

指令	作用
Public	指示响应可被任何缓存区缓存。
Private	指示对于单个用户的整个或部分响应消息，不能被共享缓存处理。 这允许服务器仅仅描述当用户的部分响应消息，此响应消息对于其他用户的请求无效
no-cache	指示请求或响应消息不能缓存
no-store	用于防止重要的信息被无意的发布。在请求消息中发送将使得请求和响应消息都不使用缓存
max-age	指示客户机可以接收生存期不大于指定时间（以秒为单位）的响应。
min-fresh	指示客户机可以接收响应时间小于当前时间加上指定时间的响应。
max-stale	指示客户机可以接收超出超时期间的响应消息。如果指定max-stale****消息的值，那么客户机可以接收超出超时期指定值之内的响应消息。

Last-Modified/If-Modified-Since

Last-Modified/If-Modified-Since要配合Cache-Control使用。

l Last-Modified：标示这个响应资源的最后修改时间。web服务器在响应请求时，告诉浏览器资源的最后修改时间。

l If-Modified-Since：当资源过期时（使用Cache-Control标识的max-age），发现资源具有Last-Modified声明，则再次向web服务器请求时带上头 If-Modified-Since，表示请求时间。web****服务器收到请求后发现有头If-Modified-Since 则与被请求资源的最后修改时间进行比对。若最后修改时间较新，说明资源又被改动过，则响应整片资源内容（写在响应消息包体内），HTTP 200；若最后修改时间较旧，说明资源无新修改，则响应HTTP 304 (无需包体，节省浏览)，告知浏览器继续使用所保存的cache。

Etag/If-None-Match

Etag/If-None-Match也要配合Cache-Control使用。

l Etag：web服务器响应请求时，告诉浏览器当前资源在服务器的唯一标识（生成规则由服务器觉得）。Apache中，ETag的值，默认是对文件的索引节（INode*），大小（Size**）和最后修改时间（MTime**）进行Hash**后得到的*。

l If-None-Match：当资源过期时（使用Cache-Control标识的max-age），发现资源具有Etage声明，则再次向web服务器请求时带上头If-None-Match （Etag****的值）。web****服务器收到请求后发现有头If-None-Match 则与被请求资源的相应校验串进行比对，决定返回200****或304。

既生Last-Modified何生Etag？

你可能会觉得使用Last-Modified已经足以让浏览器知道本地的缓存副本是否足够新，为什么还需要Etag（实体标识）呢？HTTP1.1中Etag的出现主要是为了解决几个Last-Modified比较难解决的问题：

l Last-Modified标注的最后修改只能精确到秒级，如果某些文件在1秒钟以内，被修改多次的话，它将不能准确标注文件的修改时间

l 如果某些文件会被定期生成，当有时内容并没有任何变化，但Last-Modified却改变了，导致文件没法使用缓存

l 有可能存在服务器没有准确获取文件修改时间，或者与代理服务器时间不一致等情形

Etag是服务器自动生成或者由开发者生成的对应资源在服务器端的唯一标识符，能够更加准确的控制缓存。Last-Modified与ETag是可以一起使用的，服务器会优先验证ETag**，一致的情况下，才会继续比对Last-Modified****，最后才决定是否返回304**。

关于缓存的两个概念

强缓存：

​ 用户发送的请求，直接从客户端缓存中获取，不发送请求到服务器，不与服务器发生交互行为。

协商缓存：

​ 用户发送请求，发送到服务器之后，由服务器判定是否从缓存中获取资源。
两者共同点：客户端获取的数据最后都是熊客户端的缓存中取得。
两者区别：从名字就可以看出，强缓存不与服务器发生交互，而协商缓存则需要需服务器发生交互。

对于强缓存，服务器通知浏览器一个缓存时间，在缓存时间内，下次请求，直接用缓存，不在时间内，执行比较缓存策略。

对于协商缓存，将缓存信息中的Etag和Last-Modified通过请求发送给服务器，由服务器校验，返回304状态码时，浏览器直接使用缓存。

浏览器首次加载向服务器请求资源的过程:

浏览器再次请求时：