InfoQ

新闻

怎么让你的Ajax程序在客户端上健步如飞

作者 Robert Bazinet译者 Frank Cheung 发布于 2008年1月16日 上午1时12分

社区
Ruby,
.NET,
Java
主题
Web 2.0
标签
AJAX,
Web 2.0

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

没有回复

回复

独家内容

开发者眼中的Android手机平台

在四月份的Beijing Openparty上,InfoQ中文站特邀编辑仝健对三位开发者进行了采访,请他们从开发者角度谈一下对Android的认识和感觉。

智能服务契约带来的巨大伸缩性

可伸缩性并不是无状态设计倾向假设的那个布尔值(译注:一般都认为无状态设计的伸缩性好,此处暗示布尔值为True)。Udi的团队使用服务契约来处理多维度的伸缩性问题,避免了二次失败。

使用NetKerne实现REST风格的ESB

Jeremy Deane对使用NetKernel来编写REST风格的ESB应用做了一番深入的研究。他详细地剖析了选择商业ESB应用的决策过程,以及最终如何使用NetKernel来实现该应用。

多个敏捷团队之间的版本控制

当多个敏捷开发团队在同一个代码库上进行工作时,如何在保证混乱最小化的同时,还能在每个迭代结束时拥有一个干净的、可发布的软件版本?Henrik Kniberg在本文中罗列出了在“Scrum and XP from the Trenches”迷你书中所使用的策略要点。本文并非为版本控制专家编写,而是为我们这些希望进行简单、有效的协作的人所准备的。

想快快喝下Google果汁——Guice吗?

依赖注入出现已经有一段时间了,很多团队都在重构自己的应用以利用DI。但这是一件麻烦的事情。在这篇文章中,Paul Hammant说明了如何将现存应用从单件嵌套设计转为完全成熟的DI设计。

Scrum实施情况调查之案例分析

前不久,InfoQ中文站上发表了一篇文章:Scrum在中国——企业实施情况调查实录,引起了激烈争论。在本文中,作者通过对调查实录中案例的分析诊断,探讨了敏捷开发方法的概念及应用。

Jim Marino与Meeraj Kunnumpurath专访:关于SCA和Fabric3

BEA发布了在WebLogic 10.3中支持的SCA技术预览版,它是以开源的Fabric3运行时为基础构建的。InfoQ对Jim Marino和Meeraj Kunnumpurath进行了专访,前者是BEA Systems的技术主管,后者是VocaLink的首席技术人员。我们就他们对SOA和SCA的看法,VocaLink实施SOA的方法和这个技术的关键优势进行了讨论。

Ruby调试器一览

在Ruby世界中流行着一个误解:Ruby没有调试器。这是明显的错误——Ruby不但有调试器,还有供调试器用的GUI和API。InfoQ仔细调查了Ruby世界中调试器的现状——发现Ruby的调试功能支持已经很好了。