提高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来代替字符串的 "+".
参考文献:
- Faster DHTML in 12 Steps
- Building High Performance HTML Pages
- DHTML性能提高的其他技巧
- IE + JavaScript Performance Recommendations - Part 1
- IE+JavaScript Performance Recommendations Part 2: JavaScript Code Inefficiencies
- Ajax Performance
- Boost Ajax performance using local storage
- JavaScript Performance Issues - Lesson 1
- JavaScript Performance Issues - Lesson 2
- JavaScript Performance Issues - Lesson 3