浏览器缓存机制详解

浏览器缓存机制详解

　　对于浏览器缓存，相信很多开发者对它真的是又爱又恨。一方面极大地提升了用户体验，而另一方面有时会因为读取了缓存而展示了“错误”的东西，而在开发过程中千方百计地想把缓存禁掉。那么浏览器缓存究竟是个什么样的神奇玩意呢？

什么是浏览器缓存：

　　简单来说，浏览器缓存就是把一个已经请求过的Web资源（如html页面，图片，js，数据等）拷贝一份副本储存在浏览器中。缓存会根据进来的请求保存输出内容的副本。当下一个请求来到的时候，如果是相同的URL，缓存会根据缓存机制决定是直接使用副本响应访问请求，还是向源服务器再次发送请求。比较常见的就是浏览器会缓存访问过网站的网页，当再次访问这个URL地址的时候，如果网页没有更新，就不会再次下载网页，而是直接使用本地缓存的网页。只有当网站明确标识资源已经更新，浏览器才会再次下载网页。

为什么使用缓存：

（1）减少网络带宽消耗

　　无论对于网站运营者或者用户，带宽都代表着金钱，过多的带宽消耗，只会便宜了网络运营商。当Web缓存副本被使用时，只会产生极小的网络流量，可以有效的降低运营成本。

（2）降低服务器压力

　　给网络资源设定有效期之后，用户可以重复使用本地的缓存，减少对源服务器的请求，间接降低服务器的压力。同时，搜索引擎的爬虫机器人也能根据过期机制降低爬取的频率，也能有效降低服务器的压力。

（3）减少网络延迟，加快页面打开速度

　　带宽对于个人网站运营者来说是十分重要，而对于大型的互联网公司来说，可能有时因为钱多而真的不在乎。那Web缓存还有作用吗？答案是肯定的，对于最终用户，缓存的使用能够明显加快页面打开速度，达到更好的体验。

关于缓存的一些头部信息详解：

1.通用首部字段

2.请求首部字段

3.响应首部字段

4.实体首部字段

(1) Pragma

Pragma 是 HTTP/1.1 之前版本的历史遗留字段，仅作为与 HTTP/1.0 的向后兼容而定义。

规范定义的形式唯一，如下所示。

Pragma: no-cache​

该首部字段属于通用首部字段，但只用在客户端发送的请求中。客户端会要求所有的中间服务器不返回缓存 的资源。

所有的中间服务器如果都能以 HTTP/1.1 为基准，那直接采用 Cache-Control: no-cache 指定缓存的处理方式 是最为理想的。但要整体掌握全部中间服务器使用的 HTTP 协议版本却是不现实的。因此，发送的请求会同 时含有下面两个首部字段。

Cache-Control: no-cache

Pragma: no-cache​

(2) Cache-Control

Http1.1 中的标准，可以看成是 expires 的补充。使用的是相对时间的概念。

简单介绍下Cache-Control的属性设置。

1）max-age: 设置缓存的最大的有效时间，单位为秒（s）。max-age会覆盖掉Expires

2) s-maxage: 只用于共享缓存，比如CDN缓存（s -> share）。与max-age 的区别是：max-age用于普通缓存，

而s-maxage用于代理缓存。如果存在s-maxage,则会覆盖max-age 和 Expires.

3) public：响应会被缓存，并且在多用户间共享。默认是public。

4) private: 响应只作为私有的缓存，不能在用户间共享。如果要求HTTP认证，响应会自动设置为private。

5）no-cache: 指定不缓存响应，表明资源不进行缓存。但是设置了no-cache之后并不代表浏览器不缓存，而是在缓存前要向服务器确认资源是否被更改。因此有的时候只设置no-cache防止缓存还是不够保险，还可以加上private指令，将过期时间设为过去的时间。

6）no-store: 绝对禁止缓存。

7）must-revalidate: 如果页面过期，则去服务器进行获取。

(3) expires

Http1.0 中的标准，表明过期时间，注意此处的时间都是指的是服务器的时间。

可以看到过期时间被设定为了：Thu, 28 Sep 2017 06:38:37 GMT

存在的问题：服务器时间与客户端时间的不一致，就会导致缓存跟期待效果出现偏差。

(4) Last-Modified/If-Modified-Since

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

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

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

(5)Etag/If-None-Match

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

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

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

(6)既生Last-Modified何生Etag？

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

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

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

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

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

（更多首部字段详解，请点击 HTTP再次学习）

浏览器缓存流程图

小结一下,浏览器第一次请求

浏览器第二次请求

 

不能缓存的请求：

　　当然并不是所有请求都能被缓存，无法被浏览器缓存的请求如下：

　　　　1. HTTP信息头中包含Cache-Control:no-cache，pragma:no-cache（HTTP1.0），或Cache-Control:max-age=0等告诉浏览器不用缓存的请求

　　　　2. 需要根据Cookie，认证信息等决定输入内容的动态请求是不能被缓存的

　　　　3. 经过HTTPS安全加密的请求（有人也经过测试发现，ie其实在头部加入Cache-Control：max-age信息，firefox在头部加入Cache-Control:Public之后，能够对HTTPS的资源进行缓存，参考《 HTTPS的七个误解 》）

　　　　4. POST请求无法被缓存

　　　　5. HTTP响应头中不包含Last-Modified/Etag，也不包含Cache-Control/Expires的请求无法被缓存

清除浏览器缓存：

jquery:

方法三： 用随机数，随机数也是避免缓存的一种很不错的方法！

URL 参数后加上 "?ran=" + Math . random (); //当然这里参数 ran可以任意取了

方法四： 用随机时间，和随机数一样。

在 URL 参数后加上 "?timestamp=" + new Date (). getTime ();

方法三： 用随机数，随机数也是避免缓存的一种很不错的方法！

URL 参数后加上 "?ran=" + Math . random (); //当然这里参数 ran可以任意取了

方法四： 用随机时间，和随机数一样。

在 URL 参数后加上 "?timestamp=" + new Date (). getTime ();

meta方法

//不缓存 < META HTTP - EQUIV = "pragma" CONTENT = "no-cache" > < META HTTP - EQUIV = "Cache-Control" CONTENT = "no-cache, must-revalidate" > < META HTTP - EQUIV = "expires" CONTENT = "0" >

用php后端清理

在服务端加 header("Cache-Control: no-cache, must-revalidate");等等(如php中)

（前端小白，部分有些参考，如有错误，欢迎指正~~）