`
liulanghan110
  • 浏览: 1062086 次
  • 性别: Icon_minigender_1
  • 来自: 武汉
社区版块
存档分类
最新评论

HTTP请求中浏览器的缓存机制(转)

阅读更多
摘要:在Web开发过程中,我们可能会经常遇到浏览器缓存的问题。本文作者详细解释了浏览器缓存的机制,帮助读者更深层次的认识浏览器的缓存。

  流程

  当资源第一次被访问的时候,HTTP头部如下

(Request-Line) GET /a.html HTTP/1.1
Host
127.0.0.1
User-Agent Mozilla/
5.0 (X11; U; Linux i686; zh-CN; rv:1.9.0.15) Gecko/2009102815 Ubuntu/9.04 (jaunty) Firefox/3.0.15
Accept text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
Accept-Language zh-cn,zh;q=0.5
Accept-Encoding gzip,deflate
Accept-Charset gb2312
,utf-8;q=0.7,;q=0.7
Keep-Alive 300
Connection keep-alive

HTTP返回头部如下

(Status-Line) HTTP/1.1200 OK
Date Thu
,26 Nov 200913:50:54 GMT
Server Apache/
2.2.11 (Unix) PHP/5.2.9
Last-Modified Thu
,26 Nov 200913:50:19 GMT
Etag
"8fb8b-14-4794674acdcc0"
Accept-Ranges bytes
Content-Length
20
Keep-Alive timeout
=5, max=100
Connection Keep-Alive
Content-Type text/html

当资源第一次被访问的时候,http返回200的状态码,并在头部携带上当前资源的一些描述信息,如

Last-Modified // 指示最后修改的时间
Etag // 指示资源的状态唯一标识
Expires // 指示资源在浏览器缓存中的过期时间

  接着浏览器会将文件缓存到Cache目录下,并同时保存文件的上述信息

  当第二次请求该文件时,浏览器会先检查Cache目录下是否含有该文件,如果有,并且还没到Expires设置的时间,即文件还没有过期,那么此时浏览器将直接从Cache目录中读取文件,而不再发送请求

  如果文件此时已经过期,则浏览器会发送一次HTTP请求到WebServer,并在头部携带上当前文件的如下信息

If-Modified-Since Thu,26 Nov 200913:50:19 GMT
If-None-Match
"8fb8b-14-4794674acdcc0"

  即把上一次修改的时间,以及上一次请求返回的Etag值一起发送给服务器。服务器在接收到这个请求的时候,先解析Header里头的信息,然后校验该头部信息。

  如果该文件从上次时间到现在都没有过修改或者Etag信息没有变化,则服务端将直接返回一个304的状态,而不再返回文件资源,状态头部如下

(Status-Line) HTTP/1.1304 Not Modified
Date Thu
,26 Nov 200914:09:07 GMT
Server Apache/
2.2.11 (Unix) PHP/5.2.9
Connection Keep-Alive
Keep-Alive timeout
=5, max=100
Etag
"8fb8b-14-4794674acdcc0"

  这样,就能够很大程度上减少网络带宽以及提升用户的浏览器体验。

  当然,如果服务器经过匹配发现文件修改过了,就会将文件资源返回,并带上新文件状态信息。

  基本字段

  Pragma

  Pragma头域用来包含实现特定的指令,最常用的是Pragma:no-cache。在HTTP/1.1协议中,它的含义和Cache- Control:no-cache相同。

  Expires

  文件在本地缓存的过期时间,如果浏览器发现缓存中的文件没有过期,则不发送请求(有例外,后面介绍)

  Cache-Control

  Cache -Control指定请求和响应遵循的缓存机制。

  在请求消息或响应消息中设置 Cache-Control并不会修改另一个消息处理过程中的缓存处理过程。请求时的缓存指令包括

no-cache、no-store、max-age、 max-stale、min-fresh、only-if-cached

响应消息中的指令包括

public、private、no-cache、no- store、no-transform、must-revalidate、proxy-revalidate、max-age

  各个消息中的指令含义如下:

  1. Public指示响应可被任何缓存区缓存。

  2. Private指示对于单个用户的整个或部分响应消息,不能被共享缓存处理。这允许服务器仅仅描述当用户的部分响应消息,此响应消息对于其他用户的请求无效。

  3. no-cache指示请求或响应消息不能缓存

  4. no-store用于防止重要的信息被无意的发布。在请求消息中发送将使得请求和响应消息都不使用缓存。

  5. max-age指示客户机可以接收生存期不大于指定时间(以秒为单位)的响应。

  6. min-fresh指示客户机可以接收响应时间小于当前时间加上指定时间的响应。

  7. max-stale指示客户机可以接收超出超时期间的响应消息。如果指定max-stale消息的值,那么客户机可以接收超出超时期指定值之内的响应消息。

  Etag/If-None-Match

  一对验证文件实体的标记“Entity Tag”的响应/请求头Apache中,ETag的值,默认是对文件的索引节(INode),大小(Size)和最后修改时间(MTime)进行Hash后得到的

  Last-Modified/If-Modified-Since

  一对验证文件的修改时间的响应/请求头

  Expires、Cache-Control、Last-Modified、ETag是RFC 2616(HTTP/1.1)协议中和网页缓存相关的几个字段。

  前两个用来控制缓存的失效日期,浏览器可通过它来判定,需不需要发出HTTP请求;

  后两个用来验证网页的有效性,服务器端利用它来验证这个文件是否需要重新返回

  Last-Modified VS Etag

  既然有了Last-Modified,为什么还要用ETag字段呢?因为如果在一秒钟之内对一个文件进行两次更改,Last-Modified就会不正确。因此,HTTP/1.1利用Entity Tag头提供了更加严格的验证。

  不同的情况

  上面描述的是一个普通的浏览器缓存状态,在实际应用中,如页面跳转(点击页面链接跳转,window.open,在地址栏敲回车,刷新页面)等操作,会有一些区别

  普通页面跳转

  普通页面跳转包括链接点击跳转,用js脚本打开新页面(window.open)

  无缓存情况下,请求会返回所有资源结果

  设置Expires并且未过期时,浏览器将不会发出http请求

  如果Expires过期,则会发送相应请求,并附带上Last-Modifed等信息,供服务器校验

  页面刷新(F5)

  这种情况一下,一般会看到很多304的请求,就是说即便资源设置了Expires且未过期,浏览器也会发送相应请求

  IE和FF稍有区别

  IE:

If-Modified-Since Wed,18 Nov 200915:54:52 GMT
If-None-Match
"2360492659"
Pragma: no-cache // 禁止缓存

  FF:

If-Modified-Since Wed,18 Nov 200915:54:52 GMT
If-None-Match
"2360492659"
Cache-Control max-age
=0 // 文件立即过期

  强制刷新(Ctrl+F5)

  效果和无缓存时候一致,返回200的结果

  一些特殊的资源

  IFRAME

  FLASH

  异步获取的数据

  待研究……

分享到:
评论

相关推荐

    浏览器HTTP缓存机制

    描述了web浏览器,关于HTTP缓存机制的流程

    浏览器缓存机制剖析

    本篇从HTTP请求和响应的头域入手,让你对浏览器缓存有个整体的概念。最终你会发现强缓存,协商缓存和启发式缓存是如此的简单。浏览器对于请求资源,拥有一系列成熟的缓存策略。按照发生的时间顺序分别为存储策略、...

    详解浏览器缓存和webpack缓存配置

    浏览器缓存机制的过程如下: 强缓存(本地缓存) 强缓存是最彻底的缓存,无需向服务器发送请求,通常用于css、js、图片等静态资源。浏览器发送请求后会先判断本地是否有缓存。如果无缓存,则直接向服务器发送请求;...

    浏览器之HTTP缓存的那些事

    浏览器之HTTP缓存的那些事 什么是浏览器缓存 浏览器HTTP执行机制 缓存模式 缓存相关的Http Header Cache-Control Expires Last-Modified ETag

    ASP.NET性能优化之让浏览器缓存动态网页的方法

    OutputCache是针对所有访问服务器资源的用户,本篇要介绍的浏览器缓存则是针对单个用户,让浏览器在我们的控制下彻底不持续访问服务器上的动态内容,也就是我们要让浏览器变成我们的缓存机制中的一部分,在某些特定...

    深入PHP与浏览器缓存的分析

    我们往往在服务器上对缓存设置进行各种优化方案,但是我们却很少注意到客户端缓存,准确的说是浏览器的缓存机制。其实每种浏览器都有缓存策略,会暂时将每一个浏览过的文件缓存在一个特殊的文件夹里。我们就可以在...

    2018最新BAT python面试题.docx

    浏览器缓存机制,其实主要就是HTTP协议定义的缓存机制(如: Expires; Cache-control等) Expires策略 Expires是Web服务器响应消息头字段,在响应http请求时告诉浏览器在过期时间前浏览器可以直接从浏览器缓存取...

    浅谈Ajax的缓存机制

    Ajax的缓存机制和浏览器处理资源时的缓存机制是一样的。 三条简单规则: 只要是URL相同的GET请求,浏览器会使用缓存(当然还要看服务器的Cache-Control/Expires/Last-Modified/ETag头的设置)。 只要是POST请求,...

    解析浏览器端的AJAX缓存机制

    AJAX的缓存是由浏览器维持的,对于发向服务器的某个url,ajax仅在第一次请求时与服务器交互信息,之后的请求中,ajax不再向服务器提交请求,而是直接从缓存中提取数据。...现代浏览器的HTTP和缓存机制比Ajax的X

    如何解决Ajax请求结果的缓存问题说明

    在某些情况下,这种默认的缓存机制并不是我们希望的(比如获取实时数据),这篇文章就来简单地讨论这个问题,以及介绍几种解决方案。目录 一、问题重现 二、通过为URL地址添加后缀的方式解决问题 三、通过JQuery的...

    06-浏览器问题-网络问题-个人课堂总结

    内容概要:从输入URL到页面加载的全过程、浏览器重绘与重排的区别、如何触发避免重排和重绘、304过程、浏览器的缓存机制 强制缓存 && 协商缓存、进程、线程和协程区别联系、网络问题、HTTP 和 HTTPS概念区别优缺点...

    django开发教程之利用缓存文件进行页面缓存的方法

    浏览器缓存机制 Cache-control策略Cache-Control与Expires的作用一致,都是指明当前资源的有效期,控制浏览器是否直接从浏览器缓存取数据还是重新发请求到服务器取数据。只不过Cache-Control的选择更多,设置更细致...

    HTTP 超详解 一文搞定HTTP面试知识

    4. HTTP缓存(浏览器缓存机制) 强缓存 协商缓存 5. 不同版本HTTP HTTP 0.9 HTTP 1.0 HTTP 1.1 HTTP 2.0 (一)HTTP原理 这部分学习并参考于:HTTP协议超级详解 超文本传输协议(英文:HyperText Transfer Protocol...

    Asp.NET性能优化之减少请求

    在上篇《ASP.NET性能优化之让浏览器缓存动态网页》 中的方案中,浏览器发送If-Modified-Since将是否需要使用自己的缓存交给WEB服务器去决定,服务器告知浏览器去读缓存,浏览器才会去读缓存。这种机制存在的性能损耗...

    浅析IE浏览器关于ajax的缓存机制

    因为,在默认情况下,IE会缓存ajax的请求结果。对于同一个URL地址,在缓存过期之前,只有第一次请求会真正发送到服务端。大多数情况下,我们使用ajax是希望实现局部刷新的,所以这就牵扯到一个改进的问题。  如果想...

    浅析IE针对Ajax请求结果的缓存问题

    在某些情况下,这种默认的缓存机制并不是我们希望的(比如获取实时数据),这篇文章就来简单地讨论这个问题,以及介绍几种解决方案。 目录 一、问题重现 二、通过为URL地址添加后缀的方式解决问题 三、通过...

    Glype在线代理程序 1.4.6.zip

    Glype在线代理程序是一个用PHP编写的基于Web的代理脚本,用来作为web的代理服务器,可帮你请求目标URL,并生成相应的页面,无需修改浏览器配置即可访问各种网站。 主要特点: 即插即用,无需安装 基于Web的管理...

    HTML5 离线应用之打造零请求、无流量网站的解决方法

    本地缓存于浏览器缓存复制代码代码如下:本地缓存是为整个web应用程序服务浏览器缓存只对单个网页服务 任何网页都具有网页缓存本地缓存只缓存那些你指定缓存的页面 网页缓存不可靠、不安全,因为我们不知道网站中到底...

    sticky:利用最新的 HTML5 存储 API 的简单键值对浏览器存储缓存

    黏 Sticky 是一个简单的键/值对... WebSQL (SQLite) Chrome 4+、Opera 10.5+、Safari 3.1+ 和 Android 浏览器 2.1+ 每个数据库 5MB 数据,但可以请求更多 本地存储Safari 4+、Mobile Safari (iPhone/iPad)、Firefox

Global site tag (gtag.js) - Google Analytics