3.给头部添加一个失效期或cache-control
这条法则包含两方面:
- 对于静态组件:把头部的缓存期设为某个遥远的未来,使其能够“永不过期”。
用于设定网页的到期时间,一旦过期则必须到服务器上重新调用。需要注意的是必须使用GMT时间格式;<meta http-equiv="Expires" contect="Mon,12 May 2001 00:20:00 GMT"> 用于设定禁止浏览器从本地机的缓存中调阅页面内容,设定后一旦离开网页就无法从Cache中再调出; <meta http-equiv="Pragma" contect="no-cache">
- 对于动态组件:使用适当的Cache-Control头部帮助浏览器执行特定的请求。 response.setHeader("Cache-Control","no-cache");Cache-Control指定请求和响应遵循的缓存机制
网页设计越来越丰富,页面里包含了越来越多的脚本、样式表、图片和Flash。页面的初次访问者也许会发送多个HTTP请求,但通过给头部添加失效期,你可以使那些组件被缓存。这会避免下次浏览页面时的不必要的HTTP请求。给图片文件的头部设置失效时间更为常用,但包括脚本文件、样式表和Flash之类的所有组件的头部都应该被设置失效时间。
浏览器(还有代理服务器)使用缓存以减少HTTP请求的数量和大小,提高网页的加载速度。服务器在HTTP相应中通过头部中的过期时间告知客户端一个组件可以被缓存多久。下面是一个far future的过期头部,告诉浏览器这个响应直到2010年4月15日才会过期:
Expires: Thu, 15 Apr 2010 20:00:00 GMT
如果你使用的是Apache服务器,使用ExpiresDefault 指令会设置一个相对于当前时间的过期时间。这里有一个通过ExpiresDefault 指令把过期时间设为请求时间之后10年的例子:
ExpiresDefault "access plus 10 years"
记住,如果你使用了far future过期头部,你必须在组件更新时更换它的名字。在Yahoo!我们通常在建设网站的过程中执行这样的步骤:组件的名字里包含了它的版本,比如:yahoo_2.0.6.js。
使用一个far future过期头部只会在用户已经访问你的网站之后起作用。它不会影响一个没有缓存的初次访问者的HTTP请求数量。所以这一切的效果取决于多少用户访问页面时有一份预缓存(一份"预缓存"中已经包含了页面的所有组件)。我们对此在Yahoo!做过测试,发现拥有预缓存的用户在 75-85%。给头部添加far future失效期,可以增加浏览器缓存的组件数量并重复用于随后的页面浏览而不需要通过用户的网络发送哪怕一个字节。
表1展示了适用的值。
Cache-directive | 说明 |
---|---|
public | 所有内容都将被缓存(客户端和代理服务器都可缓存) |
private | 内容只缓存到私有缓存中(仅客户端可以缓存,代理服务器不可缓存) |
no-cache | 必须先与服务器确认返回的响应是否被更改,然后才能使用该响应来满足后续对同一个网址的请求。因此,如果存在合适的验证令牌 (ETag),no-cache 会发起往返通信来验证缓存的响应,如果资源未被更改,可以避免下载。 |
no-store | 所有内容都不会被缓存到缓存或 Internet 临时文件中 |
must-revalidation/proxy-revalidation | 如果缓存的内容失效,请求必须发送到服务器/代理以进行重新验证 |
max-age=xxx (xxx is numeric) | 缓存的内容将在 xxx 秒后失效, 这个选项只在HTTP 1.1可用, 并如果和Last-Modified一起使用时, 优先级较高 |
不同的情形下的浏览器响应
表 2 表明在不同的情形下,浏览器是将请求重新发送到服务器还是使用缓存的内容。
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。另外,由于浏览器的行为基本相同,这个属性是处理跨浏览器缓存问题的最有效的方法。
来源:http://www.cnblogs.com/smjack/archive/2008/08/23/1274846.html