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

要在jQuery中选择子节点,可以使用children(),但也可以使用find().

例如:

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

给出与以下相同的结果:

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

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

1> tvanfosson..：

---

children()只查看节点的直接子节点,同时find()遍历节点下面的整个DOM,因此在给定等效实现时children() 应该更快.但是,find()使用本机浏览器方法,同时children()使用浏览器中解释的JavaScript.在我的实验中,典型案例的性能差异不大.

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

---

子项与查找的性能取决于浏览器以及搜索DOM子树的复杂程度.在现代浏览器中,find()内部使用querySelectorAll,它可以在复杂的选择器和小到中的DOM子树上轻松胜过children().

---

当然,但如果父元素只有子节点会发生什么？我将对此进行一些分析.

---

@jason:你的剖析有什么事吗？

2> JR...：

---

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

更新:根据tvanfosson的评论,我创建了另一个具有16级嵌套的测试用例.find()只有在找到所有可能的div时才会变慢,但在选择第一级div时,find()仍然优于children().

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

我介绍了Chrome Developer Tools中的jQuery代码,并注意到children()内部调用了sibling(),filter(),并且比find()更多地执行了一些正则数据.

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

---

看起来孩子们使用dom遍历方法并找到使用选择器api,这更快.

---

相当简单的测试用例,因为你只有一个级别的嵌套.如果你想要一般情况,你必须设置一些任意的嵌套深度并检查性能,因为find()遍历比child()更深的树.

3> 小智..：

---

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

4> John Feminel..：

---

那些不一定会给出相同的结果:find()会得到任何后代节点,而children()只会让你的直接孩子匹配.

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

5> Craig Walker..：

---

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

碰巧的是,即使使用额外的">"选择器,.find()仍然要快得多.children(); 在我的系统上,10倍左右.

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

---

谢谢你的评论!我想知道jQuery是否应该转换为.children(x)是.find(">"+ x)的别名,尽管可能还有其他一些我没想到的并发症.