从缓存的选择器中遍历 DOM 是否比在 DOM 中查找 ID 元素更快？答案

【问题标题】：Is it faster to traverse the DOM from a cached selector than to find an ID'd element in the DOM?从缓存的选择器中遍历 DOM 是否比在 DOM 中查找 ID 元素更快？
【发布时间】：2012-05-12 14:09:40
【问题描述】：

有很多关于通过 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 对象。我注意到在我的很多代码中，我倾向于使用前一种方法（因为它可以使自己更具动态性），但我一直很好奇用后一种方法是否更快。

谢谢

【问题讨论】：

我怀疑是后者更快，但你测试过吗？敲出一个测试工具很容易......
我不确定这些信息是否已经过时并在最新的 jQuery 迭代中得到纠正，但我很确定 .closest() 比其他替代方案相对慢。
我实际上创建了一个jsperf：jsperf.com/cached-dom-traversal-vs-new-id-selection 看起来ID肯定是最快的，其次是按类查找。

标签： jquery optimization dom-traversal

【解决方案1】：

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

http://jsperf.com/traverse-from-cached-selector-vs-id-selector

使用本机 documentGetElementById 函数可以完成最快的查找。

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

【讨论】：

看起来遍历树的速度通常比较慢，这让我想知道使用缓存的对象然后从...进行遍历有多好
在遍历的时候，我一般使用缓存对象来查找子元素的集合。即$cachedObject.find('.untoggled-children').toggle().toggleClass('untoggled-children toggled-children'); 但是，当要查找具有 id 的单个元素时，我将始终使用 $(document.getElementById('myid'))。