YAOHAIXIAO.COM

HTML(5),CSS(3),JavaScript,DOM,Ajax,JSON,Front-end technologies & Yaohaixiao

热门标签:JavaScript Performance 前端开发 前端性能优化 原创

Rss

Home » Frontend » Performance » 前端性能优化:Make AJAX cacheable

前端性能优化:Make AJAX cacheable

今天要介绍的YSlow前端性能优化规则是:Make AJAX cacheable(使Ajax可缓存)。

《High Performace Web Sites》 一书和 YSlow 关于 Make Ajax cacheable 的说明基本上是一样的,Make Ajax cacheable 其实就是要求对Ajax请求的内容做缓存,更直白一些,就是给这些请求(文件)添加 Expires headers。至于具体的添加缓存的处理方式,请大家参阅《前端性能优化:Add Expires headers》。既然就是 Add Expires header,那何必要单独作为一条规则呢?Steve 的说法是这样的:

我建立一条新的规则(指 Make Ajax cacheable),仅仅是在一个新的环境中简单地重申前面的规则,这有些不公平。但我发现,由于 Ajax 是如此地崭新和不一般,这些性能改进必须明确地单独提出来。

Firefox 浏览器中 Ajax 请求默认是读取本地缓存的

看来Steve对Ajax是“情有独钟”啊!Ajax 的特性我这里就不多介绍了,大家可以参阅的资料有很多了。有一点是Steve没有提到的,Firefox浏览器中 Ajax 请求默认行为(二次访问时)就是读取本地缓存的。只是这个缓存是Firefox 浏览器的“聪明”的处理,所以缓存的时间比较短。记得刚开始接触Ajax的时候,我当时还特意为了清除Firefox中的默认缓存查了很多资料,当然处理方式是很简单的,在请求的结尾加个时间戳或者随机数。

新版本的Firefox浏览器传承了这个传统,如果你还需要兼容IE浏览器,这个问题可能是大家需注意的IE浏览器中会显示最新的变更的结果,但是Firefox浏览器则会读取没有改变的本地缓存,即便服务器上的版本已经更新了。当然,本文的原则是不要依赖特殊浏览器的个别行为,要求对 Ajax请求要做明确的缓存处理。

什么样的Ajax请求需要缓存?

今天讨论的主题不是使Ajax可缓存吗?为什么又开始讨论什么样的Ajax请求需要缓存?

《High Performace Web Sites》中介绍了一点,如果Ajax请求的数据是隐私数据,这样的数据是不应该被缓存的,比如你的银行帐号之类的信息,因为将这些数据缓存到本地是很不安全。当然 Steve 在书中也提到了,这个时候我们通常使用的 https 协议处理,加密这些隐私数据。

除了前面提到的隐私数据不能缓存外,还有没有其他数据不要缓存呢?其实这个问题的答案我们在《Add Expires headers》的章节就讲过了,缓存的数据应该是很少发生变化的数据。经常发生变更的数据就是不应该缓存的,Ajax请求也是一样的。

优化 Ajax 请求

这里最后要说的是优化 Ajax 请求。其实,Ajax 请求其实跟普通的请求在数据类型上将没有特殊的,所以我们以前提到过的优化处理方法都可以用到Ajax请求上:

  • Gzip Components
  • Reduce DNS Lookups
  • Minify JavaScript
  • Avoid Redirects
  • Configure ETags

做以上这些性能优化处理,最终的目的就是为了让 Ajax 请求的相应速度尽可能的快,从而给用户一种Ajax请求是即时相应的感觉。因为我们知道,Ajax 的魅力就在于异步处里,使我们在请求处理的同时,还可在页面进行其他操作。(我个人认为)Ajax请求的最高境界就是无限的接近即时相应的体验。而这也是我们这里介绍 Make Ajax cacheable 的目的所在。

声明:本文采用BY-NC-SA协议进行授权。转载请注明转自:前端性能优化:Make AJAX cacheable

« »

1 条评论

  • 不好意思,我更正了前文中提到的一个问题,就是默认缓存AJAX请求的浏览器是Firefox浏览器而不是IE浏览器。

发表评论

电子邮件地址不会被公开。 必填项已用*标注

您可以使用这些HTML标签和属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

(Spamcheck Enabled)