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

2020/10/31 15:32 · jquery ·  · 0评论

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

例如:

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

给出与以下结果相同的结果:

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

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

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

使用哪种方法取决于您是只考虑直接后代还是DOM中低于该节点的所有节点,即根据所需结果选择适当的方法,而不是方法的速度。如果性能确实是一个问题,请尝试寻找最佳解决方案并加以使用(或在此处查看其他答案中的一些基准)。

jsPerf测试表明find()更快。我创建了一个更全面的测试,它看起来好像find()胜过children()。

更新:根据tvanfosson的评论,我创建了另一个具有16个嵌套级别的测试用例find()仅在查找所有可能的div时速度较慢,但​​是在选择第一个div级别时,find()的性能仍然优于child()。

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

我逐步浏览了Chrome开发者工具中的jQuery代码,并注意到children()在内部对sibling(),filter()进行了调用,并且经过了比find()更多的正则表达式。

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

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

OSX10.7.6上的Chrome

这些不一定find()会得到相同的结果:将使您获得任何后代节点,而children()仅使您获得匹配的直接子代

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

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

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

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

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

为了简化:

  1. find() –搜索匹配元素的子级,孙级,曾孙级...各个级别。
  2. children() –仅搜索匹配元素的子级(单级向下)。
本文地址:http://jquery.askforanswer.com/shenmeshijqueryzhongzuikuaidechildrenhuofind.html
文章标签: ,  
版权声明:本文为原创文章,版权归 admin 所有,欢迎分享本文,转载请保留出处!

文件下载

老薛主机终身7折优惠码boke112

上一篇:
下一篇:

评论已关闭!