浏览器缓存(Egret项目实例分析)

参考文章:

浏览器缓存机制:http://web.jobbole.com/82997/

浏览器缓存机制:http://www.cnblogs.com/skynet/archive/2012/11/28/2792503.html

Meta http-equiv详解: http://kinglyhum.iteye.com/blog/827807

页面缓存相关设置:

exprise 用于设定网页的到期时间。一旦网页过期,必须到服务器上重新传输。

<meta http-equiv="expires" content="31 Dec 2008">
<meta http-equiv="expires" content=""> 

prama的作用是告诉浏览器当前页面不被缓存,每次访问都需要去服务器拉取。使用上很简单,但只有部分浏览器可以支持,而且所有缓存代理服务器都不支持,因为代理不解析HTML内容本身。

<meta http-equiv="pragma"content="no-cache">

cache-control缓存控制

<meta http-equiv="cache-control" content="no-cache"> 
<meta http-equiv="cache-control"content="max-age=0"/>

浏览器缓存图解:

浏览器缓存(Egret项目实例分析)

浏览器缓存(Egret项目实例分析)

实测:

1 什么也不设置的情况下,修改index.html文件

第一次F5刷新:

浏览器缓存(Egret项目实例分析)

浏览器缓存(Egret项目实例分析)

第二次F5刷新:

浏览器缓存(Egret项目实例分析)

浏览器缓存(Egret项目实例分析)

 2 设置缓存和过期时间情况下,修改index.html文件

<meta http-equiv="expires" content="31 Dec 2099">
<meta http-equiv="cache-control" content="max-age=5000">

同什么都不设置一样。

呵呵。为啥cache-control:max-age=0呢?

修改网页index.html,修改网页后会重新从服务器拉取,没修改过就读缓存。

修改资源文件

修改png图片,一直读的缓存。

没有Request Headers。

浏览器缓存(Egret项目实例分析)

根据实例总结:

1. 设置cache-control后,为啥还是max-age=0??

2. 为啥png没有request Headers??

 附录:

cache-control可选设置

浏览器缓存(Egret项目实例分析)

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

用户行为与缓存:

浏览器缓存(Egret项目实例分析)

上一篇:thinkphp 面向切面编程-行为拓展


下一篇:jQuery 人脸识别插件,支持图片和视频