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

Question

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

例如：

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

给出与以下相同的结果：

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

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

Answer 1

children()仅查看节点的直接子节点，而find()遍历节点下方的整个DOM，因此children() 应该更快实现。但是，find()使用原生浏览器方法，而children()使用浏览器中解释的 JavaScript 。在我的实验中，典型案例的性能差异不大。

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

Answer 2

这jsPerf test表明find（）更快。我创建了一个more thorough test，看起来好像find（）优于children（）。

更新：根据tvanfosson的评论，我创建了another test case，其中包含16个嵌套级别。 find（）在查找所有可能的div时效果较慢，但在选择第一级div时，find（）仍然优于children（）。

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

我介绍了Chrome开发者工具中的jQuery代码，并注意到children（）在内部调用sibling（），filter（），并且比find（）更多地执行了一些正则数据。

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

Answer 3

这是a link，您可以运行性能测试。 find()实际上比children()快2倍。

Answer 4

这些不一定会给出相同的结果：find()会为您提供任何后代节点，而children()只会让您直接的孩子那场比赛。

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

Answer 5

其他答案均未涉及使用.children()或.find(">")仅 搜索父元素的直接子元素的情况。所以，我创建了一个jsPerf test to find out，使用三种不同的方法来区分孩子们。

碰巧，即使使用额外的“＆gt;”选择器，.find()仍然比<{1}}更快批次;在我的系统上，10x所以。

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

Answer 6

  

find()和children()方法都用于过滤匹配元素的子元素，但前者向下移动任何级别，后者向下移动单个级别。

简化：

1. find() - 搜索匹配元素的孩子，孙子，曾孙......所有级别都下来。
2. children() - 仅搜索匹配元素的子级（单级向下）。