技巧 #2 - 提供尽可能多的搜索信息
jQuery 提供如此多的页面元素搜索方法，有时您难以指出哪种方法是最好的。有一条经验是不会错的，即为搜索参数提供尽可能多的信息。因此，假如您正在搜索带有 “clickable” CLASS 的所有页面元素，如果您提前知道仅有 DIV 附带有 CLASS，那么就能提高搜索性能。所以，搜索 “div.clickable” 会更加快。图 6 显示了支持该技巧的结果。
图 6. 尽可能多地提供信息
考虑到底层 JavaScript 代码之后，这就不足为奇了。通过提供元素标记，与 CLASS 参数匹配的搜索元素数量将大大减少，从而将搜索性能提升至与本例中的 ID 搜索相当。
开发人员在编写 jQuery 选择方法时不能偷懒，尽管 jQuery 的简单让人产生偷懒的欲望。简单让您放松了警惕。搜索机制变得如此简单，让我们倾向于仅输入一条信息。然而，您应该总是尽可能多地输入信息，尤其是已知信息。清单 2 显示了一个很好的例子。
清单 2. 提供充足的信息
// Assume there are 50 of these in some giant form, and you need to validate // these fields before they are submitted, and there are hundreds of other // elements on the page as well // the "bad" way to validate these fields $(".notBlank").each(function(){ if ($(this).val()=="") $(this).addClass("error"); }); // the "good" way to validate these fields $("input.notBlank").each(function(){ if ($(this).val()=="") $(this).addClass("error"); }); // the "best" way to validate these fields $("input:text.notBlank").each(function(){ if ($(this).val()=="") $(this).addClass("error"); });
技巧 #3 - 缓存选择器
最后一个性能技巧利用了几乎所有 jQuery 选择器都返回 jQuery 对象这个特性。这意味着在理想的情况下，您仅需要运行选择器一次，并且能够轻松地将所有函数连接在一起，或缓存结果供以后使用。您也不要担心缓存，因为与总体可用内存相比，返回的对象是很小的。
清单 3 给出了一些关于如何利用缓存的例子。
清单 3. 缓存
在我的最后一个关于性能
// Imagine a function that hides all the div's with a class of "hideable" // when a button is pressed. These DIV's might reappear later when // working with the page, so the button can be pressed any number of // times, and the DIV's that have reappeared // will again be made to be hidden. $("#ourHideButton").click(function(){ $(".hideable").hide(); }); // As you saw in the CLASS versus ID example, though, a search for // CLASS is very inefficient // If this button is pressed often, it could lead to a slow response // Instead of the above example, you should write your code like this var hideable; $("#ourHideButton").click(function(){ if (hideable) hideable.hide(); else hideable = $(".hideable").hide(); }); // You can cache your search in a JavaScript variable and reuse it every time // the button is pressed. Because jQuery almost always returns the // jQuery object, you can save it the first time it is called for future use
的示例代码中，将查看我在本系列的第一篇文章中提到的小部件(见 参考资料)。这个小部件是在表的左上角上的复选框，它允许您选择或取消选择该列上的所有复选框。这个小部件在电子邮件应用程序中非常常见，用于选择或取消选择所有消息。
清单 4. 性能改进
// Here is the code as I originally presented it in that article. Let's see // if we can improve the performance in any way from the things we learned here function selectAll() { var checked = $("#selectall").attr("checked"); $(".selectable").each(function(){ var subChecked = $(this).attr("checked"); if (subChecked != checked) $(this).click(); }); } // Here's the improved function. The search for the ID of "selectall" is // OK as-is, because we saw how fast the ID search is. // The search for the CLASS of "selectable" was not well-designed though, // because we saw a search by CLASS is very inefficient. // First step was improving the search by supplying as much information as we know. // We narrowed the search to only checkboxes with the CLASS of selectable. // This should improve our search // Further, we can cache this search because we will only need to perform it once // Finally, we can perform this search before the selectall checkbox is even // checked (when the page is finished loading), so that the search is completed // and cached before the user even uses it. // These 3 simple performance steps gave me a 200% increase in speed when tested // on a page with 200 rows of data. var selectable = $(":checkbox.selectable"); function selectAll() { var checked = $("#selectall").attr("checked"); selectable.each(function(){ var subChecked = $(this).attr("checked"); if (subChecked != checked) $(this).click(); }); }
关于性能的要点
使用 JavaScript 时，速度和性能绝对不是小问题。在现实中，创建 jQuery 的开发人员和处理浏览器内置 JavaScript 引擎的开发人员都非常关注性能问题。事实上，在最近 6 个月以来，浏览器开发的最重要问题就是 JavaScript 引擎的速度。浏览器开发者都致力于在下一年迅速提升 JavaScript 的执行性能，从而大大提高 jQuery 代码和 JavaScript 引擎的速度。来自这些 “速度之战” 的消息表明，提升 JavaScript 性能是大势所趋。领导 jQuery 项目的 John Resig 一直都在谈论他的最新 “Sizzle” 选择引擎。他从头编写了一个选择引擎，并声称初步结果表明它比 Firefox 要快 4 倍。这是巨大的速度提升!在我撰写本文的最后部分时，jQuery 1.3 已经发布，并且包含了 Sizzle 选择引擎。jQuery 声称，在所有浏览器上运行的总体结果表明选择引擎的 1.3 版本比 1.2.6 版本的快 49%。此外，1.3 发布版在 HTML 注入(向 DOM 添加新的元素)上改进了 6 倍，在函数定位上改进了 3 倍。在我完成本文时，很多人都更新到了最新的 jQuery 发布版，这是非常令人激动的!
影响 JavaScript 性能的另一个因素是浏览器，如前所述，它的影响是所选的库的 9 倍。Firefox 和 Chrome 在 “最快 JavaScript 引擎” 之战中各有胜负，而 Safari 的参与让竞争更加激烈。从我们上面的测试中，可以看到 Chrome 在 JavaScript 引擎性能方面远远超过 Firefox，但是 Firefox 3.1 将包含新的 Tracemonkey JavaScript 引擎，届时其速度将比当前的 JavaScript 引擎 3.0 快 20 至 40 倍(这是他们声称的，不是我的观点)，真不可思议!
在未来一两年内，您将看到底层 JavaScript 引擎和 JavaScript 库的速度得到巨大改进，从而导致使用 JavaScript 的 Web 应用程序将变得更加复杂。
如果您正在决定是使用 JavaScript 库还是自己编写 JavaScript，那么需要考虑的另一件事情是处理和调试 JavaScript 库所需的全部工作。最近几年以来，有数百位用户一直在维护库中的每一个函数。您可能要忙到深夜，甚至筋疲力尽地编写自己的函数。您更相信谁呢?另外，即使您能编写出比 jQuery 库更快的代码，您是否想过使用 jQuery 库能够获得更多的优势?您是否为了辛苦地编写自己的代码而放弃使用非常便利的 jQuery 及其函数库?自己编写代码不仅需要大量时间，并且还会产生更多 bug，因此我还是建议使用现成的 jQuery 库。
我最后讨论的要点可能会让一些人沮丧，但是我们必须考虑编写这些 jQuery 库的程序员。他们当中的一些是最棒的，并且他们编写的超级优秀的代码(一般人不能编写这样出色的代码)都收入到这些库中。我承认自己远远不如编写 jQuery 库的程序员。因此，为何不利用他们的智慧?
结束语
本文从总体上讨论了 jQuery 和 JavaScript 库的性能。通过对选择方法进行大量的测试，您看到这些库之间的速度存在巨大的差距，并且 jQuery 是最快的库之一。不过，即使您选择了最快的 JavaScript 库，还是不能解决 Web 应用程序的性能问题，因为浏览器对性能的影响比库强 9 倍。如果您能够控制用户使用特定的 Web 浏览器，那么就让他们使用最快的浏览器。找到能够最快地运行您的 Web 应用程序的浏览器，并让用户通过使用它从中受益。理想情况下，让最慢的 JavaScript 浏览器消失意味着出现更快的 Web 应用程序。
我还提供了关于 jQuery 性能的 3 个技巧。尽管有好几个站点都提供了关于 jQuery 性能的技巧，但是这 3 个技巧是最有效的。3 个技巧肯定比 50 个技巧容易记住，但其他技巧也是很好的，我将在 参考资料 部分指出另外一些技巧。不过，如果您在编写代码时记住了这 3 个技巧，将会获得巨大的性能提升。应该永远记住的 3 个 jQuery 技巧是：通过 ID 搜索比通过 CLASS 搜索快 100 倍，尽可能多地提供搜索信息，以及尽量缓存选择。
最后，我们快速查看了 jQuery 和浏览器的 JavaScript 引擎即将推出的改进。在我撰写本文的结尾部分时，jQuery 1.3 已经发布了，它承诺在选择和代码的其他方面实现跳跃式性能改进。此外，Firefox 还承诺它的下一代 JavaScript 引擎会快 20 至 40 倍!这些迹象表明，在未来的一两年内，JavaScript 环境会在性能上取得重大突破。在不久的将来，复杂的 Web 应用程序会日益流行，因为快速运行这些程序的条件已经成熟。
在本文结束时，我们应该回过头来重新检验这句话 “jQuery 在简单的页面上无可挑剔，但在复杂的页面上性能极其低下。在解决性能问题之前，您必须对复杂页面使用常规的 JavaScript。”根据我的经验，jQuery 的 “性能问题” 一样出现在 “常规的 JavaScript” 中。事实上，真正影响性能的不是 jQuery 或 JavaScript，而是浏览器。因此我同意这样的观点：使用设计不良的 jQuery 代码的复杂页面运行在 IE6 上时会导致糟糕的性能。不过，我希望您已经了解我要阐述的思想：只要拥有良好的 jQuery 代码、运用 3 个最重要的技巧并选择最快的浏览器，那么即使运行最复杂的页面也不会出现明显的性能问题。
文章来源于领测软件测试网 https://www.ltesting.net/
