前端杂谈 · Web

前端性能优化 缓存Ajax请求

•̀.̫•́✧ · 5月1日 · 2020年 · 本文700字 · 阅读2分钟110

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

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

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

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

0 条回应