从缓存的选择器遍历DOM比在DOM中查找具有ID的元素更快吗？

Question

3

有很多关于通过class或id或其他选择器查找元素哪种更快的问题。我不感兴趣。我想知道你是否有：

var link = $(this); //let's say you're in a click handler

通过这种方式查找容器是否更快？

var container = link.closest('.container'); //assume container is .container

或者

var container = $('#mycontainer'); //assume same element as above

我提出这个问题不仅仅是针对上述特定场景（好的，是的，也包括这个场景），而是关于缓存遍历与创建具有ID的新jQuery对象之间的区别。我注意到在我的许多代码中，我倾向于使用前一种方法（因为它更具动态性），但我一直很好奇用后一种方式是否更快。

谢谢

- Jason

2

我的怀疑是后者更快，但你测试过吗？制作一个测试工具会很容易。 - Alastair Pitts

我不确定这些信息是否已经过时，并且在最新版本的jQuery中得到了纠正，但我相当确定.closest()比其他替代方法相对较慢。 - Richard Neil Ilagan

1

我实际上创建了一个JS性能测试：http://jsperf.com/cached-dom-traversal-vs-new-id-selection 看起来ID绝对是最快的，按类查找是其次。 - Jason

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- jeremysawesome · Accepted Answer

我认为，无论是否使用缓存选择器，使用id选择器都会更快。ID选择器基本上是直接的字典查找，而缓存/最接近的组合则类似于字典查找，然后是树遍历。

使用原生的documentGetElementById函数可以实现最快的查找。 http://jsperf.com/traverse-from-cached-selector-vs-id-selector

var container = $(document.getElementById('MyContainer'));