怎么让你的 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 同样有不少的插件可用，包括：

• Firebug
• Web Developer
• DOM Inspector

虽然此次技术讨论是来自 Internet Explorer 团队的成员，但大部分技巧对任何浏览器都是有效的。JavaScript 在不同浏览器平台上各有各的实现，不过这些调优方法是通用的。

查看英文原文： How-to Make your AJAX Applications Scream on the Client - - - - - -

译者简介：Frank Cheung 有多年 Web 前端开发经验，动态语言爱好者。结合实际的工作，专注于 Ajax 和 WebUI。可通过他的邮件 frank[@]ajaxjs.com 联系，讨论 Javascript 框架的问题。