中级jQuery —— 性能指标和调优

jQuery 无疑是一个出色的 JavaScript 库，但它的性能如何？在其易用性和优异 Web 页面性能之间进行折衷是否值得？它的性能是不是真的很优异？本文将回答关于 jQuery 性能的问题，并提供一些可以改进应用程序性能的技巧。

简介

本文的写作灵感源自读者关于先前一篇文章的电子邮件反馈；该邮件这样写道 “jQuery 在简单的页面上无可挑剔，但在复杂的页面上性能极其低下。在解决性能问题之前，您必须对复杂页面使用常规的 JavaScript。” 这立即让我想到 “jQuery 和 JavaScript 之间的性能比较会是什么样的？”事实上，我很少看到将 jQuery 库与 JavaScript 或其他 JavaScript 库进行比较的文章。我可能像大多数人一样，仅看到用 jQuery 编写客户端代码的简易，而忽略了可能的性能问题。在我看来，在易用性和性能之间进行折衷是值得的。但是，存在这样一种折衷吗？jQuery 是不是比 “一般” 的 JavaScript 慢？jQuery 是不是比其他库慢？本文将尝试解答这些问题。

度量 JavaScript 性能要考虑的最重要问题是执行 JavaScript 的环境。因为代码是运行在客户端上的，所以它的执行依赖于客户端计算机，这使得客户端机器成为影响性能的最重要因素。很明显，运行 4 核 CPU 的新服务器执行代码的速度肯定要比 400 MHz 老式处理器快。这是毫无疑问的。不过，由于您不能控制 Web 应用程序用户用于访问您的站点的机器，所以在度量性能时要考虑关于硬件的许多因素。

JavaScript 性能的另一个重要方面是用于运行 JavaScript 的浏览器，JavaScript 新手可能不容易发觉这个影响因素。每个浏览器内部都包含一个 JavaScript 引擎，即用于解析和执行 JavaScript 代码并处理 Web 应用程序页面的本机代码。因此，JavaScript 的性能严重依赖于客户端使用的浏览器，并且在某些情况下，您可以 控制用户使用的浏览器。本文提供一些关于 JavaScript 性能的指导原则，并解释不同浏览器对性能的影响。

最后，在总结 JavaScript，尤其是 jQuery 的性能之后，我将确定一些能够改进 jQuery 代码性能的最佳实践，充分利用运行得最快的代码部分，而尽量避免运行得最慢的代码部分。在您阅读完本文之后，“jQuery 的性能好吗” 这个问题将得到解答，并且给我发送那封电子邮件的人也将知道他的断言是否正确。

创建性能测试

关于性能测试的第一步是创建一个合适的性能测试。jQuery 以及其他 JavaScript 库在代码中扮演的最重要角色就是使用选择查找特定页面元素。我在最初的性能测试中就以这方面为重点。一个良好的性能测试应该真正地发挥 JavaScript 库的全部力量，用包含数千个页面元素的页面测试它。应该运行所有选择方法，让我看到哪个选择方法最快，哪个最慢。测试应该事先知道正确的答案，从而确定 JavaScript 库是否正确地执行选择方法。最后，应该显示所有结果，并附带所用的运行时间，让我能够在所有库之间进行比较。

我差点忽略了性能测试的最重要方面：它应该是免费的。毕竟这个系列文章的不成文规则就是相互利用彼此的成果，因此我继续发扬这种精神，在此使用一个现成的 JavaScript 库性能测试。这个测试称为 SlickSpeed Selectors Test，它非常适合我的需求。它将 jQuery 1.2.6（撰写本文时的最新版本）与其他 4 个流行的 JavaScript 库（MooTools、Prototype、YUI 和 Dojo）进行比较。然后，它使用带有数千个页面元素的页面运行 40 个选择测试。换句话说，这是我所希望的最佳性能测试。我将在第一个性能测试分析中使用该测试。

对比 JavaScript 库的性能

对于第一个性能测试，我使用的运行环境是 2.2 GHz 处理器、2 GB RAM 和 Firefox 3.0.3（非常重要）。我在该配置下运行 5 次测试，图 1 显示了 5 次运行的平均结果。

图 1. 性能测试 1 的结果

从第一次测试能够得出什么结论？现在我们仅关注总体结果，而不是每次测试。在获得一些总体结论之后，我将稍后在本文中关注每个测试。

• 结论 1：YUI 慢到了极点！
  对，与其他库相比，YUI 真的很慢。仔细查看每个测试，找出为什么这个库在选择元素组（例如 “p, a”）时非常慢。对于要求具有很好性能的页面而言，这个库是最差的选择。
• 结论 2：Mootools、jQuery 和 Dojo 的运行时间几乎一样。
  与其他两个库相比，这 3 个库是非常快的，并且 Dojo 是它们当中最快的，而 jQuery 是最慢的。但是从全局考虑，它们之间的速度是很接近的。
• 结论 3：这些库之间的相对差别还是比较明显的。
  度量最快时间/最慢时间以确定速度的相对差别，您可以看到相对差别为 332%。这个差别是比较大的，这表明使用 Firefox 时选择不同的 JavaScript 库会对性能有影响。

但是要记住，这些结论仅基于一个浏览器的结果。这是基于 Firefox 3.0.3 得出的结论。现在我们进入下一小节，我将在不同的浏览器上运行该测试。

在不同浏览器上的 JavaScript 性能

面对不同浏览器运行 JavaScript 会得出的不同结果（性能和时间都不同），许多初级 Web 程序员觉得不可思议。尽管这对初级 Web 程序员而言是个挫折（他们担心要编写额外的代码来处理不同的浏览器），但是有经验的 Web 程序员在 Netscape 和 Internet Explorer 的早期就知道如何处理该问题。这也是使用 JavaScript 库的一个亮点，因为它们都谨慎处理许多或大部分浏览器差异。

JavaScript 速度差异的主要原因是每个浏览器都使用自己的 JavaScript 引擎。JavaScript 引擎是用于解析 JavaScript 并根据 Web 应用程序执行它的本机代码。因此，JavaScript 的执行速度与底层引擎直接相关。在最近几个月，许多浏览器公司越来越关注他们的浏览器的性能，这是有原因的。随着某些页面的 JavaScript 变得日益复杂，JavaScript 引擎的快慢能够影响 Web 应用程序的响应速度。因此，当 Google 和 Firefox 等公司谈论它们的 JavaScript 引擎时，它们就会谈及下一代引擎的速度要快 10 倍。这对 Web 应用程序而言是很重要的，因为底层 JavaScript 引擎的速度直接导致更复杂的 Web 应用程序的出现。

现在，您知道 JavaScript 引擎是 JavaScript 执行速度的一个因素，那么让我们在不同的浏览器上运行刚才在 Firefox 上运行的测试，并尝试找出不同的引擎对 JavaScript 性能的影响。记住，这个测试与我前面在 Firefox 上运行的测试是一样的，因此除了 JavaScript 引擎以外，其他所有东西都是相同的。图 2 显示了测试结果。

图 2. 性能测试 2 的结果

看完这些测试结果之后，您首先注意到的是在这些浏览器中运行得到的时间差很大。在 Chrome 1.0 上运行 jQuery 需要 168 毫秒，而在 IE6 上运行需要 1728 秒。这是难以置信的时间差！jQuery 选择方法在 IE6 上运行比在 Chrome 上运行慢 10 倍！现在，您知道为什么 Google 喜欢夸耀它的 JavaScript 引擎，以及为什么某些浏览器很少介绍自己的 JavaScript 引擎。这些差别还是比较大的。

您应该注意到，jQuery 在 Firefox 或一些其他浏览器上运行时速度排在第 3 位，而在另一些浏览器上排在第 1 位。事实上，这些结果表明，根据性能进行分类的话，这些库可以分为两组，而不管使用什么浏览器。Mootools、Dojo 和 jQuery 通常属于一个组别，而 Prototype 和 YUI 属于另一个组别，前一组要比后一组快得多。

性能测试结论

我觉得所有这些结论都需要专门花一个小节进行阐述，因为它们对 JavaScript 开发人员非常重要。我仍然尝试总结上面的性能结果，并且没有忘记本文是以 jQuery 为主题的。

结论 1：Mootools、jQuery 和 Dojo 在性能方面不分上下。
查看它们在所有 5 个浏览器上进行的测试，在求取平均值之后，您可以看到这 3 个库的性能几乎是一样的。（理想情况下，我们应该调查每个浏览器的市场份额。但是调整这些数字很难，因为使用 JavaScript 库的站点不一定由 “平均用户” 访问）。

图 3. 测试结果的平均值（Mootools、jQuery 和 Dojo）

结论 2：Prototype 和 YUI 的性能很慢。
看看这两个库在 5 个浏览器中的测试结果与 jQuery 的对比。在求取它们的平均值之后，您可以发现这两个库的性能差别有多大。它们在任意浏览器中平均比 jQuery 慢 300%。

图 4. 测试结果的平均值（jQuery、Prototype 和 YUI）

结论 3：如果对性能要求比较高时，选择 Mootools、jQuery 和 Dojo 之一获得的性能几乎一样。
根据以上的平均值，选择这 3 个库之一比选择另外两个库之一能够获得更多的性能优势。从在所有浏览器上运行得出的平均值看，它们的性能是相当的。因此，当您选择 JavaScript 库时，选择这 3 个库之一是不会错的。

结论 4：如果对性能要求比较高时，不要选择 Prototype 或 YUI。
如果要求 JavaScript 库具有较高的性能，或者打算创建一个大型的 JavaScript 项目，那么就不应该选择这两个库之一。这两个库