在jQuery中select后代元素的最快方法是什么?

据我所知,在jQuery中有很多select子元素的方法。

//Store parent in a variable var $parent = $("#parent"); 

方法1 (通过使用范围)

 $(".child", $parent).show(); 

方法2 (find()方法)

 $parent.find(".child").show(); 

方法3 (仅针对直接子女)

 $parent.children(".child").show(); 

方法4 (通过CSSselect器) – 由@spinonbuild议

 $("#parent > .child").show(); 

方法5 (与方法2相同) – 根据@Kai

 $("#parent .child").show(); 

我不熟悉分析能够自己调查,所以我很想看看你有什么话要说。

PS我明白这是这个问题的可能重复,但它不包括所有的方法。

方法1方法2是相同的,唯一不同的是方法1需要parsing传递的作用域并将其转换为对$parent.find(".child").show();的调用$parent.find(".child").show();

方法4方法5都需要parsingselect器,然后调用: $('#parent').children().filter('.child')$('#parent').filter('.child')

所以方法3总是最快的,因为它需要做最less量的工作,并且使用最直接的方法来获得一级孩子。

基于Anurag修改后的速度testing: http : //jsfiddle.net/QLV9y/1/

速度testing:(越多越好)

Chrome上 ,方法3是最好的方法1/2,然后是4/5

替代文字http://tinyurl.com/2clyrbz

Firefox上 ,方法3仍然是方法1/2然后是4/5

替代文字http://tinyurl.com/2e89tp5

Opera上 ,方法3仍然是方法4/5然后是1/2

替代文字http://tinyurl.com/2a9r9r8

IE 8上 ,虽然总体上比其他浏览器慢,但仍然遵循方法3,1,2,4,5的顺序。

替代文字http://tinyurl.com/2a8ag59

总体而言, 方法3是直接调用的最佳方法,不需要像方法1/2那样遍历多个子元素级别,并且不需要像方法4/5那样进行parsing

虽然,请记住,其中一些我们正在比较苹果橙子方法5看所有的孩子,而不是一级的。

方法1

使用jQuery不能更短,更快。 这个调用直接返回到$(context).find(selector)方法2 ,由于$(context).find(selector) ),然后调用getElementById

方法2

是这样做,但没有一些不必要的内部函数调用。

方法3

使用children()比使用find()快,但是当然children()只能find根元素的直接子对象,而find()会自上而下地search所有的子元素(包括子子元素)

方法4

使用这样的select器,必须慢一些。 由于sizzle (这是jQuery的select器引擎)的工作原理是左 .child ,它会先匹配所有类.child然后再查看它们是否是来自id“parent”的直接子对象。

方法5

正如你所说的,这个调用还会创build一个$(context).find(selector)调用,由于jQuery函数中的一些优化,否则它也可能通过(较慢的) sizzle engine

因为这是一个旧的职位,事情随着时间而改变。 到目前为止,我在最后一个浏览器版本上做了一些testing,为了避免误解,我在这里发布。

在兼容HTML5和CSS3的浏览器上使用jQuery 2.1,性能会发生变化。

以下是testing场景和结果:

 function doTest(selectorCallback) { var iterations = 100000; // Record the starting time, in UTC milliseconds. var start = new Date().getTime(); for (var i = 0; i < iterations; i++) { // Execute the selector. The result does not need to be used or assigned selectorCallback(); } // Determine how many milliseconds elapsed and return return new Date().getTime() - start; } function start() { jQuery('#stats').html('Testing...'); var results = ''; results += "$('#parent .child'): " + doTest(function() { jQuery('#parent .child'); }) + "ms"; results += "<br/>$('#parent > .child'): " + doTest(function() { jQuery('#parent > .child'); }) + "ms"; results += "<br/>$('#parent').children('.child'): " + doTest(function() { jQuery('#parent').children('.child'); }) + "ms"; results += "<br/>$('#parent').find('.child'): " + doTest(function() { jQuery('#parent').find('.child'); }) + "ms"; $parent = jQuery('#parent'); results += "<br/>$parent.find('.child'): " + doTest(function() { $parent.find('.child'); }) + "ms"; jQuery('#stats').html(results); } 
 <!doctype html> <html lang="en"> <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=7, IE=8, IE=9, chrome=1" /> <title>HTML5 test</title> <script src="//code.jquery.com/jquery-2.1.1.js"></script> </head> <body> <div id="stats"></div> <button onclick="start()">Test</button> <div> <div id="parent"> <div class="child"></div> <div class="child"></div> <div class="child"></div> <div class="child"></div> <div class="child"></div> <div class="child"></div> <div class="child"></div> </div> </div> </body> </html>