给头部添加一个失效期或者Cache-Control (Add an Expires or a Cache-Control Header)
tag:server
这条法则包含两方面:
- 对于静态组件:把头部的缓存期设为某个遥远的未来,使其能够“永不过期”。
- 对于动态组件:使用适当的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失效期,可以增加浏览器缓存的组件数量并重复用于随后的页面浏览而不需要通过用户的网络发送哪怕一个字节。