`
fantaxy025025
  • 浏览: 1329734 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类

浏览器缓存_HTTP Cache-control

 
阅读更多

 

HTTP协议分别在 1.0 / 1.1 两个时代推出了 Expires / Cache-control 两种cache策略,这里我们无需了解全部的细节,无需记住整个RFC内容,但是当我们需要使用HTTP cache策略时,我们需要注意以下细节:
Expires 是HTTP 1.0 那个时代的东西了,目前来看,可以不使用了,因为HTTP 1.0 的user agent占有率在 0.1% 以下(我们主要面向的web浏览器均默认使用HTTP 1.1),Cache-control 是 HTTP 1.1 的新特性,也是我们主要做文章使用cache策略的工具.
Cache策略:
#1 保鲜期only 
这个是最最基础的一种策略,只需要在响应头中设定:
Cache-control: max-age=[secs]
[secs]是cache在客户端存活的秒数,例如 Cache-control: max-age=1800 表明cache的时间是半小时,只使用这样一个声明就可以使浏览器能够将这个HTTP响应的内容写入临时目录做cache. 
这里是简要过程:

I(1)浏览器第一次请求资源http://test.qq.com/test.cgi
(2)查询临时文件目录发现无cache存储,遂发出请求到web server
(3)web server响应资源,并设定Cache-control:max-age=300
(4)浏览器收到响应将资源呈献给用户的同时,在临时文件目录以"http://test.qq.com/test.cgi"为key缓存这个响应

---5分钟内---
II(1)浏览器再一次请求资源http://test.qq.com/test.cgi
(2)查询临时文件目录发现存在cache存储,检查保鲜期max-age,还未过期,则直接读取之,响应给用户

---5分钟后---
III(1)浏览器再一次请求资源http://test.qq.com/test.cgi
(2)查询临时文件目录发现存在cache存储,检查保鲜期max-age,已经过期,则发请求到web server


#2 保鲜期 + 最后修改时间验证
这里的要素是,在给出保鲜期的同时,给出一个资源的验证方式:
Last-Modified: [UTC time]
[UTC time]标示这个响应资源的最后修改时间,例如 Last-Modified: Mon, 06 Jul 2009 09:21:48 GMT
这个响应头只有配合Cache-control的时候才有实际价值,只是声明校验资源的方式,并不能影响资源的保鲜期时长

利用资源的可校验性,我们可以实现在cache的资源超过保鲜期浏览器再次请求时的304响应,令浏览器再次使用之前的cache

这里是简要过程:
I(1)同#1中I (1)
(2)同#1中I (2)
(3)web server响应资源,并设定
Cache-control:max-age=300
Last-Modified: Mon, 06 Jul 2009 09:21:48 GMT
(4)同#1中I (4)

---5分钟内---
(同#1中II)

---5分钟后---
III(1)浏览器再一次请求资源http://test.qq.com/test.cgi
(2)查询临时文件目录发现存在cache存储,检查保鲜期max-age,已经过期发现资源具有Last-Modified声明,则为请求带上头 If-Modified-Since: Mon, 06 Jul 2009 09:21:48 GMT 发送请求到web server
(3)web server收到请求后发现有头If-Modified-Since 则与被请求资源的最后修改时间进行比对,若最后修改时间较新,说明资源又被改动过,则响应整片资源内容,HTTP 200 (需要整块内容写为包体).若最后修改时间较旧,说明资源无新修改,则响应HTTP 304 (无需包体),告知浏览器继续使用所保存的cache,(这里当然也可以根据自己的需要决定是200还是304,我们的CGI毕竟是一种原始的实现)

#3 保鲜期 + 自定义标识验证
这里的要素是,在给出保鲜期的同时,给出另一种资源的验证方式:
ETag: [custom flag]
[custom flag]标示这个响应资源的由开发者自己确定的签名验证标识,例如 ETag: "abcdefg",这个响应头只有配合Cache-control的时候才有实际价值,是声明校验资源的方式
ETag的使用为我们实现304响应提供了更多的灵活性,我们可以抛开必须将验证转化成时间格式的限制 

这里是简要过程:
I(1)同#1中I (1)
(2)同#1中I (2)
(3)web server响应资源,并设定
Cache-control:max-age=300
ETag: "abcdefg"
(4)同#1中I (4)

---5分钟内---
(同#1中II)

---5分钟后---
III(1)浏览器再一次请求资源http://test.qq.com/test.cgi
(2)查询临时文件目录发现存在cache存储,检查保鲜期max-age,已经过期发现资源具有ETag声明,则为请求带上头 If-None-Match: "abcdefg",发送请求到web server
(3)web server收到请求后发现有头If-None-Match 则与被请求资源的相应校验串进行比对,Etag可以是一个版本号,可以是短时间戳,可以是资源校验和(强烈不推荐使用),或者干脆是一个常量(可以干脆拿来做容错)
If-None-Match发来的串与我们的自有值比对,根据我们自己的任何策略算法,可以自由决定如何返回浏览器,304或200
这里有一个使用ETag来做容错的例子(应用列表目前在使用):
(1)我们的每次正常返回都是200
Cache-control: max-age=1800
ETag: "anything"
这里anything是个常量,我们只用来告诉浏览器,cache过期要发带If-None-Match的请求过来
(2)这样来自客户端的一大部分请求基本上都会带上If-None-Match头,我们的CGI据此可以知道这个请求的客户端是否有cache,此时如果 CGI联系server失败,那么可以直接返回304,驱使客户端使用上一次cache的正确结果,且更新保鲜期max-age为300秒,这样我们实现了一个基于HTTP cache的容错,如果我们的资源还能实现一套时间戳存储的话,那么我们可以在正常情况下也实现校验后的304,从而节省流量

这里还有一个比较惨的教训,国内www上都没有文献记载,全球业界也只有一点文献可以找到:
IE6 在资源有gzip压缩同时有ETag头时,cache后再次发请求不会带If-None-Match头!!!

 

 

参考:http://blog.csdn.net/youngerchen/article/details/6116147

 

 

O

O

O

=文章结束

O

O

O


分享到:
评论

相关推荐

    http头部cache-control字段解析

    HTTP头部的`Cache-Control`字段是HTTP协议中用于控制缓存行为的重要机制,它为客户端和服务器之间的数据传输提供了更多的灵活性和效率。本文将深入解析`Cache-Control`字段的含义、作用及其各种指令,帮助你更好地...

    http cache-control详解

    Response.CacheControl = "no-cache" ' 禁止缓存 ``` 以上代码示例展示了如何使用ASP来调整HTTP响应的缓存控制设置。 综上所述,`Cache-Control`和`Expires`字段是HTTP缓存策略的重要组成部分,它们决定了浏览器...

    Cache-control使用Cache-control:private学习笔记

    在打开新窗口、地址栏回车、后退按钮和刷新按钮的场景下,如果设置了`Cache-Control: private`,浏览器会在首次访问时请求服务器,之后的访问会依赖于浏览器的缓存策略,但不会被中间的代理服务器缓存。 2. **其他...

    HTTP+JS+浏览器缓存技术

    2. 使用 jQuery Ajax 清除浏览器缓存:可以使用 $.ajax() 方法并设置 cache:false,或者使用 If-Modified-Since 和 Cache-Control 请求头来清除浏览器缓存。 3. 使用随机数或随机时间来避免缓存:可以在 URL 参数后...

    浏览器缓存机制介绍与缓存策略剖析.pptx

    本文将详细介绍浏览器缓存机制的工作原理、 Memory Cache、Disk Cache、 HTTP Cache 三种缓存机制的区别和应用场景,以及强缓存和协商缓存的机制。 Memory Cache Memory Cache 是浏览器在内存中存储的缓存,主要...

    初探浏览器缓存实现原理-提高性能

    在实际应用中,开发者可以通过设置合适的缓存策略,结合`Cache-Control`和`Expires`等头部信息,控制浏览器缓存行为。例如,对于静态资源,可以设置较长的缓存时间,减少不必要的网络请求;对于动态内容,可能需要更...

    Go-Go的缓存控制中间件添加ETag头(内容的md5)和Cache-Control头

    例如,`Cache-Control: max-age=3600`表示资源可以在客户端缓存一小时,而`Cache-Control: no-cache`则指示代理服务器或浏览器在每次请求时都要向服务器验证资源是否已更新。 以下是一个简单的Go中间件实现示例,...

    Loadrunner负载测试 浏览器缓存设置

    在这个特定的场景下,我们关注的是“Loadrunner负载测试中的浏览器缓存设置”。了解如何在LoadRunner中正确设置浏览器缓存对于获取真实用户行为的数据至关重要,因为这直接影响到测试结果的准确性。 浏览器缓存是...

    强制缓存和协商缓存资源

    private 和 public 是 Cache-Control 字段中的两个常用值,用于指定缓存的范围,例如 Cache-Control: private,表示缓存只允许浏览器缓存,而不允许代理服务器或缓存服务器缓存,例如 Cache-Control: public,表示...

    jsp去除浏览器缓存

    ### jsp去除浏览器缓存详解 #### 一、引言 在Web开发中,为了提高用户体验及页面加载速度,浏览器通常会缓存一部分资源。但有时为了确保用户获取到最新的内容,我们需要禁止或控制浏览器对特定页面的缓存。本文将...

    浏览器HTTP缓存机制

    服务器响应时包含`Expires` 或 `Cache-Control` 字段,以告知浏览器如何处理缓存。 2. **缓存检查**: 对于后续请求,浏览器首先检查资源是否仍然有效。如果没有过期,则直接从缓存中读取数据并返回200 OK (from ...

    LuBei-Summary-HTML_meta_http-equiv.rar_The Mass

    4. **Pragma**: 控制缓存策略,如`<meta http-equiv="Pragma" content="no-cache">`,防止页面被浏览器缓存。 5. **Cache-Control**: 同样用于缓存控制,比Pragma更现代且广泛支持,如`<meta ...

    消除浏览器的301重定向缓存

    关闭IE10或IE11,再重新打开,浏览器输入上面的网址,可以看到浏览器重定向到http://www.baidu.com,同时控制台还是没有输出,则此时301请求依然被浏览器缓存。 若是chrome浏览器或IE8,新打开TAB页,浏览器会缓存...

    SERVLET 上传文件原理,Cache-Contro,java编码,jbpm原理

    `Cache-Control`是HTTP头中的一个字段,用于控制缓存行为。它允许服务器指示浏览器或其他代理如何缓存响应。常见的值有`no-cache`、`max-age`、`must-revalidate`等。例如,`Cache-Control: no-cache`意味着每次请求...

    vue项目强制清除页面缓存的例子

    1. 在HTML的标签中,添加标签,通过设置HTTP-EQUIV属性来禁止浏览器缓存页面。具体如下: ```html <META HTTP-EQUIV="Pragma" CONTENT="no-cache"> <META HTTP-EQUIV="Cache-Control" CONTENT="no-cache"> ...

    浏览器HTTP缓存运行机制流程图.zip

    同时,Service Worker技术也是现代浏览器缓存的重要组成部分,它允许开发者更精细地控制离线缓存和预加载策略。 理解并合理利用这些机制,可以有效地减少网络传输,提升用户体验。例如,设置合适的缓存策略可以减少...

    浏览器缓存策略Httpwatch

    浏览器缓存,即HTTP Cache,主要针对用户界面层,对提高用户体验有着显著效果。它将用户请求过的页面元素(如HTML、CSS、JavaScript、图片等)存储在本地,以便后续访问时快速加载。 缓存的三个状态: 1. 最新的:...

    nginx配置解决前后端的跨越问题

    返回204无内容状态码,并设置`Access-Control-Max-Age`,告知浏览器缓存这次预检请求的响应多久。 5. `proxy_pass http://your_backend_server;`:将前端的请求转发到后端服务器。 在实际部署中,你需要将`your_...

    浏览器缓存机制 mindMaster脑图与visio流程图

    在本文中,我们将深入探讨浏览器缓存的工作原理,主要包括两种主要类型的缓存:强缓存(Strong Cache)和协商缓存(Negotiate Cache),以及这两种机制在实际应用中的具体流程。 首先,我们来看“浏览器缓存流程图...

Global site tag (gtag.js) - Google Analytics