浏览器缓存浏览器缓存的知识必须由前端工程师掌握。 因为这些知识会直接影响你页面的用户体验,影响你页面的加载策略。 详细介绍了浏览器缓存的概念和原理。 新人必须仔细阅读,反复反刍。 缓存知识不仅与浏览器有关,还与HTTP协议有关,这是一个难以掌握的内容。
一般而言,在硬件中,缓存将一级缓存和二级缓存分为硬件。 但是,软件缓存是不同的。
狭义上,缓存被称为缓存,严格地说,是将数据暂时存储在某个地方。 先声明一下,我的定义可能不严密,但这是我的理解,很容易理解。
关于保存在哪里有很多方法。 包括文件、内存(如session )、缓存、cookie、session和viewstate。 这些是我们经常使用的东西,但他们被认为是缓存数据。 实际上,cache的功能与session相似,但cache可以在代码中设置过期日期和依赖关系。 依赖关系是指,例如,微软的类cachedependcysqlcachedependency会在依赖关系更改时通知cache已过期且无效。 以上只是缓存,但缓存有服务器缓存和客户端缓存。
这几天,我们研究了客户端缓存,也就是浏览器缓存。 我想和大家分享,你有什么不同的意见吗?
我想大多数人很少说客户端缓存,包括我。 那是因为编程时几乎不考虑客户端缓存,书中也写得很少。 其实浏览器会自动管理缓存,但我知道知道这至少有这样的事情。 有东西要编程就必须控制客户端缓存。
浏览器缓存是指结实的黑米打开网页,浏览器自动将副本下载到你的电脑上,就像你作为网页保存在某个地方一样。 但是这里是自动的。 当然,并不是浏览器可以将各种网页下载到本地计算机上。 有特殊情况。 典型的html,后者的request是获取请求,post通常不缓存。 (这个以后再说) )。
当然,是否需要客户端缓存可以通过服务端代码来控制。 那就是应答头。
如果响应报头指示缓冲器不保存缓存,则缓冲器不缓存对应的内容;
如果请求信息需要验证或安全加密,则相应的内容也不会被缓存
验证参数非常重要,如果响应中没有一个参数,并且没有指示保鲜期(Expires或Cache-Control )的信息,则不会在缓存中存储副本。 最常见的验证参数是文档的最后修改时间,最后一个最后修改的标头信息就可以了。 如果缓存包含最后修改的信息,他将根据此信息通过添加If-Modified-Since请求参数来询问服务器自上次显示此副本以来是否进行了修改。 HTTP1.1介绍了另一个验证参数“ETag”。 服务器是服务器生成的唯一标识符,副本的标签每次都不同。 由于服务器控制着ETag的生成方式,因此缓存服务器在If-None-Match上请求的返回值不会更改,当前副本和原始副本完全匹配。 所有缓存服务器都使用最近修改的时间来确定副本是否足够新,ETag验证正在变得越来越流行。
如果响应标头以开机自检模式传递数据,则返回的大多数页面不会缓存在浏览器中。 通过URL和查询发送内容时,返回的内容将被缓存以便以后使用。
HTTP协议中与缓存相关的报头关键字包括缓存控制(http1.0 )、pragma (http 1.0 )、最后修改、Expires等。
缓存控制标头Cache-Control Cache-Control是最重要的规则。 此字段指定所有缓存机制在整个请求/响应链中必须遵循的指令。 这些命令指定用于防止缓存对请求和响应产生负面影响的行为。 这些指令通常复盖默认的缓存算法。 缓存命令是单向的。 换句话说,请求中存在命令并不意味着响应中存在相同的命令。
cache-control的定义是cache-control=“cache-control”“:”cache-directive。 表1显示了适用的值。
表1 .常规缓存定向值
Cache-directive是, public的所有内容缓存私有内容仅缓存在专用缓存中否缓存所有内容否存储所有内容缓存或互联网临时暂停如果禁用了on/proxy-revalidation缓存的内容,则请求必须发送到服务器/代理以重新验证max-age=xxx(XXXisnumeric )缓存的内容。 XXX秒后无效。 此选项仅适用于HTTP 1.1,如果与Last-Modified一起使用,则为
浏览器对表cache-directive值的响应
Cache-directive新的浏览器窗口将在原始窗口中打开
中单击 Enter 按钮刷新单击 Back 按钮public浏览器呈现来自缓存的页面浏览器呈现来自缓存的页面浏览器重新发送请求到服务器浏览器呈现来自缓存的页面private浏览器重新发送请求到服务器第一次,浏览器重新发送请求到服务器;此后,浏览器呈现来自缓存的页面浏览器重新发送请求到服务器浏览器呈现来自缓存的页面no-cache/no-store浏览器重新发送请求到服务器浏览器重新发送请求到服务器浏览器重新发送请求到服务器浏览器重新发送请求到服务器must-revalidation/proxy-revalidation浏览器重新发送请求到服务器第一次,浏览器重新发送请求到服务器;此后,浏览器呈现来自缓存的页面浏览器重新发送请求到服务器浏览器呈现来自缓存的页面max-age=xxx (xxx is numeric)在 xxx 秒后,浏览器重新发送请求到服务器在 xxx 秒后,浏览器重新发送请求到服务器浏览器重新发送请求到服务器在 xxx 秒后,浏览器重新发送请求到服务器Cache-Control是关于浏览器缓存的最重要的设置,因为它覆盖其他设置,比如 Expires 和 Last-Modified。另外,由于浏览器的行为基本相同,这个属性是处理跨浏览器缓存问题的最有效的方法。
过期头 (Expires)Expires 头部字段提供一个日期和时间,响应在该日期和时间后被认为失效。失效的缓存条目通常不会被缓存(无论是代理缓存还是用户代理缓存)返回,除非首先通过原始 服务器(或者拥有该实体的最新副本的中介缓存)验证。(注意:cache-control max-age 和 s-maxage 将覆盖 Expires 头部。)
Expires 字段接收以下格式的值:“Expires: Sun, 08 Nov 2009 03:37:26 GMT”。如果查看内容时的日期在给定的日期之前,则认为该内容没有失效并从缓存中提取出来。反之,则认为该内容失效,缓存将采取一些措施。表 3-6 表明针对不同用户操作的不同浏览器的行为。
表 3. 当用户打开一个新的浏览器窗口时的失效操作
Firefox 3.5IE 8Chrome 3Safari 4内容没有失效浏览器呈现来自缓存的页面浏览器重新发送请求到服务器。返回代码是 200浏览器呈现来自缓存的页面浏览器呈现来自缓存的页面内容失效浏览器重新发送请求到服务器。返回代码是 200浏览器重新发送请求到服务器。返回代码是 200浏览器重新发送请求到服务器。返回代码是 200浏览器重新发送请求到服务器。返回代码是 200表 4. 当用户在原始浏览器窗口中单击 Enter 按钮时的失效操作
Firefox 3.5IE 8Chrome 3Safari 4内容没有失效浏览器呈现来自缓存的页面浏览器呈现来自缓存的页面浏览器重新发送请求到服务器。返回代码是 304浏览器重新发送请求到服务器。返回代码是 304内容失效浏览器重新发送请求到服务器。返回代码是 200浏览器呈现来自缓存的页面浏览器重新发送请求到服务器。返回代码是 200浏览器重新发送请求到服务器。返回代码是 200表 5. 当用户按 F5 键刷新页面时的失效操作
Firefox 3.5IE 8Chrome 3Safari 4内容没有失效浏览器重新发送请求到服务器。返回代码是 304浏览器重新发送请求到服务器。返回代码是 304浏览器重新发送请求到服务器。返回代码是 304浏览器重新发送请求到服务器。返回代码是 304内容失效浏览器重新发送请求到服务器。返回代码是 200浏览器重新发送请求到服务器。返回代码是 200浏览器重新发送请求到服务器。返回代码是 200浏览器重新发送请求到服务器。返回代码是 200表 6. 当用户单击 Back 或 Forward 按钮时的失效操作
Firefox 3.5IE 8Chrome 3Safari 4内容没有失效浏览器呈现来自缓存的页面浏览器呈现来自缓存的页面浏览器呈现来自缓存的页面浏览器呈现来自缓存的页面内容失效浏览器呈现来自缓存的页面浏览器呈现来自缓存的页面浏览器呈现来自缓存的页面浏览器重新发送请求到服务器。返回代码是 200注意:所有浏览器都假定为使用默认设置运行。
控制文件是否有修改 Last-Modified/E-TagLast-Modified 实体头部字段值通常用作一个缓存验证器。简单来说,如果实体值在 Last-Modified 值之后没有被更改,则认为该缓存条目有效。ETag 响应头部字段值是一个实体标记,它提供一个 “不透明” 的缓存验证器。这可能在以下几种情况下提供更可靠的验证:不方便存储修改日期;HTTP 日期值的 one-second 解决方案不够用;或者原始服务器希望避免由于使用修改日期而导致的某些冲突。
不同的浏览器有不同的配置行为。表 7-10 表明针对不同用户操作的不同浏览器的行为。
表 7. 当用户打开一个新的浏览器窗口时的 Last-Modified E-Tag 操作
Firefox 3.5IE 8Chrome 3Safari 4内容自上次访问以来没有被修改浏览器重新发送请求到服务器。返回代码是 304浏览器重新发送请求到服务器。返回代码是 200浏览器重新发送请求到服务器。返回代码是 304浏览器重新发送请求到服务器。返回代码是 304内容自上次访问以来已经被修改浏览器重新发送请求到服务器。返回代码是 200浏览器重新发送请求到服务器。返回代码是 200浏览器重新发送请求到服务器。返回代码是 200浏览器重新发送请求到服务器。返回代码是 200表 8. 当用户在原始浏览器窗口中单击 Enter 按钮时的 Last-Modified E-Tag 操作
Firefox 3.5IE 8Chrome 3Safari 4内容自上次访问以来没有被修改浏览器呈现来自缓存的页面浏览器呈现来自缓存的页面浏览器重新发送请求到服务器。返回代码是 304浏览器重新发送请求到服务器。返回代码是 304内容自上次访问以来已经被修改浏览器重新发送请求到服务器。返回代码是 200浏览器呈现来自缓存的页面浏览器重新发送请求到服务器。返回代码是 200浏览器重新发送请求到服务器。返回代码是 200表 9. 当用户按 F5 键刷新页面时的 Last-Modified E-Tag 操作
Firefox 3.5IE 8Chrome 3Safari 4内容自上次访问以来没有被修改浏览器重新发送请求到服务器。返回代码是 304浏览器重新发送请求到服务器。返回代码是 304浏览器重新发送请求到服务器。返回代码是 304浏览器重新发送请求到服务器。返回代码是 304内容自上次访问以来已经被修改浏览器重新发送请求到服务器。返回代码是 200浏览器重新发送请求到服务器。返回代码是 200浏览器重新发送请求到服务器。返回代码是 200浏览器重新发送请求到服务器。返回代码是 200表 10. 没有缓存设置且用户单击 Back 或 Forward 按钮
Firefox 3.5IE 8Chrome 3Safari 4内容自上次访问以来没有被修改浏览器呈现来自缓存的页面浏览器呈现来自缓存的页面浏览器呈现来自缓存的页面浏览器呈现来自缓存的页面内容自上次访问以来已经被修改浏览器呈现来自缓存的页面浏览器呈现来自缓存的页面浏览器呈现来自缓存的页面浏览器重新发送请求到服务器。返回代码是 200注意:所有浏览器都假定使用默认设置运行。
不进行任何缓存相关设置如果您不定义任何缓存相关设置,则不同的浏览器有不同的行为。有时,同一个浏览器在相同的情形下每次运行时的行为都是不同的。情况可能很复杂。另外,有些不该缓存的内容如果被缓存,将会导致安全问题。 不同的浏览器有不同的行为。表 11 展示了不同的浏览器行为。
表 11. 没有缓存设置且用户打开一个新的浏览器窗口
Firefox 3.5IE 8Chrome 3Safari 4打开一个新页面浏览器重新发送请求到服务器。返回代码是 200浏览器重新发送请求到服务器。返回代码是 200浏览器重新发送请求到服务器。返回代码是 200浏览器重新发送请求到服务器。返回代码是 200在原始窗口中单击 Enter 按钮浏览器重新发送请求到服务器。返回代码是 200浏览器呈现来自缓存的页面。浏览器重新发送请求到服务器。返回代码是 200浏览器重新发送请求到服务器。返回代码是 200按 F5 键刷新浏览器重新发送请求到服务器。返回代码是 200浏览器重新发送请求到服务器。返回代码是 200浏览器重新发送请求到服务器。返回代码是 200浏览器重新发送请求到服务器。返回代码是 200单击 Back 或 Forward 按钮浏览器呈现来自缓存的页面。浏览器呈现来自缓存的页面。浏览器重新发送请求到服务器。返回代码是 200浏览器重新发送请求到服务器。返回代码是 200注意:所有浏览器都假定使用默认设置运行。
关键结论最后, 概括下关键的结论
操作行为打开新窗口如果指定cache- control的值为private、no-cache、must-revalidate,那么打开新窗口访问时都会重新访问服务器。而如果指定了 max-age值,那么在此值内的时间里就不会重新访问服务器,例如:Cache-control: max-age=5 表示当访问此网页后的5秒内再次访问不会去服务器.在地址栏回车如果值为private或must-revalidate,则只有第一次访问时会访问服务器,以后就不再访问。如果值为no-cache,那么每次都会访问。如果值为max-age,则在过期之前不会重复访问。按后退按扭如果值为private、must-revalidate、max-age,则不会重访问,而如果为no-cache,则每次都重复访问.按刷新按扭无论为何值,都会重复访问.