在jQuery中访问DOM元素的最有效方法是什么？

我正在写一个jQuery插件，我处于优化阶段。在jQuery中访问DOM元素的最有效方法是什么？

我不知道这些导致总体更快的脚本，和什么样的缓解因素很重要：

有剧本在开始产生大量的类和ID，以便发现在DOM元素稍后更容易（也更快？）。
把类和id保持在最小值（这样可以节省时间，而不是创建它们），但随后会以更复杂的方式查找元素（例如对象中的第n个元素），我认为这比通过id /类。

来源

2009-05-18 wheresrhys

的问题是不是真的不够具体，所以我可以给你的建议对您的代码直接相关的，但这里有一些我最喜欢的jQuery的优化建议：

只要有可能，指定一个范围内！不要让jQuery看起来不必要的地方。如果你知道#container div内会有什么东西，那么做$(something, '#container');
.myclass是慢。在内部，jQuery必须通过每个单元元素来查看它是否有你正在搜索的类，至少对于那些不支持getElementsByClassName的浏览器。如果你知道一个类将只应用于某个元素，那么的方式的做法会更快，因为jQuery可以使用本地getElementsByTagName并只搜索那些元素。
不要在一个爆炸中做复杂的选择器。当然，jQuery可以找出你想要的东西，但是解析出字符串并应用你想要的逻辑需要时间。因此，我总是喜欢将我的“查询”分成多个补丁。虽然大多数人可能会做$('#myform input:eq(2)');或类似的事情，但我更喜欢做$('input','#myform').eq(2);来帮助jQuery。
如果您打算使用一组对象执行多项操作，则不要重新查询DOM。以链接的优势为例，如果无法以任何理由使用链接，请将查询结果缓存到变量中，然后对其执行调用。

来源

2009-05-18 18:54:35

伟大的提示 - 将马上派上用场 – wheresrhys 2009-05-18 19:19:47

我认为你回答了你自己的问题：'错综复杂的方式'是'它会破坏'的同义词 - 任何对html结构的改变都会破坏你的代码。

例如，假设你正在试图获得myDiv，你认为它是child最后兄弟：

<div>parent 
    <div>child</div> 
    <div>myDiv</div> 
</div>

如果您稍后决定结构确实应该是这样的，会发生什么？

<div>parent 
    <div>child</div> 
    <div>myDiv</div> 
    <div>child</div> 
</div>

通过依赖关于结构的假设，您的代码变得非常脆弱。向节点添加类和ID将防止出现这种情况。

我认为你应该去的第一选择。还要记住，按类获取节点总是比通过id获取节点慢。

来源

2009-05-18 18:38:23

伟大的点，复杂=脆 – 2010-10-21 18:23:59

用我的插件，尽我所能，尽量限制引入到文档中的钩子数量。 “钩”我的意思是ID或类。

完全避免它们的最好方法是保留对插件封闭内的任何创建元素的引用。例如：

jQuery.fn.addList = function(items, fn){ 
    var $list = $('<ul/>').html('<li>' + items.join('</li><li>') + '</li>'); 
    return this.each(function(){ 
     $(this).append($list); 
     fn.call($list); 
    }); 
}; 

$('body').addList(['item 1', 'item 2'], function(){ 
    var referenceToTheList = this; 
    console.log(referenceToTheList, '<- this is my list, no hooks involved!'); 
});

该列表可以围绕JavaScript函数（参考和在多个地方使用的），而不需要在HTML任何钩进行;从而使其尽可能不显眼！

避免/限制挂钩在插件开发中尤为重要，因为您永远不知道它最终可能在哪里使用。

来源

2009-05-18 18:52:36 James

浏览器的工作方式是，当负载它创建了一个内存中的DOM树看起来如下：

           P 
           _______________|______________ 
           |        | 
          childNodes     attributes 
       ______________|___________     | 
       |    |   |   title = 'Test paragraph' 
     'Sample of text ' DIV 'in your document' 
           | 
          childNodes 
        __________|_______ 
        |   |  | 
      'HTML you might' B  'have'

所以，当你查找P > DIV > B，查找必须找到所有P元素，然后找到P内的所有DIV元素，然后在DIV内找到所有B元素。嵌套越深，就需要做更多的查找。此外，它可能会发现所有P > DIV只发现他们都没有B，它将浪费时间查看所有P > DIV比赛。

ID查找的速度更快，因为ID保证是唯一的，所以DOM可以将它们存储为具有非常快速查找的哈希表条目。就jQuery而言，实现可能稍有不同，但是，document.getElementById查找时间最快，因此$('#my_node_id')也应该相当快。

因此，如果您的节点没有一个ID，你可以发现，确实在最近的祖先和你的节点相对找到相应的祖先

#my_node_id > div > b

因为只查找需要的子下发生 - #my_node_id的树会比p > div > b

更快

来源

2009-05-18 19:50:09 aleemb

单独的踢屁股ASCII图。 – 2009-05-18 23:51:08

在jQuery中访问DOM元素的最有效方法是什么？

回答

相关问题