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

Question

我正在编写一个jQuery插件,我正处于优化阶段.

我想知道哪些导致更快的脚本,以及哪种缓解因素很重要:

1. 让脚本在开始时生成许多类和ID,以便稍后在dom中查找元素更容易(更快)？
2. 将类和ID保持在最小值(这样可以通过不创建它们来节省时间),但之后会以更复杂的方式查找元素(例如,对象中的第n个项),我认为这比通过id/class获取要慢.

Answer 1

浏览器的工作方式是在加载时创建一个内存中的DOM树,如下所示:

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

因此,当您查找时P > DIV > B,查找必须找到所有P元素,然后查找其中的所有DIV元素,然后查找DIV中的P所有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

Answer 2

问题不够具体,所以我可以给你直接与你的代码相关的建议,但这里有一些我最喜欢的jQuery优化技巧:

1. 尽可能指定上下文!不要让jQuery看起来不必要的地方.如果你知道#containerdiv中会有某些东西,那就去做吧$(something, '#container');
2. .myclass很慢.在内部,jQuery必须遍历每个元素以查看它是否具有您要搜索的类,至少对于那些不支持的浏览器而言getElementsByClassName.如果你知道一个类只会应用于某个元素,那么这样做会更快tag.myclass,因为jQuery可以使用本机getElementsByTagName,只搜索那些.
3. 不要在一次爆炸中做复杂的选择器.当然,jQuery可以找出你想要的东西,但是需要时间来解析字符串并应用你想要的逻辑.因此,我总是喜欢把我的"查询"分成补丁.虽然大多数人可能会做$('#myform input:eq(2)');或类似的事情,但我更愿意$('input','#myform').eq(2);帮助jQuery.
4. 如果您计划使用一组对象执行多项操作,请不要重新查询DOM.利用链接的优势,如果由于某种原因无法使用链接,请将查询结果缓存到变量中并对其执行调用.

Answer 3

我认为你回答了自己的问题:'复杂的方式'是'它会破坏'的同义词 - 对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获取节点.