网站访问优化之-内容篇-使Ajax可缓存

使Ajax可缓存

Ajax引用的好处之一是它为用户提供即时反馈,因为它从后端Web服务器异步请求信息。但是,使用Ajax并不能保证用户不会在等待那些异步的JavaScript和XML响应返回时扭动他的拇指。在许多应用程序中,用户是否在等待取决于如何使用Ajax。例如,在基于Web的电子邮件客户端中,用户将不断等待Ajax请求的结果,以查找与其搜索条件相匹配的所有电子邮件。记住“异步”并不意味着“即时”。

为了提高性能,优化这些Ajax响应非常重要。提高Ajax性能的最重要方法是使响应可缓存,如添加过期或缓存控制头中所述。其他一些规则也适用于Ajax:
Gzip组件
减少DNS查找
缩小JavaScript
避免重定向
配置ETags

我们来看一个例子。Web 2.0电子邮件客户端可能使用Ajax来下载自动完成的用户地址簿。如果用户自上次使用电子邮件Web应用程序以来尚未修改通讯录,则可以从缓存中读取以前的地址簿响应(如果该Ajax响应可以使用未来的Expires或Cache-Control标头进行缓存)。必须通知浏览器何时使用先前缓存的地址簿响应与请求新的响应。这可以通过向地址簿Ajax URL添加时间戳来指示用户最后一次修改她的地址簿,例如,&t=1190241612。如果地址簿自上次下载以来没有被修改,则时间戳将是相同的,地址簿将从浏览器的缓存中读取,从而消除额外的HTTP往返。如果用户修改了地址簿,则时间戳会确保新的URL与缓存的响应不匹配,浏览器将请求更新的地址簿条目。

即使您的Ajax响应是动态创建的,并且可能只适用于单个用户,但它们仍可以被缓存。这样做会使您的Web 2.0应用程序更快。

尽早的释放缓冲

当用户请求页面时,后台服务器可能需要200到500毫秒的时间来拼接HTML页面。在此期间,浏览器在等待数据到达时处于空闲状态。在PHP中,你有函数flush()。它允许您将部分就绪的HTML响应发送到浏览器,以便浏览器可以在您的后端忙于HTML页面的其余部分时开始获取组件。这个好处主要是在繁忙的后台或前台看到的。

考虑刷新的好地方就在HEAD之后,因为头部的HTML通常更容易生成,并允许您包含任何CSS和JavaScript文件,以使浏览器在后端仍在处理的同时开始并行读取。

例:

... <! - css,js - >
 </ HEAD>
 <?php flush(); ?>
 <BODY>
 ... <! - content - >

雅虎 搜索率先研究和真正的用户测试,以证明使用这种技术的好处。

使用GET进行AJAX请求

在雅虎 邮件小组发现,在使用时XMLHttpRequest,POST在浏览器中分两步实现:首先发送邮件头,然后发送数据。所以最好使用GET,它只需要一个TCP数据包发送(除非你有很多的cookie)。IE中最大的URL长度是2K,所以如果你发送超过2K的数据,你可能无法使用GET。

一个有趣的副作用是POST没有实际发布任何数据的行为像GET。基于HTTP规范,GET是为了检索信息,所以当你只是请求数据时使用GET(在语义上)是有意义的,而不是发送数据到服务器端存储。