怎么让你的Ajax程序在客户端上健步如飞
Ajax甚是火爆,很多人能感受到。但你的Web2.0程序运行起来,却不见得如你想象中的那么理想。了解一些简单的优化技巧就能有所帮助。
最近在Mix 2007上,由领导Internet Explorer团队的资深程序经理Cyra Richardson发表了一篇名位《
How-to Make your AJAX Applications Scream on the Client 》的报告,向开发者深入介绍提高客户端程序性能更好的种种途径。
报告阐述了在时下的环境中如何更好地改进AJAX应用程序的性能。尽管报告中所讨论的性能改进的方法集中在Internet Explorer上,但不管是哪种浏览器,这些指导方针都是可以遵循的。
这些优化技巧并不依赖于服务端或者嵌入代码所用的语言。所以,无论你在用的是C#、VB.NET写的ASP.NET技术,还是Java、RoR同样适用。
符号解析之优化
如何在迟绑定的环境下提速。讲述从变量到DOM本身的作用域之束缚,以及如何确保不受其拖累。
避免使用低效的JavaScript代码,这个原则适用于所有的浏览器平台,不止 Internet Explorer,FireFox、Safari和其他浏览器亦同样适用:
JavaScript代码低效的问题
要在浏览器中高效地操作字符串,建议:
- 使用局部变量;
- 从浏览器对象中缓存出字符串;
- 使用Array.join来连接字符串
其它的注意项:
- 如非必要勿用eval,以参数化的代码代之;
- SWITCH处理大集合时代价过高,考虑用放在try/catch中的哈希表来代替;
- WITH由于处处都需要进行符号查找,代价过高,推荐手工迭代的方式;
- 不需要自己写get/set访问器
浏览器执行性能的考虑
浏览器中DOM的使用是很昂贵的,特别是由于平台的泛型本质。另外值得注意布局上的改进,诸如悬浮CSS样式。
用一些简单的优化方法或常识性的手段,就可在HTTP的性能上得到明显的改善:
HTTP性能
简化和“痩身”:
- Script放在JS文件里面;
- 样式都放在一个CSS文件中;
- 更少,更小且无缩放的图片;
- 简化布局
- 采用HTTP压缩的手段(深入了解缓存的控制)
对于在Internet Explorer上开发或者是调试的开发者,有下列一些工具以备使用:
工具和技术
- Internet Explorer的Developer Toolbar
- Fiddler:HTTP流量监视
- Ajax View :MS研究院新项目:服务端在运行时改写JavaScript并插入调制代码(instrumentation code)
Web程序员常采用FireFox配合编写JavaScript,FireFox同样有不少的插件可用,包括:
虽然此次技术讨论是来自Internet Explorer团队的成员,但大部分技巧对任何浏览器都是有效的。JavaScript在不同浏览器平台上各有各的实现,不过这些调优方法是通用的。
查看英文原文:How-to Make your AJAX Applications Scream on the Client