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

jQuery中最快的children()或find()是什么?,jquery,jquery-selectors,Jquery,Jquery Selectors,要在jQuery中选择子节点,可以使用children()和find() 例如: $(this.children('.foo') 给出与以下相同的结果: $(this.find('.foo') 现在,哪个选项是最快的或首选的,以及为什么?只查看节点的直接子节点,而遍历节点下方的整个DOM,因此,给定等效的实现,children()应该更快。但是,find()使用本机浏览器方法,而children()使用浏览器中解释的JavaScript。在我的实验中,典型情况下的性能差别不大 取决于您是否只考虑

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

例如:

$(this.children('.foo')

给出与以下相同的结果:

$(this.find('.foo')

现在,哪个选项是最快的或首选的,以及为什么?

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


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

这些不一定会给出相同的结果:
将获得任何后代节点,而
将只获得匹配的直接子节点

在某一点上,
find()
要慢得多,因为它必须搜索每个可能匹配的子节点,而不仅仅是直接的子节点。然而,这已不再是事实<由于使用本机浏览器方法,代码>查找()更快。

这表明查找()更快。我创建了一个,但看起来find()的性能仍然优于children()

更新:根据tvanfosson的评论,我创建了16层嵌套。查找所有可能的div时find()的速度较慢,但在选择第一级div时find()的性能仍优于children()

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

我在Chrome Developer Tools中浏览了jQuery代码,注意到children()在内部调用了sibling()、filter(),并且比find()使用了更多的正则表达式

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

这里有一个可以运行的性能测试
find()
实际上比
children()
快2倍左右


其他答案都没有涉及使用
.children()
.find(“>”
仅搜索父元素的直接子元素的情况。所以,我创造了一个新的方法,用三种不同的方法来区分孩子

事实上,即使使用额外的“>”选择器,
.find()
仍然比
.children()
快得多;在我的系统上,10倍左右

因此,在我看来,似乎没有太多理由使用
.children()
的过滤机制

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

要简化:

  • find()
    –搜索匹配元素的子、孙、曾孙。。。所有级别都降低了
  • children()
    –仅搜索匹配元素的子元素(单层向下)

  • 当然可以,但是如果父元素只有子节点,会发生什么呢?我将对此进行一些分析。children vs find的性能取决于浏览器和DOM子树的搜索复杂程度。在现代浏览器上,find()内部使用querySelectorAll,在复杂选择器和小到中等的DOM子树上很容易胜过children()。这将有助于提供您实验的一些定量结果。对我来说,在所有层次结构嵌套在5到20之间的测试中,find()总是优于children()。(在谷歌Chrome54上测试)我的预期正好相反。因此,从现在开始,我将采用简单的方法查找(…)我的元素,而不是通过children()遍历它们。children()。children()…似乎children使用dom遍历方法,find使用选择器api,速度更快。非常退化的测试用例,因为您只有一个嵌套级别。如果您想使用一般情况,则必须设置一些任意嵌套深度,并检查性能,因为find()遍历的树比children()更深。如果您要检查特定dom元素(例如$('.navbar')中是否有特定的单一子元素(例如event.target),则$.contains(这是event.target)是目前最快的(8433609/秒vs 140k是最快的jquery搜索)。
    .find()
    .children()
    不一样。后者只沿DOM树向下移动一级,就像子选择器一样。@Timothy003您描述得不对,前者沿DOM树向下移动一级,而不是子选择器。@Timothy003latter@DipeshRana“后者”适用于Timothy003自己的句子,而不是问题。谢谢你提出这个问题。在许多情况下,表现都是d区别是微不足道的,但文档实际上没有提到这两种方法的实现方式不同!为了最佳实践,最好知道
    find()
    几乎总是更快。这就是为什么我从不喜欢“前者”或“后者”用英语构造。只需说出你的意思。嘘。不是根据其他答案哈哈:p。只有当你有一棵非常非常非常大的DOM树时。@Camou这个答案已经四年了。
    find()
    当时慢得多!@Camou说性能部分“不是根据其他答案”答案的第一段是准确的。谢谢你的评论!我想知道