« Palm被MOTO以20亿美元收购,是一个谣言 | Main | links for 2007-03-23 »

提高AJAX程序的性能的tips

前两天查了一些关于如何提高AJAX程序性能的网页,把结果总结一下。

影响AJAX程序性能的几个方面:

  • Javascript 程序本身。比如字符串的连接操作带来的性能影响
  • DOM操作。操作DOM节点是很有讲究的,相同的结果采用不同的方法效率能够相差几十倍。
  • 渲染页面。浏览器的引擎结合DOM和CSS渲染页面的时候也会占用时间和资源。
  • 网络流量。由于网络的延迟也会造成AJAX程序性能不好。

了解这些方面之后,就知道从那些地方入手提高性能。

在动手提高性能之前,最好构造一个方法衡量性能。

常用的方法就是,准备一个测试用的数据集,在javascript上加上计时器,测出一个时间作为基准时间,然后每次改变程序之后都再看一下新的运行时间是多少。这样有明确的指

标,才能够使得提高性能的尝试通往正确的方向。

最后就是一些tips,使用这些tips可以很好提高性能:

  • 使用innerHTML不要使用createElement
  • 使用innerText不要使用innerHTML
  • 避免改变class,直接操纵style这个对象。
  • 缓存全局对象。document啊,window啊,使用这些全局对象消耗还是挺大的,如果频繁使用的话,应该把它们缓存在局部变量里。
  • 缓存对象的属性,比如s.Length.
  • 复用已有的元素。
  • 如果字符串连接操作比较多的时候(>10000),使用Array.join来代替字符串的 "+".

参考文献:

del.icio.us tags: ajax, performance, web, develop

广告