在jQuery中选择子节点可以使用children(),也可以使用find()。
例如:
(美元)定格(' . foo ');
给出的结果与:
(美元);(' . foo ');
现在,哪一个选择是最快的或首选的,为什么?
在jQuery中选择子节点可以使用children(),也可以使用find()。
例如:
(美元)定格(' . foo ');
给出的结果与:
(美元);(' . foo ');
现在,哪一个选择是最快的或首选的,为什么?
当前回答
其他答案都没有涉及使用.children()或.find(">")只搜索父元素的直接子元素的情况。因此,我创建了一个jsPerf测试来找出答案,使用三种不同的方法来区分孩子。
事实上,即使在使用额外的">"选择器时,.find()仍然比.children()快得多;在我的系统中,是10倍。
因此,从我的角度来看,似乎根本没有太多理由使用.children()的过滤机制。
其他回答
其他答案都没有涉及使用.children()或.find(">")只搜索父元素的直接子元素的情况。因此,我创建了一个jsPerf测试来找出答案,使用三种不同的方法来区分孩子。
事实上,即使在使用额外的">"选择器时,.find()仍然比.children()快得多;在我的系统中,是10倍。
因此,从我的角度来看,似乎根本没有太多理由使用.children()的过滤机制。
find()和children()方法都用于过滤匹配元素的子元素,只是前者向下移动任何一层,后者向下移动一层。
简化:
Find()—搜索匹配元素的子、孙、曾孙…各层向下。 Children()—只搜索匹配元素的子元素(向下一层)。
这里有一个可以运行的性能测试链接。Find()实际上比children()快2倍。
这个jsPerf测试表明find()更快。我创建了一个更彻底的测试,看起来find()仍然优于children()。
更新:根据tvanfosson的评论,我创建了另一个包含16层嵌套的测试用例。Find()只是在查找所有可能的div时较慢,但Find()在选择第一级div时仍然优于children()。
当有超过100层嵌套和大约4000+ div需要find()遍历时,Children()开始优于find()。这是一个基本的测试用例,但我仍然认为find()在大多数情况下比children()更快。
我在Chrome开发者工具中逐步通过jQuery代码,并注意到children()内部调用sibling(), filter(),并且比find()通过更多的正则表达式。
find()和children()满足不同的需求,但在find()和children()输出相同结果的情况下,我建议使用find()。
它们不一定会得到相同的结果:find()会得到任何后代节点,而children()只会得到匹配的直接子节点。
在某一点上,find()要慢得多,因为它必须搜索每个可能匹配的后代节点,而不仅仅是直接子节点。然而,这已不再是事实;由于使用本机浏览器方法,Find()速度更快。