jQuery 类选择器 vs 缓存元素 + 查找答案

【问题标题】：jQuery class selector vs cached element + findjQuery 类选择器 vs 缓存元素 + 查找
【发布时间】：2013-12-05 06:30:53
【问题描述】：

我有一种情况，我想知道在性能方面最好的方法是什么。

我有一个类名，我们称之为.class-test。我还有一个缓存元素，$body。

我可以通过以下方式检索 .class-test 元素：

$('.class-test')

或通过

$body.find('.class-test')

在最坏的情况下，这些方法中的一种会胜过另一种吗？此外，如果有人可以通过第二种方法描述在幕后所做的事情，那就太好了（即我知道 .find 遵循 Sizzle，但如果元素被缓存，它是否已经存储了它的 DOM 元素树，那么它只需要遍历该子树即可找到该类？还是仅根据需要构建该树？）。

【问题讨论】：

在这里试试jsperf.com
除非您查找数千个元素，否则您永远不会注意到其中的差异。
是的，这就是我说最坏情况的原因。由于大多数 jQuery 性能指标依赖于使用数千个元素。我也很想知道第二种方法背后发生了什么。
很可能它是一个遍历每个选定元素的 foreach 循环，并且对于每个选定元素，它正在执行 element.getElementsByClassName("class-test") 然后将它们作为一个唯一的元素集合连接起来。在您的示例中，差异将非常小，但是在缓存元素是比主体更精确的元素的较大示例中，性能差异可能更大。对此没有一般规则。根据具体情况并在多个浏览器中进行测试。

【解决方案1】：

可以说，不同之处在于您在 DOM 池中浸入了多少次。在第一个查询中，jQuery 将从文档（顶层）中搜索并向下移动到 DOM 树中检查每一层，直到它到达最后，然后返回所有匹配的元素。

在第二个选项中，您指定了起点，因此您不是从最顶部开始，而是从 body 元素开始向下移动。在这种特殊情况下，您只会降低一级，但这是真正的优势，因为您已经缓存了正文，jquery 不必发现它只能引用缓存的元素。

当您深入了解 DOM 树时，这可以节省大量时间。您可以节省 10 到 100 次的等级检查。尽管对于小型网站您不会注意到这一点，但有一天您可能会使用企业级代码库，这些性能提升将对您非常有益。

【讨论】：

是的，这就是我的想法，也是为什么我总是尝试缓存我的元素并使用 find。我想我真正应该问的是缓存一个元素是否意味着我们将它的 DOM 结构存储在内存中，我猜这就是发生的事情，所以当我使用“查找”方法引用该缓存元素时，我们不必在执行“查找”之前初始化该缓存元素的 DOM 树。
为了澄清 jquery 在现代浏览器中使用默认的 querySelector 和 querySelectorAll，并且在旧浏览器中依赖 Sizzle（他们的选择器引擎）
“查找”不是专门针对 Sizzle.find 的吗？
对，但是如果在现代浏览器中，幕后的嘶嘶声将使用 el.querySelectorAll()
所以为了节省一点时间并通过嘶嘶声进行检查，您可以执行 $( el.querySelectorAll('.test-class')) ，这只是获得一个更快的方法jquery 包装的元素集