简介

在 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 框架和库。它们不仅能解决很多跨浏览器兼容性问题，而且，如果使