您应该注意到，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 项目，那么就不应该选择这两个库之一。这两个库的性能要比其他库逊色得多。
◆ 结论 5：浏览器对性能的影响是 JavaScript 库的 9 倍。
我认为这是本文所有结论中最重要的结论。您可以在特定情况下讨论哪个 JavaScript 库最快，但它最终的影响却是很小的!对于性能而言，浏览器的影响比库本身要大得多。回顾一下图 3 和图 4 的平均值，您可以看到 3 个最快的库中，最慢那个(Dojo)仅比最快那个(jQuery)慢 15%。只有 15%!然而，您看看 jQuery 在最快的浏览器(Chrome 1.0)和最慢的浏览器(IE6)上运行的速度差别，这个差别竟然达到 1000%!从这两个数字看，15% 对 1000% 而言是微不足道的。至此，关于 3 个较快的库中哪个是最快的争论可以停止了，因为它们对最终结果的影响是微乎其微的。
◆ 结论 6：如果 JavaScript 性能对 Web 应用程序很重要，并且您可以控制选择什么浏览器，那么就选择最快的浏览器!
在某些情况下，您可以控制使用什么浏览器访问站点。如果能够控制使用什么浏览器，那么您就是很幸运的。我就碰到这样幸运的项目。在这种情况下，如果您拥有一个复杂的 JavaScript 应用程序，或者您认为性能很重要，那么您就应该控制用户用于访问 Web 应用程序的浏览器。这些测试已经清楚地显示了浏览器的影响。如果您的 JavaScript 应用程序的访问量很大，那么您可以告诉用户，他们必须 使用 Chrome。
◆ 结论 7：如果您不能控制用户使用的浏览器，那么要首先考虑在 IE6 上的性能。
但是，在大部分情况下，我们都无法控制用户使用什么浏览器访问我们的站点。不过，很大一部分用户都使用 IE 6 浏览网页。到目前为止的测试中，这个浏览器的 JavaScript 引擎是最慢的。但是由于仍然有大量用户使用它，并且良好的 Web 设计需要 “适应最糟糕的情况”，这意味着您可以考虑根据 IE6 设计您的 JavaScript 应用程序。
jQuery 性能调优
本文的第二部分将讨论如何改进 jQuery 代码的性能。前一部分表明选择 jQuery 作为 JavaScript 库指向了正确的性能方向。如果您正在阅读本文，您可能已经使用了 jQuery。但是底层库速度快并不意味着您编写的所有代码都是高质量的。如果您没有回过头来想想应该怎么做，使用 jQuery 仍然会编写出非常慢的代码。
这个部分介绍一些性能调优知识，以及改进 jQuery 代码速度的最佳实践技巧。
技巧 #1 - 尽可能多地通过 ID 进行搜索，而不是 CLASS
在 jQuery 代码中两种常见的搜索技术是通过元素的 ID 进行搜索和通过元素的 CLASS 进行搜索。在使用常规 JavaScript 的 JavaScript 库之前，通过 ID 查找页面元素还是相当简单的。可以使用 getElementById() 方法快速找到元素。但是如果没有 JavaScript 库，要查找 CLASS 会更加困难，在必要情况下，我们还通过在其 ID 中进行编码帮助查找。使用 jQuery 时，搜索 CLASS 就像搜索页面上的 ID 一样简单，因此这两个搜索似乎是可互换的。然而实际情况并非如此。通过 ID 搜索比通过 CLASS 搜索要快得多。当通过 ID 进行搜索时，jQuery 实际上仅使用内置的 getElementById() 方法，但通过 CLASS 进行搜索时必须遍历页面上的所有元素，以查找匹配项。很明显，当页面越大并且越复杂时，通过 CLASS 进行搜索会导致响应非常慢，而通过 ID 进行搜索不会随着页面变大而变慢。
前面运行的 jQuery 性能测试结果支持这一数据。让我们查看每个测试，看看需要注意 jQuery 代码的什么地方。在这个例子中，分别看看通过 ID 和 CLASS 进行搜索时的测试结果(图 5)。
图 5. ID 搜索和 CLASS 搜索对比
这些测试是不同的，但它们得出的数据表明通过 ID 进行搜索比通过 CLASS 进行搜索快得多。这如何影响到 jQuery 代码?在编写搜索时，您要记住这些技巧：如果既可选择 CLASS 又可选择 ID，那么通常要选择 ID。如果需要在您的代码中搜索某些元素，一定要给它们分配 ID。
清单 1 显示了一个实际的 jQuery 测试，您可以在您的机器上运行它对此进行验证：
清单 1. CLASS 和 ID
$(document).ready(function() { console.info("Start Test"); var d = new Date(); console.info(d.getSeconds() + " " + d.getMilliseconds()); var testBody = ""; for (var i=0; i<1000; i++) { testBody += "
"; } $("body").append(testBody); for (var i=0; i<1000; i++) { $(".testable"+i); } var d = new Date(); console.info(d.getSeconds() + " " + d.getMilliseconds()); console.time("Start ID Test"); testBody = ""; for (var i=0; i<1000; i++) { testBody += "
"; } $("body").append(testBody); for (var i=0; i<1000; i++) { $("#testable"+i); } var d = new Date(); console.info(d.getSeconds() + " " + d.getMilliseconds()); console.info("End Test"); });
ID 测试耗时 218 毫秒，而 CLASS 测试耗时 19.9 秒!甚至在专门为该测试构建的简单页面上，ID 搜索也要比 CLASS 搜索快 100 倍!
文章来源于领测软件测试网 https://www.ltesting.net/
