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测试表明，发现（）更快。我创建了一个更详尽的测试，它仍然看起来好像找到（）性能优于儿童（）。

<强>更新作为每tvanfosson的评论，我创建另一个测试情况与16层的嵌套的。找到（）是寻找所有可能的div当仅比较慢，但是发现（）仍然优于儿童（）选择的div的第一电平的时候。

儿童（）开始超越查找（）时，有超过100层的嵌套和周围4000+的div用于查找（）来遍历。这是一个基本的测试案例，但我仍然认为，找到（）是比孩子（）在大多数情况下更快。

我通过Chrome的开发者工具jQuery代码加强，并注意到儿童（）内部使得以兄弟姐妹）调用（，过滤器（），并通过几个正则表达式远不止找到（）一样。

查找（）和子女（）满足不同的需求，但在情况下，找到（）和子女（）将输出相同的结果，我会建议使用find（）。

Answer 3

下面是有可以运行性能测试链接。 find()实际上比children()快约2倍。

Answer 4

这些不一定会产生相同的结果：find()将让你任何的后代的节点，而children()只会让你的直接子的那场比赛

在一个点上，find()是因为它有搜索这可能是一个比赛的每个后继节点慢了许多，而不仅仅是眼前的孩子。然而，这不再是真实的; find()快得多由于使用本机浏览器的方法。

Answer 5

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

碰巧，使用额外 “>”，即使选择器，.find()仍然是一个很多比.children()快;在我的系统，所以10倍。

因此，从我的角度来看，似乎不存在于有太大的理由使用.children()的过滤机制在所有。

Answer 6

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

简化一下：

1. find() – 搜索匹配元素的子、孙、曾孙...所有级别均下降。
2. children() – 仅搜索匹配元素的子元素（向下一层）。