关闭搜索(ESC)
搜索标签:

浏览器缓存

2015-12-01 浏览:763 标签: 浏览器缓存

为什么大多数前端工程师不懂客户端缓存

因为浏览器自动帮你自动管理缓存。

缓存过程

打开一个网页,浏览器会自动下载副本到你电脑上,不是所有的网页都能下载都本地电脑上的,一般是html,然后是request的get请求,但是post请求一般是不缓存的。

当然客户端缓存是否需要是可以在服务端代码上控制,那就是响应头。如果请求信息是需要认证或者安全加密的,相应内容也不会缓存;

校验

校验参数非常重要,如果回应中1个参数都不存在,并且没有任何信息说明保鲜期(Expires或Cache-Control)的情况下,缓存将不会存储任何副本;

最常见的校验参数是文档的最后修改时间,通过最后Last-Modified头信息可以,当一份缓存包含Last-Modified信息,他基于此信息,通过添加一个If-Modified-Since请求参数,想服务器查询:这个副本从上次查看是否被修改。

在HTTP 1.1介绍了另外一个校验参数:ETag,是服务器生成的唯一标识符,每次副本的标签都会变化。由于服务器控制了ETag如何生成,缓存服务器可以通过If-None-Match请求的返回没变则当前副本和原件完全一致。

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

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

缓存控制头Cache-Control

Cache-Control是最重要的规则。这个字段用于指定所有缓存机制在整个请求/响应链中必须服从的指令。

缓存指令是单向的,请求中存在一个指令并不意味着响应中讲存在同一个指令。

Cache-control定义是: Cache-Control: cache-directive。

常用cache-directive值:

Cache-directive 说明
public 所有内容都将被缓存
private 内容只缓存到私有缓存中
no-chache 所有内容都不会被缓存
no-store 所有内容都不会被缓存到缓存或Internet临时文件中
must-revalidation/proxy-revalidation 如果缓存的内容失效,请求必须发送到服务器/代理以进行重新验证
max-age=xxx(xxx is numeric) 缓存的内容将在xxx秒后失效,这个选项只在HTTP1.1可用,并如果和Last-Modified一起使用时,优先级较高.

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

Cache-directive 打开一个新的浏览器窗口 在原窗口中单机Enter按钮 刷新 单击Back按钮
public 浏览器呈现来自缓存的页面 浏览器呈现来自缓存的页面 浏览器重新发送请求到服务器 浏览器呈现来自缓存的页面
privite 浏览器重新发送请求到服务器 第一次,浏览器重新发送请求到服务器;此后,浏览器呈现来自缓存的页面 浏览器重新发送请求到服务器 浏览器呈现来自缓存的页面
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

如果查看的内容时的时期在给定的日期之前,则内容没有失效,从缓存里拿出数据。

下表为用户打开一个新的浏览器窗口的失效操作

Firefox 3.5 IE 8 Chrome 3 Safair4
内容没有失效 浏览器呈现来自缓存的页面 浏览器重新发送请求到服务器。返回代码是200 浏览器呈现来自缓存的页面 浏览器呈现来自缓存的页面
内容失效 浏览器重新发送请求到服务器。返回代码是200 浏览器重新发送请求到服务器。返回代码是200 浏览器重新发送请求道服务器。返回代码是200 浏览器重新发送请求到服务器。返回代码是200

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

Firefox 3.5 IE 8 Chrome 3 Safair 4
内容没有失效 浏览器呈现来自缓存的页面 浏览器呈现来自缓存的页面 浏览器重新发送请求到服务器。返回代码是304 浏览器重新发送请求到服务器。返回代码是304
内容失效 浏览器重新发送请求到服务器。返回代码是200 浏览器呈现来自缓存的页面 浏览器重新发送请求到服务器。返回代码是200 浏览器重新发送请求到服务器。返回代码是200

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

Firefox 3.5 IE 8 Chrome 3 Safari 4
内容没有失效 浏览器重新发送请求到服务器。返回代码是304。 浏览器重新发送请求到服务器。返回代码是304 浏览器重新发送请求到服务器。返回代码是304 浏览器重新发送请求到服务器。返回代码是304
内容失效 浏览器重新发送请求到服务器。返回代码是200 浏览器重新发送请求到服务器。返回代码是200 浏览器重新发送请求到服务器。返回代码是200 浏览器重新发送请求到服务器。返回代码是200

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

Firefox 3.5 IE 8 Chrome 3 Safari 4
内容没有失效 浏览器呈现来自缓存的页面 浏览器呈现来自缓存的页面 浏览器呈现来自缓存的页面 浏览器呈现来自缓存的页面
内容失效 浏览器呈现来自缓存的页面 浏览器呈现来自缓存的页面 浏览器呈现来自缓存的页面 浏览器重新发送请求到服务器。返回代码是200

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

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

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

|Firefox 3.5|IE 8|Chrome 3|Safari 4 内容自上次访问以来没有被修改|浏览器重新发送请求到服务器。返回代码是304|浏览器重新发送请求到服务器。返回代码是200|浏览器重新发送请求到服务器。返回代码是304|浏览器重新发送请求到服务器。返回代码是304 内容自上次访问以来已经被修改|浏览器重新发送请求到服务器。返回代码是200|浏览器重新发送请求到服务器。返回代码是200|浏览器重新发送请求到服务器。返回代码是200|浏览器重新发送请求到服务器。返回代码是200

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

|Firefox 3.5|IE 8|Chrome 3|Safari 4 内容自上次访问以来没有被修改|浏览器呈现来自缓存的页面|浏览器呈现来自缓存的页面|浏览器重新发送请求到服务器。返回代码是304|浏览器重新发送请求到服务器。返回代码是304 内容自上次访问以来已经被修改|浏览器重新发送请求到服务器。返回代码是200|浏览器呈现来自缓存的页面|浏览器重新发送请求到服务器。返回代码是200|浏览器重新发送请求到服务器。返回代码是200

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

|Firefox 3.5|IE 8|Chrome 3|Safari 4 内容自上次访问以来没有被修改|浏览器重新发送请求到服务器。返回代码是 304|浏览器重新发送请求到服务器。返回代码是 304|浏览器重新发送请求到服务器。返回代码是304|浏览器重新发送请求到服务器。返回代码是304 内容自上次访问以来已经被修改|浏览器重新发送请求到服务器。返回代码是200|浏览器重新发送请求到服务器。返回代码是200|浏览器重新发送请求到服务器。返回代码是200|浏览器重新发送请求到服务器。返回代码是200

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

|Firefox 3.5|IE 8|Chrome 3|Safari 4 内容自上次访问以来没有被修改|浏览器呈现来自缓存的页面|浏览器呈现来自缓存的页面|浏览器呈现来自缓存的页面|浏览器呈现来自缓存的页面 内容自上次访问以来已经被修改|浏览器呈现来自缓存的页面|浏览器呈现来自缓存的页面|浏览器呈现来自缓存的页面|浏览器重新发送请求到服务器。返回代码是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,则每次都重复访问.
按刷新按扭 无论为何值,都会重复访问.

资料

浏览器缓存机制详解

添加评论