码迷,mamicode.com
首页 > 其他好文 > 详细

浏览器缓存

时间:2015-04-22 09:25:38      阅读:119      评论:0      收藏:0      [点我收藏+]

标签:

因为这些知识直接影响到我们的页面的用户体验,影响到页面的加载策略。浏览器缓存的概念和原理,新人要仔细阅读,甚至要多次反刍,缓存的知识除了和浏览器有关,还涉及到HTTP协议,所以这也是比较难于掌握的内容。

一般在硬件中,缓存在硬件中分一级缓存,二级缓存。但在软件中的缓存却不一样。

 

狭义上讲缓存就叫高速缓存,严格讲就是将数据暂时存放到某个地方。先要声明下,我的定义可能不严格,但这是我的理解,通俗易懂。

至于存到什么地方就有很多方式,可放到文件,内存中(如session),还有cache(高速缓存),还有 cookiesessionviewstate,这些是我们经常用到的,但可以认为他们是缓存数据。其实cachesession有相似功能,但 cache可在代码中设置过期时间,依赖项。所谓依赖项(例如:微软的类cachedependcy sqlCacheDependency)当依赖项变动了,系统会通知cache过期,无效。以上只是说缓存,缓存可是有服务器缓存,客户端缓存啊。

 

估计大多数人很少说客户端缓存,包括我在内。那是因为我们编程时基本不考虑客户端缓存,书上也写得少。其实浏览器自动会管理缓存,但了解它至少知道有这么回事,有事编程还要控制客户端缓存。

浏览器缓存就是当你打开一个网页,浏览器会自动下载副本到你电脑上,就相当于你另存为网页到某个地方而已,只不过这里是自动而已。当然不是浏览器能把各种网页都能下载到本地电脑上,它是有特殊情况。一般html,后者requestget请求,而post一般不缓存。(这个后面会说到)

当然客户端缓存是否需要是可以在服务端代码上控制的。那就是响应头。

响应头告诉缓存器不要保留缓存,缓存器就不会缓存相应内容;

如果请求信息是需要认证或者安全加密的,相应内容也不会被缓存;

 

校验参数非常重要,如果回应中1个参数都不存在,并且没有任何信息说明保鲜期(ExpiresCache-Control)的情况下,缓存将不会存储任何副本;最常见的校验参数是文档的最后修改时间,通过最后Last-Modified头信息可以,当一份缓存包含Last-Modified信息,他基于此信息,通过添加一个If-Modified-Since请求参数,向服务器查询:这个副本从上次查看后是否被修改了。 HTTP 1.1介绍了另外一个校验参数: ETag,服务器是服务器生成的唯一标识符ETag,每次副本的标签都会变化。由于服务器控制了ETag如何生成,缓存服务器可以通过If-None-Match请求的返回没变则当前副本和原件完全一致。所有的缓存服务器都使用Last-Modified时间来确定副本是否够新,而ETag校验正变得越来越流行。

响应头如果是POST模式递交数据,则返回的页面大部分不会被浏览器缓存,如果你发送内容通过URL和查询(通过GET模式),则返回的内容可以缓存下来供以后使用。

HTTP协议中关于缓存的信息头关键字包括Cache-Control(HTTP1.1)Pragma(HTTP1.0)last-ModifiedExpires等。

缓存控制头 Cache-Control

Cache-Control 是最重要的规则。这个字段用于指定所有缓存机制在整个请求/响应链中必须服从的指令。这些指令指定用于阻止缓存对请求或响应造成不利干扰的行为。这些指令通常覆盖默认缓存算法。缓存指令是单向的,即请求中存在一个指令并不意味着响应中将存在同一个指令。

cache-control 定义是:Cache-Control = “Cache-Control” “:” cache-directive。表 1 展示了适用的值。

 

1. 常用 cache-directive

Cache-directive

说明

public

所有内容都将被缓存

private

内容只缓存到私有缓存中

no-cache

所有内容都不会被缓存

no-store

所有内容都不会被缓存到缓存或 Internet 临时文件中

must-revalidation/proxy-revalidation

如果缓存的内容失效,请求必须发送到服务器/代理以进行重新验证

max-age=xxx (xxx is numeric)

缓存的内容将在 xxx 秒后失效, 这个选项只在HTTP 1.1可用, 并如果和Last-Modified一起使用时, 优先级较高

2 表明在不同的情形下,浏览器是将请求重新发送到服务器还是使用缓存的内容。

 

2. 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

IE

Chrome

Safari

内容没有失效

浏览器呈现来自缓存的页面

浏览器重新发送请求到服务器。返回代码是 200

浏览器呈现来自缓存的页面

浏览器呈现来自缓存的页面

内容失效

浏览器重新发送请求到服务器。返回代码是 200

浏览器重新发送请求到服务器。返回代码是 200

浏览器重新发送请求到服务器。返回代码是 200

浏览器重新发送请求到服务器。返回代码是 200

 

4. 当用户在原始浏览器窗口中单击 Enter 按钮时的失效操作

 

Firefox

IE 

Chrome

Safari

内容没有失效

浏览器呈现来自缓存的页面

浏览器呈现来自缓存的页面

浏览器重新发送请求到服务器。返回代码是 304

浏览器重新发送请求到服务器。返回代码是 304

内容失效

浏览器重新发送请求到服务器。返回代码是 200

浏览器呈现来自缓存的页面

浏览器重新发送请求到服务器。返回代码是 200

浏览器重新发送请求到服务器。返回代码是 200

 

5. 当用户按 F5 键刷新页面时的失效操作

 

Firefox

IE 

Chrome

Safari

内容没有失效

浏览器重新发送请求到服务器。返回代码是 304

浏览器重新发送请求到服务器。返回代码是 304

浏览器重新发送请求到服务器。返回代码是 304

浏览器重新发送请求到服务器。返回代码是 304

内容失效

浏览器重新发送请求到服务器。返回代码是 200

浏览器重新发送请求到服务器。返回代码是 200

浏览器重新发送请求到服务器。返回代码是 200

浏览器重新发送请求到服务器。返回代码是 200

 

6. 当用户单击 Back Forward 按钮时的失效操作

 

Firefox

IE 

Chrome

Safari

内容没有失效

浏览器呈现来自缓存的页面

浏览器呈现来自缓存的页面

浏览器呈现来自缓存的页面

浏览器呈现来自缓存的页面

内容失效

浏览器呈现来自缓存的页面

浏览器呈现来自缓存的页面

浏览器呈现来自缓存的页面

浏览器重新发送请求到服务器。返回代码是 200

注意:所有浏览器都假定为使用默认设置运行。

控制文件是否有修改 Last-Modified/E-Tag

Last-Modified 实体头部字段值通常用作一个缓存验证器。简单来说,如果实体值在 Last-Modified 值之后没有被更改,则认为该缓存条目有效。ETag 响应头部字段值是一个实体标记,它提供一个不透明的缓存验证器。这可能在以下几种情况下提供更可靠的验证:不方便存储修改日期;HTTP 日期值的 one-second 解决方案不够用;或者原始服务器希望避免由于使用修改日期而导致的某些冲突。

不同的浏览器有不同的配置行为。表 7-10 表明针对不同用户操作的不同浏览器的行为。

 

7. 当用户打开一个新的浏览器窗口时的 Last-Modified E-Tag 操作

 

Firefox

IE 

Chrome

Safari

内容自上次访问以来没有被修改

浏览器重新发送请求到服务器。返回代码是 304

浏览器重新发送请求到服务器。返回代码是 200

浏览器重新发送请求到服务器。返回代码是 304

浏览器重新发送请求到服务器。返回代码是 304

内容自上次访问以来已经被修改

浏览器重新发送请求到服务器。返回代码是 200

浏览器重新发送请求到服务器。返回代码是 200

浏览器重新发送请求到服务器。返回代码是 200

浏览器重新发送请求到服务器。返回代码是 200

 

8. 当用户在原始浏览器窗口中单击 Enter 按钮时的 Last-Modified E-Tag 操作

 

Firefox

IE 

Chrome

Safari

内容自上次访问以来没有被修改

浏览器呈现来自缓存的页面

浏览器呈现来自缓存的页面

浏览器重新发送请求到服务器。返回代码是 304

浏览器重新发送请求到服务器。返回代码是 304

内容自上次访问以来已经被修改

浏览器重新发送请求到服务器。返回代码是 200

浏览器呈现来自缓存的页面

浏览器重新发送请求到服务器。返回代码是 200

浏览器重新发送请求到服务器。返回代码是 200

 

9. 当用户按 F5 键刷新页面时的 Last-Modified E-Tag 操作

 

Firefox

IE 

Chrome

Safari

内容自上次访问以来没有被修改

浏览器重新发送请求到服务器。返回代码是 304

浏览器重新发送请求到服务器。返回代码是 304

浏览器重新发送请求到服务器。返回代码是 304

浏览器重新发送请求到服务器。返回代码是 304

内容自上次访问以来已经被修改

浏览器重新发送请求到服务器。返回代码是 200

浏览器重新发送请求到服务器。返回代码是 200

浏览器重新发送请求到服务器。返回代码是 200

浏览器重新发送请求到服务器。返回代码是 200

 

10. 没有缓存设置且用户单击 Back Forward 按钮

 

Firefox

IE 

Chrome

Safari

内容自上次访问以来没有被修改

浏览器呈现来自缓存的页面

浏览器呈现来自缓存的页面

浏览器呈现来自缓存的页面

浏览器呈现来自缓存的页面

内容自上次访问以来已经被修改

浏览器呈现来自缓存的页面

浏览器呈现来自缓存的页面

浏览器呈现来自缓存的页面

浏览器重新发送请求到服务器。返回代码是 200

注意:所有浏览器都假定使用默认设置运行。

不进行任何缓存相关设置

如果您不定义任何缓存相关设置,则不同的浏览器有不同的行为。有时,同一个浏览器在相同的情形下每次运行时的行为都是不同的。情况可能很复杂。另外,有些不该缓存的内容如果被缓存,将会导致安全问题。不同的浏览器有不同的行为。表 11 展示了不同的浏览器行为。

 

11. 没有缓存设置且用户打开一个新的浏览器窗口

 

Firefox

IE 

Chrome

Safari

打开一个新页面

浏览器重新发送请求到服务器。返回代码是 200

浏览器重新发送请求到服务器。返回代码是 200

浏览器重新发送请求到服务器。返回代码是 200

浏览器重新发送请求到服务器。返回代码是 200

在原始窗口中单击 Enter 按钮

浏览器重新发送请求到服务器。返回代码是 200

浏览器呈现来自缓存的页面。

浏览器重新发送请求到服务器。返回代码是 200

浏览器重新发送请求到服务器。返回代码是 200

F5 键刷新

浏览器重新发送请求到服务器。返回代码是 200

浏览器重新发送请求到服务器。返回代码是 200

浏览器重新发送请求到服务器。返回代码是 200

浏览器重新发送请求到服务器。返回代码是 200

单击 Back Forward 按钮

浏览器呈现来自缓存的页面。

浏览器呈现来自缓存的页面。

浏览器重新发送请求到服务器。返回代码是 200

浏览器重新发送请求到服务器。返回代码是 200

注意:所有浏览器都假定使用默认设置运行。

 

关键结论

操作

行为

打开新窗口

如果指定cache- control的值为privateno-cachemust-revalidate,那么打开新窗口访问时都会重新访问服务器。而如果指定了 max-age,那么在此值内的时间里就不会重新访问服务器,例如:Cache-control: max-age=5 表示当访问此网页后的5秒内再次访问不会去服务器.

在地址栏回车

如果值为privatemust-revalidate,则只有第一次访问时会访问服务器,以后就不再访问。如果值为no-cache,那么每次都会访问。如果值为max-age,则在过期之前不会重复访问。

按后退按扭

如果值为privatemust-revalidatemax-age,则不会重访问,而如果为no-cache,则每次都重复访问.

按刷新按扭

无论为何值,都会重复访问.

 

 

 

 

浏览器缓存

标签:

原文地址:http://www.cnblogs.com/zhuyang/p/4446395.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!