浏览器缓存机制之一（经典缓存）

因为在接手的项目中用到过比较新的HTML5应用缓存，也用到了经典的缓存如设置max-age，Etag之类，而之前一直就是在用着没有去深究其中原理。周末天气不好，懒得出去了，正好找时间总结下。

1.关于浏览器缓存

记得去年看《HTTP权威指南》的时候，有一章是专门讲浏览器缓存的，一年时间过得太快，逝去的时光还真是如同人群中消失的好姑娘，眼看她嫁给别人。我这里把浏览器缓存分为经典的浏览器缓存（以下简称为经典缓存）和HTML5应用缓存这两类。

经典的浏览器缓存其实主要由几个响应变量来设置，如Cache-Control(设置max-age指定文档处于新鲜期的秒数)，Pragma(Pragma主要用于HTTP1.0，HTTP1.1用Cache-Control)，Expires（不推荐，因为它指定的是过期的绝对日期而不是相对秒数），Etag和Last_Modified。其中Etag则对应请求头部中的If_None_Match（简写为INM），Last_Modified对应If_Modified_Since(简写为IMS).新的HTML5应用缓存则是支持离线存储文档，使得文档数据离线有效，节省了流量，在移动端使用的较多。

2.经典缓存

默认情况下apache对文档内容如html，图片，css等会在响应中加Etag以及Last_Modified。这样下次请求的时候会带上INM以及IMS，如果文档内容没有修改，那么返回304 Not Modified，然后就可以从缓存中取之前缓存的文件了；如果文档从那个时间点后修改过了，那么返回200和文档的新内容。下面分别用apache来测试下cache-control，expires，INM以及IMS的效果。

2.1 Cache-Control和Expires

我的apache版本为2.4.10，配置如下，我设置了html文件的Cache-Control，以及Expires，同时禁用了Last-Modified响应头部和Etag。

FileETag none
<Files *.html>Header set Cache-Control "max-age=3600"
</Files>
ExpiresActive On
ExpiresByType text/html A20
<Files *>Header unset Last-Modified
</Files>

我的index.html文件如下:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk">
<title>测试浏览器缓存</title>
</head>
<body>
<p>测试文字</p>
<img src="/test.gif">测试图片</img>
</body>
</html>

这就设置了html文件响应加上cache-control响应头，如同下面这样：

Accept-Ranges:bytes
Cache-Control:max-age=3600
Connection:Keep-Alive
Content-Length:29
Content-Type:text/html
Date:Mon, 09 Mar 2015 14:17:20 GMT
Expires:Mon, 09 Mar 2015 14:18:20 GMT
Keep-Alive:timeout=5, max=100
Server:Apache/2.4.10 (Ubuntu)

那么可以看到响应头既有Cache-control又有Expires，而且这两个值我故意设置的不一样，这个时候以哪个值为准呢？在chrome下面实验结果表明Cache-control优先级要高，也就是如果使用期小于新鲜期3600秒，则在地址栏访问index.html页面的时候会直接从缓存中取。

注意这里chrome有个问题，就是如果在同一个tab下面访问index.html，不管有没有过期，都不会从缓存中取，而当你打开一个新的tab访问，则缓存机制生效，具体原因不明，可能跟chrome内部缓存策略有关。比如这里有人提出相同的问题。

2.2 Last-Modified/If-Modified-Since 和 Etag/If-None-Match

这几个标记可以配合Cache-Control使用。
- Last-Modified:标示响应文档的最后修改时间。
- If-Modified-Since(IMS)：当文档过期时(比如使用期超过了Cache-Control指定的max-age)，如果该响应文档有Last-Modified的响应头部，则会在请求时带上IMS头部，值为服务器文档的最后修改时间。

Etag：web服务器响应请求时，返回Etag头部用来告知浏览器该文档在服务器的唯一标示。apache中Etag是对文件的Inode，大小以及最后修改时间mtime进行hash后得到。
If-None-Match（INM）：当文档过期时，浏览器请求会带上INM头部，内容为Etag值。web服务器会比对Etag值并决定返回304还是200.

对2.1中的配置注释掉FileTag none和<Files *> Header unset Last-Modified </Files>即可开启Etag和Last-Modified响应头部。

如果在请求头部中IMS和INM都存在，服务器会优先验证INM，只有INM匹配成功后才会继续比对IMS。

2.3 既有IMS何生INM

根据《http权威指南》上面的描述，之所以存在IMS还要INM主要是有如下几个原因：
- 有些文档可能会被周期性重写，但是实际包含的数据常常是一样的。尽管内容没有变化，但是修改日期会发生变化。
- 有些文档可能被修改了，但是所做修改并不重要，不需要让世界范围的换成都重新装载数据。
- 有些服务器无法准确判断页面最后修改时间。
- 有些服务器提供的文档会在毫秒间发生变化，而这个对服务器以秒为粒度的修改日期就不够用了。

3.用户行为与缓存

用户行为也会影响浏览器缓存机制。比如你F5会导致Expires/Cache-control无效，用CTRL+F5(某些系统中是Shift+F5)除了Expires/Cache-control外，还会导致Etag/Last-Modified失效。

4.参考资料

浏览器缓存机制
《HTTP权威指南》
Is Chrome ignoring Control-Cache: max-age?

浏览器缓存机制（1）相关推荐

浏览器缓存机制学习总结
浏览器缓存机制学习总结最近在做一个考试系统时,由于经常加载试卷或图片等等静态资源,抽空学习了一下缓存机制,在此记录为什么要使用缓存 1.通过HTTP协议,在客户端和浏览器建立连接时需要消耗时间,而 ...
浏览器缓存机制的研究分享
源宝导读:互联网Web应用大行其道的今天,浏览器已经成为Web应用运行的重要平台.而Web应用对浏览器缓存机制的高效利用,可以大幅提升应用性能和用户体验.本文将对浏览器缓存机制进行系统化的梳理,分享我 ...
HTTP 协议 -- 浏览器缓存机制
浏览器缓存机制浏览器缓存机制主要是 HTTP 协议定义的缓存机制. HTTP 协议中有关缓存的缓存信息头的关键字有 Cache-Control,Pragma,Expires,Last-Modifie ...
浏览器缓存机制（优化）
浏览器缓存机制缓存可以说是性能优化中简单⾼效的⼀种优化⽅式了,它可以显著减少⽹络传输所带来的损耗. 对于⼀个数据请求来说,可以分为发起⽹络请求.后端处理.浏览器响应三个步骤.浏览器缓存可以帮助我们 ...
【转】浏览器缓存机制
最近在做页面分析的时候发现页面F5刷新时,大部分原来已经缓存的内容的状态变成了304,很是不解,原来想好好看看是什么原因的.结果发现园里已经有人分析的很彻底了. 原文地址:浏览器缓存机制浏览器缓存机 ...
浏览器缓存机制过期机制和验证机制
浏览器缓存机制过期机制和验证机制对于浏览器的缓存来讲,这些规则是在HTTP协议头部和HTML页面的Meta标签中定义的.他们分别从新鲜度和校验值两个维度来规定浏览器是否可以直接使用缓存中的副本,还 ...
前端更新需要清空浏览器缓存_浏览器缓存机制分析及前端缓存清理
浏览器缓存机制分析及前端缓存清理发布时间:2018-06-03 16:56, 浏览次数:857 本文主题:理清浏览器的缓存机制的内部逻辑,并给出避免浏览器缓存的相关解决方案相信很多新手前端发布页面 ...
浏览器缓存机制及一些缓存问题解决方法
参考: http://bbs.csdn.net/topics/330028896 浏览器缓存机制 http://www.docin.com/p-591569918.html 浏览器缓存的一些问题的 ...
浏览器会不会缓存html,浏览器缓存机制（一）
浏览器缓存机制之一(经典缓存) 因为在接手的项目中用到过比较新的HTML5应用缓存,也用到了经典的缓存如设置max-age,Etag之类,而之前一直就是在用着没有去深究其中原理.周末天气不好,懒得出去 ...
前端必须要懂的浏览器缓存机制
前端必须要懂的浏览器缓存机制 2017-10-11 腾讯NEXT学位腾讯NEXT学位腾讯NEXT学位微信号 NextDegree 功能介绍腾讯NEXT学位官方账号本文详细讲解了浏览器端缓存的 ...

浏览器缓存机制（1）