图说浏览器的缓存原理及缓存方式说明（1）

首先，我们从表面上研究开始。

一、从浏览器打开一个页面，是怎么一个过程？

1.用户输入网址（假设是个html页面，并且是第一次访问），浏览器向服务器发出请求，服务器返回html文件；

2.浏览器开始载入html代码，发现＜head＞标签内有一个＜link＞标签引用外部CSS文件；

3.浏览器又发出CSS文件的请求，服务器返回这个CSS文件；

4.浏览器继续载入html中＜body＞部分的代码，并且CSS文件已经拿到手了，可以开始渲染页面了；

5.浏览器在代码中发现一个＜img＞标签引用了一张图片，向服务器发出请求。此时浏览器不会等到图片下载完，而是继续渲染后面的代码；

6.服务器返回图片文件，由于图片占用了一定面积，影响了后面段落的排布，因此浏览器需要回过头来重新渲染这部分代码；

7.浏览器发现了一个包含一行Javascript代码的＜script＞标签，赶快运行它；

8.Javascript脚本执行了这条语句，它命令浏览器隐藏掉代码中的某个＜div＞ （style.display=”none”）。杯具啊，突然就少了这么一个元素，浏览器不得不重新渲染这部分代码；

9.终于等到了＜/html＞的到来，浏览器泪流满面……

10.等等，还没完，用户点了一下界面中的“换肤”按钮，Javascript让浏览器换了一下＜link＞标签的CSS路径；

11.浏览器召集了在座的各位＜div＞＜span＞＜ul＞＜li＞们，“大伙儿收拾收拾行李，咱得重新来过……”，浏览器向服务器请求了新的CSS文件，重新渲染页面。

我们在浏览器中打开开发者工具（F12），可以看到以下代码：不同浏览器界面不大一致。这里以chrome为例子。

<div style="text-align: left;"><span style="line-height: 28.7999992370605px; text-indent: 2em; font-family: MD_Font, octicons, 'Glyphicons Halflings', FontAwesome, dashicons, 'Segoe UI', 'WenQuanYi Micro Hei', 'WenQuanYi Micro Hei Mono', 'Microsoft Yahei', 'Microsoft Yahei Mono', 微软雅黑, sans-serif;">Remote Address:</span></div><div style="text-align: left;"><span style="line-height: 28.7999992370605px; text-indent: 2em; font-family: MD_Font, octicons, 'Glyphicons Halflings', FontAwesome, dashicons, 'Segoe UI', 'WenQuanYi Micro Hei', 'WenQuanYi Micro Hei Mono', 'Microsoft Yahei', 'Microsoft Yahei Mono', 微软雅黑, sans-serif;">119.188.14.88:80</span></div><div style="text-align: left;"><span style="line-height: 28.7999992370605px; text-indent: 2em;">Request URL:</span></div><div style="text-align: left;"><span style="line-height: 28.7999992370605px; text-indent: 2em; font-family: MD_Font, octicons, 'Glyphicons Halflings', FontAwesome, dashicons, 'Segoe UI', 'WenQuanYi Micro Hei', 'WenQuanYi Micro Hei Mono', 'Microsoft Yahei', 'Microsoft Yahei Mono', 微软雅黑, sans-serif;">http://www.suchso.com/programmer/10-1-chanpin-sheji-qian.html</span></div><div style="text-align: left;"><span style="line-height: 28.7999992370605px; text-indent: 2em;">Request Method:</span></div>GET<div style="text-align: left;"><span style="line-height: 28.7999992370605px; text-indent: 2em;">304 Not Modified</span></div>Status Code:<div style="text-align: left;"><span style="line-height: 28.7999992370605px; text-indent: 2em; font-family: MD_Font, octicons, 'Glyphicons Halflings', FontAwesome, dashicons, 'Segoe UI', 'WenQuanYi Micro Hei', 'WenQuanYi Micro Hei Mono', 'Microsoft Yahei', 'Microsoft Yahei Mono', 微软雅黑, sans-serif;">text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8</span></div>Request Headersview sourceAccept:Accept-Encoding:gzip,deflate,sdch<div style="text-align: left;"><span style="line-height: 28.7999992370605px; text-indent: 2em; font-family: MD_Font, octicons, 'Glyphicons Halflings', FontAwesome, dashicons, 'Segoe UI', 'WenQuanYi Micro Hei', 'WenQuanYi Micro Hei Mono', 'Microsoft Yahei', 'Microsoft Yahei Mono', 微软雅黑, sans-serif;">keep-alive</span></div>Accept-Language:zh-CN,zh;q=0.8Cache-Control:max-age=0Connection:Cookie:<div style="text-align: left;"><span style="line-height: 28.7999992370605px; text-indent: 2em; font-family: MD_Font, octicons, 'Glyphicons Halflings', FontAwesome, dashicons, 'Segoe UI', 'WenQuanYi Micro Hei', 'WenQuanYi Micro Hei Mono', 'Microsoft Yahei', 'Microsoft Yahei Mono', 微软雅黑, sans-serif;">bdshare_firstime=1408857349721; _um_uuid=63508f749e9192408a60e27f87e0a387; username=liuweihug; password=edd03089a2e5af3b1678a1bfb8538d43; ASPSESSIONIDSSATDSBR=JIMPFGNCAPDLNNBBJMDALMCK; ASPSESSIONIDCSATAQCS=OLHBHEOCFKJMJJMIPILKKMPB; ASPSESSIONIDSSAQDQCQ=JIPJKOADKGIHHJIKNOHMCMFG; ASPSESSIONIDQABQBCSD=OANLIKJDINPCFALJBJEPEDOL; BAIDU_DUP_lcr=http://www.baidu.com/baidu?word=site%3Asuchso.com&ie=utf-8&tn=98012088_2_dg; ASPSESSIONIDQCCTBDTB=EIJDKIKDPLFGAGPCPNBNFIEA; Hm_lvt_b7b352ca8d70393d2bd6dcf521e90a07=1413246574,1413336437,1413339068,1413434954; Hm_lpvt_b7b352ca8d70393d2bd6dcf521e90a07=1413439585</span></div>Host:www.suchso.comIf-Modified-Since:Mon, 13 Oct 2014 15:22:58 GMTIf-None-Match:"c7e3a891f9e6cf1:0"Referer:http://www.suchso.com/User-Agent:Mozilla/5.0 (Windows NT 6.3; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/34.0.1847.137 Safari/537.36 LBBROWSERResponse Headersview sourceAccept-Ranges:bytesConnection:keep-aliveContent-Type:text/htmlDate:Thu, 16 Oct 2014 06:34:06 GMTETag:"c7e3a891f9e6cf1:0"Last-Modified:Mon, 13 Oct 2014 15:22:58 GMTX-Cache:missX-Server:<div style="text-align: left;"><span style="line-height: 28.7999992370605px; text-indent: 2em; font-family: MD_Font, octicons, 'Glyphicons Halflings', FontAwesome, dashicons, 'Segoe UI', 'WenQuanYi Micro Hei', 'WenQuanYi Micro Hei Mono', 'Microsoft Yahei', 'Microsoft Yahei Mono', 微软雅黑, sans-serif;">jinan03-cdn18.fhl</span></div>

我们可以看到head有很多信息。keep-alive参考：[http的KeepAlive是什么？需要开启吗？]。这里重点讲解，与缓存有关的几个参数。这是打开我www.xxxxxx.com的一个静态html界面。由于我使用了百度加速乐，这个设置都是加速乐给定义的。

二、浏览器缓存机制的策略

除了在web服务器进行设置之外，很多时候我们也能看到这样的代码：

1

<META HTTP-EQUIV="Pragma" CONTENT="no-cache">

上述代码的作用是告诉浏览器当前页面不被缓存，每次访问都需要去服务器拉取。使用上很简单，但只有部分浏览器可以支持，而且所有缓存代理服务器都不支持，因为代理不解析HTML内容本身。这个先不管了，我们主要看看浏览器的head里面的参数。

Expires策略

Expires是Web服务器响应消息头字段，在响应http请求时告诉浏览器在过期时间前浏览器可以直接从浏览器缓存取数据，而无需再次请求。

下面是宝宝PK项目中，浏览器拉取jquery.js web服务器的响应头：

注：Date头域表示消息发送的时间，时间的描述格式由rfc822定义。例如，Date: Mon,31 Dec 2001 04:25:57GMT。

Web服务器告诉浏览器在2014-10-16 06:06:25这个时间点之前，可以使用缓存文件。发送请求的时间是2014-10-16 16:06:25，即缓存10个小时。

这是我在加速乐设置的。

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

Cache-control策略（重点关注）

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

还是上面那个请求，web服务器返回的Cache-Control头的值为max-age=300，即5分钟（和上面的Expires时间一致，这个不是必须的）。

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。

三、这些缓存还跟什么有关系？

浏览器缓存行为还有用户的行为有关！！！

用户操作

Expires/Cache-Control

Last-Modified/Etag

地址栏回车

有效

有效

页面链接跳转

有效

有效

新开窗口

有效

有效

前进、后退

有效

有效

F5刷新

无效

有效

Ctrl+F5刷新

普通页面跳转

普通页面跳转包括链接点击跳转，用js脚本打开新页面（window.open）

无缓存情况下，请求会返回所有资源结果

设置Expires并且未过期时，浏览器将不会发出http请求

如果Expires过期，则会发送相应请求，并附带上Last-Modifed等信息，供服务器校验

页面刷新(F5)

这种情况一下，一般会看到很多304的请求，就是说即便资源设置了Expires且未过期，浏览器也会发送相应请求

IE和FF稍有区别

IE:

If-Modified-Since   Wed, 18 Nov 2009 15:54:52GMT

If-None-Match   "2360492659"

Pragma: no-cache    // 禁止缓存

FF:

If-Modified-Since   Wed, 18 Nov 2009 15:54:52GMT

If-None-Match   "2360492659"

Cache-Control   max-age=0  // 文件立即过期

强制刷新(Ctrl+F5)

效果和无缓存时候一致，返回200的结果

源引：http://www.suchso.com/projecteactual/web-server-browser-cache-1.html