-
关于浏览器缓存
浏览器的资源请求,如果使用了缓存基本上是两种情况
- status code: 200 ok ( from cache )
- status code: 304 Not Modified
上面两种方式有什么区别呢?简单地说,第一种方式是不向浏览器发送请求,直接使用本地缓存文件。第二种方式,浏览器虽然发现了本地有该资源的缓存,但是不确定是否是最新的,于是想服务器询问,若服务器认为浏览器的缓存版本还可用,那么便会返回304。
浏览器关于缓存使用的决策
那么,浏览器如何决定是使用哪种方式呢?这就和服务器在请求返回中的Header字段有关了。下面对相关的字段进行简单介绍。
Cache-Control
Cache-Control 是最重要的规则。这个字段用于指定所有缓存机制在整个请求/响应链中必须服从的指令。该字段通常覆盖默认缓存算法。另外,缓存指令是单向的,即请求中存在一个指令并不意味着响应中将存在同一个指令。
简单地说,该字段用于控制浏览器在什么情况下直接使用本地缓存而不向服务器发送请求。一般具有以下值:
-
public
: 所有内容都将被缓存 -
private
: 内容只缓存到似有缓存中 -
no-cache
: 所有内容都不会被缓存 -
no-store
: 所有内容都不会被缓存到缓存或者internet临时文件中 -
must-revalidation/proxy-revalidation
: 如果缓存的内容失效,请求必须发送到服务器/代理以进行重新验证 -
max-age=xxx( xxx is numeric )
: 缓存的内容将在 xxx 秒后失效, 这个选项只在HTTP 1.1可用, 并如果和Last-Modified一起使用时, 优先级较高
其中最常用的属性便是
max-age
, 这个字段很简单,就是浏览器在资源成功请求后的制定时间内,都将直接调用本地缓存和不会向服务器去请求数据。Expires
Expires 头部字段提供一个日期和时间,在该日期前的所有对该资源的请求都会直接使用浏览器缓存而不用向服务器请求(注意:cache-control max-age 和 s-maxage 将覆盖 Expires 头部。)
Expires 字段接收以下格式的值:“Expires: Sun, 08 Nov 2009 03:37:26 GMT”。
但是使用
Expires
存在服务器端时间和浏览器时间不一致的问题。Last-Modified/E-tag
Last-Modified
和E-tag
的作用都是向服务器确认当前缓存文件是否为最新。抛开功能不看,这两个字段的表现如下:- 若服务器在响应一个资源时添加了
Last-Modified
字段,那么当下一次浏览器再一次向服务器请求该资源时(前提是浏览器中上一次的资源被缓存过了),会在请求header中包含If-Modified-Since
字段,且值与服务器第一次响应给浏览器的Last-Modified
字段一致 - 若服务器在响应一个资源时添加了
ETag
字段,那么当下一次浏览器再一次向服务器请求该资源时(前提是浏览器中上一次的资源被缓存过了),会在请求header中包含If-None-Match
字段,且值与服务器第一次响应给浏览器的ETag
字段一致
那么上述是遵循了Http协议的浏览器会自动实现的,而要实现304的功能,就需要服务器(比如Apache对于静态资源会自动实现这两个字段的响应)或者我们手动在服务器端编写响应的逻辑来实现。
- 若服务器在收到的资源请求中发现含有
Last-Modified
字段,则说明浏览器中包含了该资源的某一版本的缓存,此时服务器端将根据该字段的值进行一定的逻辑判断,以决定让浏览器直接使用已有的缓存(返回304
)还是将最新的文件发送过去(200
,发送新文件并更新Last-Modified
字段) - 若服务器在收到的资源请求中发现含有
If-None-Matc
字段,则说明浏览器中包含了该资源的某一版本的缓存,此时服务器端将根据该字段的值进行一定的逻辑判断,以决定让浏览器直接使用已有的缓存(返回304
)还是将最新的文件发送过去(200
,发送新文件,并更新ETag
)
若同时使用了
Last-Modified
和ETag
,正确的做法应该是当两者都符合条件时,才返回304
什么时候使用ETag?
Etag
主要为了解决Last-Modified
无法解决的一些问题。- 一些文件也许会周期性的更改,但是他的内容并不改变(仅仅改变的修改时间),这个时候我们并不希望客户端认为这个文件被修改了,而重新GET。这种情况下可以将某个能用来表明文件内容是否被更改的值(比如
md5
)来作为ETag
- 某些文件修改非常频繁,比如在秒以下的时间内进行修改,(比方说1s内修改了N次),
If-Modified-Since
能检查到的粒度是s级的,这种修改无法判断(或者说UNIX记录MTIME只能精确到秒) - 某些服务器不能精确的得到文件的最后修改时间
不同的页面打开方式产生的请求区别
一般我们打开(或者更新)一个页面(或者资源)有几种方式:
- 在地址栏中输入地址,然后回车
- 激活当前页面地址,然后回车
- F5刷新页面
- 单机Back/Forward按钮
上面几种方式对资源的请求,会产生不同的结果,并且各浏览器的表现并不一致。具体的区别可以参考鸟哥的《浏览器缓存机制》
其中大家需要注意的一点是,刷新页面(F5或者刷新按钮),不管是否设置了
max-age
,都会重新像服务器发送请求。但是这不影响304
逻辑。实例代码测试
用
nodejs
写了一个简单的静态文件服务器,用来测试上面的Cache-Control
和Last-Modified
,具体代码可以看gist
例子比较简单,大体逻辑:
- 每个资源的
200
返回设置max-age=10
,即缓存10秒。同时设置Last-Modified
- 每次收到请求后,若发现包含
if-modified-since
字段,则304
测试过程和结果:
- 第一次请求,不管是
index.html
还是index.css
均为200
,且response中包含了max-age
和Last-Modified
- 在地址栏中回车(10s以内),
index.html
为304
,index.css
为200 ok ( from cache )
- 若对页面进行刷新( F5或者刷新页面 ),两者均为
304
(在10s内或者不在10s内)
需要注意的问题:
-
index.html
不管是否设置了max-age
,都是304
,同理,将index.css
直接放到地址栏中请求也是304
-
index.css
一次304
之后的10s内又能继续进行不需要请求服务器的直接本地缓存。这里我个人认为,浏览器的“直接使用本地缓存“的效果和从服务器成功200
到数据产生的效果是一致的,除了文件本身,header字段等信息也是同样会被cache的,因此304
之后,max-age
又可以被继续使用一遍。
做了
nodejs
的实验之后,又开启了apache
服务器,同样的将index.html
和index.css
文件放置到服务器根目录中,请求后,发现apache
默认已经做了Last-Modified
和ETag
的处理,并且在修改index.css
文件后,可以观察到这两个值的变化。
- 浏览: 174394 次
- 性别:
- 来自: 深圳
最新评论
-
ningv:
修改proguard.bat还是不行,看了LZ提供的论坛,里面 ...
有关 Conversion to Dalvik format failed with error 1 -
额外日记:
太棒了
Spring Framework API 2.5 chm版 -
chunjuan0126:
楼主,我现在用的是Android 4.3的,Android-1 ...
有关 Conversion to Dalvik format failed with error 1 -
夜色蓝:
真的好用,谢谢啦
有关 Conversion to Dalvik format failed with error 1 -
winnerph:
3q
Spring Framework API 2.5 chm版
相关推荐
浏览器缓存机制介绍与缓存策略剖析.pptx
js浏览器缓存.docjs浏览器缓存.docjs浏览器缓存.docjs浏览器缓存.doc
浏览器缓存例子浏览器缓存例子浏览器缓存例子浏览器缓存例子浏览器缓存例子
Loadrunner负载测试 浏览器缓存设置
jsp去除浏览器缓存
总结了浏览器缓存的原理,如何管理浏览器缓存
浏览器缓存目录设置,配合沙盘使用,不但会提升上网速度,而且还能减少磁盘碎片
三星T231如何清除浏览器缓存-T231清除浏览器缓存教程.docx
Microsoft edge 浏览器缓存改成内存虚拟盘(盘符R) Microsoft edge 浏览器缓存改成内存虚拟盘(盘符R) Microsoft edge 浏览器缓存改成内存虚拟盘(盘符R)
这个软件可以将你在用浏览器观看视频时所缓存的视频文件在缓存文件夹里面提取出来,对于一些不会下载视频或者说不想安装各种客户端、不想注册各种网站的人来说,此程序绝对是一把利器! ps:压缩包里的主程序可以...
ChromeCacheView浏览器缓存读取工具 v1.56 汉化
浏览器缓存查看及恢复小工具。这是国外的软件
为了提高网页的访问效率,浏览器可以在本地缓存以前...不是所有的浏览器都能完全支持上面的三个响应头,因此最好是同时使用上面的三个响应头,只要浏览器能支持其中任何一种形式,就能可靠地禁止浏览器缓存当前页面。
如果视频被储存在浏览器的缓存文件夹中,这个软件可以帮助你从缓存文件夹中找到该视频文件并保存到其他位置。 它会自动扫描IE、基于Mozilla的网页浏览器(包括FireFox)的整个缓存文件夹,并找出当前储存在里面的所有...
浏览器缓存 浏览器缓存主要可以分为两大类:客户端缓存和服务端缓存。客户端缓存,即浏览器缓存,是本文主要讨论的内容。而服务端缓存则主要包括代理服务器缓存和反向代理服务器缓存,以及广泛使用的CDN等。这些...
1、若是UC浏览器的视频文件:Y2hlbmppbmdjb25n0 Y2hlbmppbmdjb25n1 Y2hlbmppbmdjb25n2......用此工具类(合并无加密)。 2、若是0.ts、1.ts、2.ts类型视频合并到此:...
通过通俗易懂的语言,本博客介绍了浏览器缓存的工作原理,HTTP缓存控制字段,缓存策略的应用,以及面试中可能遇到的关于缓存的问题和实战演练。此外,还探讨了缓存的高级话题,如缓存头字段、缓存与性能的关系,以及...
描述了web浏览器,关于HTTP缓存机制的流程
通过通俗易懂的语言,本博客介绍了浏览器缓存的工作原理,HTTP缓存控制字段,缓存策略的应用,以及面试中可能遇到的关于缓存的问题和实战演练。此外,还探讨了缓存的高级话题,如缓存头字段、缓存与性能的关系,以及...
IndexedDB,支持浏览器缓存