javascript - jQuery 类选择器 vs 缓存元素 + 查找

Question

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

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

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

$('.class-test')

或通过

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

在最坏的情况下，这些方法中的一种是否胜过另一种？此外，如果有人可以描述第二种方法在引擎盖下做了什么，那就太好了(即我知道 .find 遵从 Sizzle，但是如果元素被缓存，它是否已经存储了其 DOM 元素的树，那么它只需要遍历那个子树来找到这个类？还是那个树只根据需要构建？)。

Answer 1

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

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

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