yslow：使用ajax缓存

======================================================
注：本文源代码点此下载
======================================================

英文原文地址【翻译:基调网络性能分析工程师zhenzh】

ajax调用就像任何其他的http请求一样可以用来构建一个网页。然而,由于其动态的性质人们常常忽略了可以缓存它们而从中受益。

高性能网站建设的第14条规则:

缓存ajax

确保您的ajax请求遵循这条规则,特别是包含一个expires头.

这个博客帖子的其余部分包括两个重要的事实,将帮助您理解并有效应用ajax缓存

事实1 : ajax缓存和http缓存效果相同

现代浏览器的http系统和缓存系统要比ajax的xmlhttprequest对象更靠近底层. 在这个层面上,浏览器并不知道或关心ajax请求。它只是服从正常的基于从服务器返回的http响应头缓存规则。

如果你已经知道http缓存,您可以将这种知识应用到ajax的缓存。唯一真正的区别是,您可能需要以不同的方式为静态文件设置响应头。

以下http响应头是可以用来做ajax缓存的:

expires:应该被应用在你知道内容何时被修改的情况下。

例如,如果是股票价格您可能会设置一个在10秒后过期的数值。对于照片,你可以设置一个更长时间的expires头,因为你指望它永远不改变。

expires头允许浏览器在一段时间内可以重复使用缓存内容,并避免任何不需要的同服务器的交互过程.

last-modified: 设置这个标记会通知浏览器可以使用if-modified-since头来产生一个条件get请求以便检查其本地缓存。如果数据不需要更新,服务器将使用http 304状态码来响应此请求

cache-control: 如果允许,这应该被设置为'public',使其他用户可以在中间代理和缓存服务器上存储和共享数据,在firefox上,这还将启用针对https的缓存

当然,如果您使用ajax的post方法,这并不适用,因为post请求不会被缓存。如果您的ajax请求有安全性要求,你应该总是使用post方法,例如:银行帐户的资金转账。

我们创建了一个ajax缓存例子来展示这些响应头的效果. 使用httpwatch, 你可以看到我们在ajax响应头里面设置了上述全部3个响应头:

如果你以固定频率多次点击'ajax update'按钮,

你会发现ajax大约每隔1分钟更新一次,因为expires头设置为在未来的1分钟后过期。在httpwatch截图里面你可以看到重复点击刷新按钮导

致ajax请求直接从浏览器缓存里面读取,没有发生任务网络活动(即在发送和接收列里面字节数都为0) :

最后一次点击发生在 1:06.531 ,因为缓存的数据已经超过1分钟,ajax请求发生了一次网络通讯。从服务器返回的响应头200指明新的内容应该被重新下载。

事实2: ie浏览器不会刷新过期日期前的ajax内容

有时,ajax是用来在加载时填充网页的内容(如价格清单)。当页面加载完毕事件发生后,它直接被javascript调用,而不是依靠按一个按钮来触发。这使得ajax调用表现为它好像是一个嵌入的资源

当你开发一个这样的网页时,通常的想法是试图通过更新嵌入的ajax内容来刷新页面。对于其它嵌入的资源比如css或图片,浏览器自动发送的请求取决于f5 (刷新)或 ctrl+f5 (强制刷新):

f5(刷新) 如果原本的内容有一个last-modified 响应头,浏览器会建立一个有条件的更新请求. 浏览器使用if-modified-since 请求头使得服务器可以返回http 304响应代码来避免不必要的下载。

ctrl+f5 (强制刷新) 导致浏览器发送一个没有条件的get请求,其中cache-control请求头被设置为'no-cache'. 这代表不管浏览器需要的内容是否已经被缓存,所有的中间代理和缓存服务器都需要重新从原始服务器来下载此内容。

firefox会将刷新类型传递给所有ajax请求来刷新页面,因此任何ajax派生的内容都会被更新。这个httpwatch插件的屏幕快照显示了我们的ajax缓存刷新 页面效果:

firefox 确保ajax请求是被假定为带条件的get。在我们这个例子页面内,如果缓存的数据在10秒以内,服务器会返回304代码,如果数据过期 ,服务器会返回200的代码.

在 internet explorer中,

已加载的ajax请求被视为和页面刷新无关的内容,用户的刷新动作也不会被传递到ajax中。如果缓存的ajax内容还没过期,ie不会发生get请求到

服务器,它直接从缓存读取内容,导致在httpwatch中看到(cache)数据的产生。下面是在ie中缓存没有过期时按f5的效果:

即时按ctrl+f5, ajax仍然从缓存中加载内容:

这意味这在ie中,即使你按强制刷新(ctrl+f5),在内容过期之前,ajax也不会更新。确保更新的唯一方法是从缓存中删除此记录。在httpwatch中, 你可以通过使用下面的工具:

======================================================
在最后，我邀请大家参加新浪APP，就是新浪免费送大家的一个空间，支持PHP+MySql，免费二级域名，免费域名绑定 这个是我邀请的地址，您通过这个链接注册即为我的好友，并获赠云豆500个，价值5元哦！短网址是http://t.cn/SXOiLh我创建的小站每天访客已经达到2000+了，每天挂广告赚50+元哦，呵呵，饭钱不愁了，\(^o^)/