jQuery中最快的children（）或find（）是什么？

320

要在jQuery中选择一个子节点，可以使用children（），也可以使用find（）。

例如：

$(this).children('.foo');

给出与以下结果相同的结果：

$(this).find('.foo');

现在，哪个选项是最快或首选的，为什么？

jquery jquery-selectors

— 巴特
source

27

.find()和.children()不一样。后者就像子选择器一样，仅向下移动DOM树一个级别。

— Timothy003 2012年

1

@ Timothy003您描述的是错误的，前者是单层行驶而不是后者

— Dipesh Rana

5

@DipeshRana“后期”适用于Timothy003自己的句子，而不是问题。

— Jayesh Bhoot 2015年

1

感谢您提出此问题。在许多情况下，性能差异是微不足道的，但是文档实际上并未提到这两种方法的实现方式不同！为了最佳实践，很高兴知道它find()几乎总是更快。

— 史蒂夫·本纳

这就是为什么我从来不喜欢用英语表示“前者”或“后者”的原因。只需说出您的意思。嘘。

— 克里斯·沃克

415

children()仅find()遍历节点下的整个DOM ，而仅查看节点的直接子级，因此在实现等效操作的情况下children() 应更快。但是，find()使用本机浏览器方法，而children()使用浏览器中解释的JavaScript。在我的实验中，典型情况下的性能差异不大。

使用哪种方法取决于您是只考虑直接后代还是考虑DOM中此节点以下的所有节点，即根据所需结果选择适当的方法，而不是方法的速度。如果性能确实是一个问题，请尝试寻找最佳解决方案并加以使用（或在此处查看其他答案中的一些基准）。

— 特凡福森
source

9

当然可以，但是如果父元素只有子节点会怎样？我将对此进行一些分析。

— 杰森

11

child vs find的性能取决于浏览器以及您搜索的DOM子树的复杂程度。在现代浏览器上，find（）内部使用querySelectorAll，可以轻松胜过复杂选择器中的child（）和中小型DOM子树。

— LeJared 2012年

将有助于提供您实验的一些定量结果。

— 路加福音

对我来说，在所有层次嵌套在5到20之间的测试中，find（）总是优于child（）。（在Google Chrome 54中进行了测试），我预料相反。因此，从现在开始，我将采用简单的方法来查找（...）我的元素，而不是通过children（）。children（）。children（）...遍历它们

— Ruwen

179

此jsPerf测试表明find（）更快。我创建了一个更全面的测试，它看起来好像find（）胜过children（）。

更新：根据tvanfosson的评论，我创建了另一个具有16个嵌套级别的测试用例。find（）仅在查找所有可能的div时速度较慢，但是在选择第一个div级别时，find（）的性能仍然优于child（）。

当嵌套级别超过100，并且遍历find（）时，大约4000+ div时，children（）开始胜过find（）。这是一个基本的测试用例，但是我仍然认为在大多数情况下，find（）比children（）更快。

我逐步浏览了Chrome开发者工具中的jQuery代码，并注意到children（）在内部对sibling（），filter（）进行了调用，并且经过了比find（）更多的正则表达式。

find（）和children（）满足不同的需求，但是在find（）和children（）将输出相同结果的情况下，我建议使用find（）。

— JR
source

4

似乎孩子使用dom遍历方法，而find使用选择器api，这更快。

— topek 2011年

4

相当简陋的测试用例，因为您只有一层嵌套。如果需要一般情况，则必须设置一些任意的嵌套深度并检查性能，因为find（）遍历比children（）更深的树。

— tvanfosson，2011年

如果您要检查特定的单个子元素（例如event.target）是否在特定的dom元素（例如$（'。navbar'））中，则$ .contains（此event.target）是最快的（8,433,609 /秒，而最快的jquery搜索则为140k）。 jsperf.com/child-is-in-parent

— Chris Sattinger

92

这是一个可以运行性能测试的链接。find()实际上比快2倍children()。

OSX10.7.6上的Chrome

— 活跃的
source

$ .contains（document.getElementById（'list'），$（'。test'）[0]）是8,433,609 /秒。如果您有特定元素，并且只想知道B是否在A中，那么最好。jsperf.com/child-is-in-parent

— Chris Sattinger 2015年

不错的测试。请注意，如果您执行类似var $test = $list.find('.test');$ list是jQuery对象的操作，则速度可能更快。jsperf.com/jquery-selectors-context/101

— Maciej Krawczyk

24

这些不一定find()会得到相同的结果：将为您提供任何后代节点，而children()仅会为您提供匹配的直接子节点。

一方面，find()它要慢得多，因为它必须搜索可能匹配的每个后代节点，而不仅是直接子节点。但是，这不再是事实。find()由于使用本机浏览器方法，速度更快。

— 约翰·费米内拉
source

1

没有根据其他答案haha：p。只有当你有一个非常，非常，非常大的DOM树..

— pgarciacamou

1

@Camou这个答案已经四岁了。find()当时慢得多！

— John Feminella 2014年

@camou表示表演部分是“未根据其他答案”。该答案的第一段是正确的。

— Don Cheadle

14

其他的答案中没有涉及使用的情况下，.children()或.find(">")以仅搜索父元素的直接子。因此，我创建了一个jsPerf测试来找出，使用三种不同的方式来区分孩子。

碰巧，使用额外的“>”选择，即使，.find()仍然是一个很大的速度比.children(); 在我的系统上是10倍

因此，从我的角度来看，根本没有太多理由使用过滤机制.children()。

— 克雷格·沃克
source

3

感谢您的评论！我想知道jQuery是否应该切换为使.children（x）成为.find（“>” + x）的别名，尽管我可能没有想到其他复杂情况。

— Michael Scott Cuthbert 2015年

1

这似乎是最合适的比较。谢谢！

— GollyJer '16

3

两个find()和children()方法用于筛选匹配元素的孩子，除了前者是任何行进水平下，后者是行进的单一水平向下。

为了简化：

find() –搜索匹配元素的子级，孙级，曾孙级...各个级别。
children() –仅搜索匹配元素的子级（单级向下）。

— 纳雷什·库玛（Naresh Kumar）
source