Question

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

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

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

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

像

jQuery(function(){
    myGlobalObj.body = jQuery('body');

    ..
    ..
    ..
    myGlobalObj.body.find('.someElement').<whatever>;
    ..
    ..
    ..
    myGlobalObj.body.find('#someOtherElement').<whatever>;
    ..
    ..
    ..

});

它会证明对提高性能有用吗？是否有任何不利影响，比如没有获得更新的DOM树或其他东西？

请建议。

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

我知道使用基于ID的选择器而不是带有className的选择器的好处，但我关心的是通过使用“body”的缓存引用（或搜索元素的最近过滤父级）来提高性能搜索/隔离目标元素。

即。而不是每次使用$（.. whateverElement ..），

将$ cachedParent.find（.. whateverElement ..）证明是更好的表演者吗？

Answer 1

$("#id")比$(".class")效率更高 - $(".class")将遍历整个集合。

审查这个问题的好方法是：

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

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

编辑：当使用.children()和.parent()函数时，它会更加复杂。这些与Jorge在下面提到的关于jquery选择器native的可用参数（并且执行大致相同）有关。

@ Jorge - 良好的观察

Answer 2

$('#id')是执行此操作的最快方法

您可以保存参考资料以便以后重复使用

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

Answer 3

仅$('.someElement')和$('#someOtherElement')比使用.find要好得多，因为它使用原生getElementsByClassName(..)和getElementById(..)原生方法。

Proof

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

3 个答案: