浏览器会不会缓存html,浏览器缓存机制(一) -尊龙游戏旗舰厅官网
浏览器缓存机制之一(经典缓存)
因为在接手的项目中用到过比较新的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
header set cache-control "max-age=3600"
expiresactive on
expiresbytype text/html a20
header unset last-modified
我的index.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和
header unset last-modified
即可开启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?
总结
以上是尊龙游戏旗舰厅官网为你收集整理的浏览器会不会缓存html,浏览器缓存机制(一)的全部内容,希望文章能够帮你解决所遇到的问题。
- 上一篇:
- 下一篇: