jQuery 中最快的 children() 或 find() 是什么？

What is fastest children() or find() in jQuery?

提问by bart

To select a child node in jQuery one can use children() but also find().

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

For example:

例如：

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

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

gives the same result as:

给出相同的结果：

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

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

Now, which option is fastest or preferred and why?

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

回答by tvanfosson

children()only looks at the immediate children of the node, while find()traverses the entire DOM below the node, so children()shouldbe faster given equivalent implementations. However, find()uses nativebrowser methods, while children()uses JavaScriptinterpreted in the browser. In my experiments there isn't much performance difference in typical cases.

children()只查看节点的直接子节点，同时find()遍历节点下方的整个 DOM，因此在给定等效实现的情况下children()应该更快。但是，find()使用本地浏览器方法，而children()使用在浏览器中解释的JavaScript。在我的实验中，在典型情况下没有太大的性能差异。

Which to use depends on whether you only want to consider the immediate descendants or all nodes below this one in the DOM, i.e., choose the appropriate method based on the results you desire, not the speed of the method. If performance is truly an issue, then experiment to find the best solution and use that (or see some of the benchmarks in the other answers here).

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

回答by JR.

This jsPerf testsuggests that find() is faster. I created a more thorough test, and it still looks as though find() outperforms children().

这个jsPerf 测试表明 find() 更快。我创建了一个更彻底的测试，它看起来仍然像 find() 优于 children()。

Update:As per tvanfosson's comment, I created another test casewith 16 levels of nesting. find() is only slower when finding all possible divs, but find() still outperforms children() when selecting the first level of divs.

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

children() begins to outperform find() when there are over 100 levels of nesting and around 4000+ divs for find() to traverse. It's a rudimentary test case, but I still think that find() is faster than children() in most cases.

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

I stepped through the jQuery code in Chrome Developer Tools and noticed that children() internally makes calls to sibling(), filter(), and goes through a few more regexes than find() does.

我在 Chrome 开发者工具中逐步浏览了 jQuery 代码，并注意到 children() 在内部调用了兄弟 ()、filter()，并且比 find() 经历了更多的正则表达式。

find() and children() fulfill different needs, but in the cases where find() and children() would output the same result, I would recommend using find().

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

回答by mactive

Here is a linkthat has a performance test you can run. find()is actually about 2 times faster than children().

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

回答by John Feminella

Those won't necessarily give the same result: find()will get you any descendantnode, whereas children()will only get you immediate childrenthat match.

那些不一定会给出相同的结果：find()会给你任何后代节点，而children()只会给你匹配的直接子节点。

At one point, find()was a lot slower since it had to search for every descendant node that could be a match, and not just immediate children. However, this is no longer true; find()is much quicker due to using native browser methods.

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

回答by Craig Walker

None of the other answers dealt with the case of using .children()or .find(">")to onlysearch for immediate children of a parent element. So, I created a jsPerf test to find out, using three different ways to distinguish children.

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

As it happens, even when using the extra ">" selector, .find()is still a lotfaster than .children(); on my system, 10x so.

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

So, from my perspective, there does not appear to be much reason to use the filtering mechanism of .children()at all.

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

回答by Naresh Kumar

Both find()and children()methods are used to filter the child of the matched elements, except the former is travels any level down, the latter is travels a single level down.

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

To simplify:

为了简化：

1. find()– search through the matched elements' child, grandchild, great-grandchild... all levels down.
2. children()– search through the matched elements' child only (single level down).

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