在性能方面，使用jQuery选择器哪种方式更好

Question

我正在优化我们网站上使用的JavaScript代码，需要一些关于该做什么和不该做什么的指示/提示。我们使用 jQuery 1.7.1 作为我们的库。

在优化/编写优化代码时，我仍然是一个新手，但我所知道的是我们需要减少 DOM 遍历的数量。

因此，我正在考虑的是缓存更频繁使用的元素，然后出于任何原因使用缓存的元素。

我感到困惑或应该说好奇的是，如果在 DOM 准备就绪时，我将"body"元素缓存在全局范围的变量中，然后在所有 JavaScript 代码/文件中使用它来查找我之后可能需要的任何元素。

喜欢

jQuery(function(){
    myGlobalObj.body = jQuery('body');
    ..
    ..
    ..
    myGlobalObj.body.find('.someElement').<whatever>;
    ..
    ..
    ..
    myGlobalObj.body.find('#someOtherElement').<whatever>;
    ..
    ..
    ..
});

它是否会被证明对提高性能有用？是否有任何不利影响，例如无法更新 DOM 树或其他什么？

请指教。

编辑#1：感谢您的评论和回答，但我想我没有说清楚。

我知道使用基于 ID 的选择器比使用带有 className 的选择器的好处，但我担心的是，通过使用缓存的"body"(或搜索元素的最接近的过滤父级(来搜索/隔离目标元素，性能会提高。

即不使用 $(..随便元素..(每次，

将$cachedParent.find(..随便元素..(证明自己是不是更好的表演者？

Answer 1

$("#id")比

$(".class")效率高得多——$(".class")将遍历整个集合。

审查这一点的一个好方法是：

var yourElement = $(".class");
for (var i=0; i< yourElement.length; i++)
 { alert(i);}

$("#id")将仅返回并运行该元素(如果存在具有相同值的多个 id 不正确，则第一次出现(。

编辑：当使用.children()和.parent()功能时，它还变得有点复杂。这些与Jorge下面提到的关于jquery选择器本机的可用参数有关(并且执行基本相同(

@豪尔赫 - 良好的观察力

Answer 2

$('#id')是

最快的方法

。

您可以保存引用以供以后重复使用

var $cache = $('.cache');

Answer 3

只需$('.someElement')和$('#someOtherElement')将比使用.find要好得多，因为它使用本机getElementsByClassName(..)和getElementById(..)本机方法。

证明