最大限度利用 JavaScript 和 Ajax 性能

用 Firebug、Safari Web Inspector、YUI Profiler 和 YSlow 测量性能

Joe Lennon, 首席移动开发人员, Core InternationalJoe Lennon 是一位 25 岁的来自爱尔兰科克的移动和 web 应用程序开发人员。Joe 就职于 Core International，在那里他领导 Core 的移动 HR 自服务解决方案的开发。Joe 还是位热心的技术作者，为 IBM developerWorks 撰写过关于 DB2 pureXML、Flex、JavaScript、Adobe AIR、.NET、PHP、Python 等多个主题的文章和教程。Joe 的第一本书 Beginning CouchDB 于 2009 年下半年由 Apress 出版。业余时间，他喜欢旅游、阅读和打电子游戏。

 

简介： 随着 Ajax 和 JavaScript 在现代 web 应用程序中作用越来越突出，将 JavaScript 代码和 Ajax 请求适当调优以便能发挥最佳性能也日益重要。在本文中，您将了解编写 JavaScript 代码和执行 Ajax 请求的最佳实践。了解如何测试已有应用程序的性能，以及如何确定代码中的一般瓶颈。最后，了解如何解决性能相关的问题，以及如何根据您的具体情况使用各种工具，以使您的应用程序的运行速度达到最快。

本文的标签：  ajax, ajax与javascript, javascript, js, 和, 性能, 技巧, 最大限度利用, 用户界面

标记本文！

发布日期： 2011 年 8 月 08 日
级别： 中级
原创语言： 英文
访问情况 2954 次浏览
建议： 0 (添加评论)

平均分 （共 4 个评分 ）

 

简介

在 web 早期，优化 web 页面的性能通常意味着避免了使用不必要的 HTML 标记，将 JavaScript 代码量控制到最小，并尽量减小所有图片文件大小，否则上网冲浪者会走开去泡杯咖啡来等待页面加载。

web 各个方面的改进也意味着我们现在面临新的性能考虑。尽管 DSL 和宽带为很多人提供了对 Internet 上更多内容的高速访问，我们对加载时间和响应的期望也在发展，希望在页面上执行操作后能立刻得到结果。Asynchronous JavaScript and XML (Ajax) 的出现让开发人员能在 web 应用程序中提供像桌面程序一样的体验，不再需要响应事件前加载整个页面。其优势非常明显，但这也让普通的 web 用户希望在所有 web 应用程序中获得这样的响应。随着近期移动 web 的兴起，出现了新的挑战，满足现代 web 用户的期望，在有着更小屏幕、更低电量、更慢网速的目标设备上实现这些效果。

本文重点是告诉您在最大限度利用 JavaScript 和 Ajax web 应用程序时应考虑的问题。本文提供了以最佳方式处理代码的指导原则，无论是新应用程序还是已有程序中的。您还将了解各种工具和技术，用来测量应用程序的性能。最后，您将了解一些无需更改现有代码就可提升性能的方法。

---

回页首

JavaScript 和 Ajax 开发的最佳实践

JavaScript 开发的问题之一就是大部分编写 JavaScript 的开发人员和 web 设计师并未从基础学习 JavaScript。关于此语言的知识是长期通过添加执行某一特定功能的代码片段积攒起来的。他们通常知道如何声明变量、编写条件语句、执行运算，但他们从未静下心来全面系统地从头学起。现在，这些问题依然存在，而开发人员也急于使用库和框架（如 jQuery 和 YUI）来使开发变得更为容易。

使用 JavaScript 库其实也没有错（实际上，我也是其忠实粉丝）。在现代的开发人员中有这样一种趋势，是成为所选择的 JavaScript 框架的专家，而不是 JavaScript 本身的专家。这样带来的问题是，您会发现这些开发人员使用的是效率低下的编程实践，有时候做一件事时，使用普通的原始的 JavaScript 都会比使用某个框架特性要快得多。

这一章中，您将会了解一些 JavaScript 和 Ajax 开发最佳实践，特别是容易被非 JavaScript 开发人员忽略的方面。

使用外部 JavaScript 文件

最大化 JavaScript 应用程序的金科玉律是尽可能使用外部 JavaScript 文件，而不是直接将 JavaScript 代码包含在 HTML 文件中。这么做不仅仅意味着不用在多个文件之间复制 JavaScript 代码，而且 JavaScript 代码会被 web 浏览器缓存，不必在每个子页面加载时重复加载一遍。第一个页面加载时特别慢，因为外部文件需要发送额外的 HTTP 请求到服务器。尽管如此，大多数应用程序中，第一次加载损失的性能远比子页面加载节省下的性能小得多。

有个例外情况是大多数的访问者只访问一个页面。这里最好使用内联 JavaScript；或者还有一种情况，就是您希望第一个页面与子页面加载一样快，或者比子页面更快。在 High Performance Web Sites（见 参考资料 中的链接）一书中，Steve Sounders 提出 Post-Onload Download 的概念，即将第一页的 JavaScript 代码放在其 HTML 文件中，然后在子页面完全加载后动态加载所需的外部 JavaScript 文件。尽管如此，大多数情况下，简单使用外部 JavaScript 文件已经足够。

何时使用 JavaScript 框架和库

我完全支持使用 JavaScript 框架和库。它们不仅能解决很多跨浏览器兼容性问题，而且，如果使用合适，可大大提高 web 应用程序开发速度。有这样的说法，使用这些工具要特别注意，因为它们其中多数都非常庞大，可能降低应用程序性能。

您要问自己的第一件事是：我确实需要使用框架吗？我初次接触 JavaScript 框架是在几年前，那时我需要在我开发的 web 应用程序中使用 Ajax。我没有自己编写 XMLHttpRequest 函数，而是决定使用 Prototype 框架使开发更容易。程序只用到框架的执行 Ajax 请求和处理服务器响应的功能，但我还是决定使用。幸运的是，我开发的应用程序相对较小，只在内部使用，性能不是很重要，但几年之后，我逐渐知道最好还是使用只提供 Ajax 功能的更轻量级的解决方案。

Prototype 框架最新的未精简未压缩版本，是 141KB。而与我的应用程序相关的代码部分不到 2KB，剩下 139KB JavaScript 代码对我的应用程序毫无用处。这不仅增加由文件大小造成的加载时间，还增加了在浏览器中执行 JavaScript 代码的执行时间。

概括来说，现代 JavaScript 框架和库，如 Prototype、jQuery、Dojo、MooTools、YUI、ExtJS 等等，包含一大堆您可能用到或用不到的特性。如果您只用到其中一小部分，您最好寻求更轻量级的解决方案。例如，YUI 库，可让您默认加载最小的空的框架，然后由您选择在此基础上加载哪些库。

脚本放置和加载

当您阅读 HTML 书籍时，它很可能建议您将