缓存 Ajax 请求—前端性能优化 14

雅虎前端优化总结的35 条前端性能优化军规第十四条：缓存 Ajax 请求。Ajax 的一个好处是可以给用户提供即时反馈，因为它能够从后台服务器异步请求数据。然而，用了 Ajax 就无法保证用户在等待异步 JavaScript 和 XML 响应返回期间不会非常无聊。在很多应用程序中，用户能够一直等待取决于如何使用 Ajax。例如，在基于 Web 的电子邮件客户端中，用户为了寻找符合他们搜索标准的邮件消息，将会保持对 Ajax 请求返回结果的关注。重要的是，要记得『异步』并不意味着『即时』。

要提高性能，优化这些 Ajax 响应至关重要。最重要的提高 Ajax 性能的方法就是让响应变得可缓存，就像在 添上 Expires 或者 Cache-Control HTTP 头 中讨论的一样。下面适用于 Ajax 的其它规则：

• Gzip 压缩
• 减少 DNS 查找
• 压缩 JavaScript
• 避免重定向
• 配置 ETags

我们一起看看例子，一个 Web 2.0 的电子邮件客户端用了 Ajax 来下载用户的通讯录，以便实现自动完成功能。如果用户从上一次使用之后再没有修改过她的通讯录，而且 Ajax 响应是可缓存的，有尚未过期的 Expires 或者 Cache-Control HTTP 头，那么之前的通讯录就可以从缓存中读出。必须通知浏览器，应该继续使用之前缓存的通讯录响应，还是去请求一个新的。可以通过给通讯录的 Ajax URL 里添加一个表明用户通讯录最后修改时间的时间戳来实现，例如 &t=1190241612。如果通讯录从上一次下载之后再没有被修改过，时间戳不变，通讯录就将从浏览器缓存中直接读出，从而避免一次额外的 HTTP 往返消耗。如果用户已经修改了通讯录，时间戳也可以确保新的 URL 不会匹配缓存的响应，浏览器将请求新的通讯录条目。

即使 Ajax 响应是动态创建的，而且可能只适用于单用户，它们也可以被缓存的，而这样会让你的 Web 2.0 应用更快。