0

我正在优化我们网站上使用的 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 的选择器比使用带有类名的选择器的好处，但我担心的是，通过使用“body”的缓存引用（或搜索元素的最近过滤父项）来搜索/隔离会提高性能目标元素。

即不是每次都使用 $(..whateverElement..)，

$cachedParent.find(..whateverElement..) 会被证明是一个更好的执行者吗？

4

3 回答 3

2

$("#id")比遍历整个集合$(".class")要高效得多。$(".class")

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

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

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

.children()编辑：当使用and.parent()函数时，它也会变得有点复杂。这些与 Jorge 下面提到的有关 jquery 选择器原生可用参数的内容有关（并且执行几乎相同）

@Jorge - 很好的观察

于 2012-05-23T15:22:53.267 回答
1

$('#id')是最快的方法

您可以保存参考以供以后重复使用

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

于 2012-05-23T15:21:56.620 回答
1

只是$('.someElement')并且$('#someOtherElement')将比使用更好，.find因为它使用本机getElementsByClassName(..)和getElementById(..)本机方法。

证明

于 2012-05-23T15:22:27.867 回答