在 jQuery 中选择子元素的最快方法是什么？

据我所知，在 JQuery中有许多选择子元素的方法。

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

方法1 < em > (通过使用范围)

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

方法2 < em > (find ()方法)

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

方法3(只适用于直系子女)

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

方法4 (通过 CSS 选择器)-由@spinon 建议

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

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

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

我不熟悉侧写，不能独自调查这个，所以我想看看你有什么要说的。

另外，我知道这可能是 这个问题的一个副本，但它并没有涵盖所有的方法。

19439 次浏览
小开
最佳答案

Method 1 and method 2 are identical with the only difference is that method 1 needs to parse the scope passed and translate it to a call to $parent.find(".child").show();.

Method 4 and Method 5 both need to parse the selector and then just call: $('#parent').children().filter('.child') and $('#parent').filter('.child') respectively.

So method 3 will always be the fastest because it needs to do the least amount of work and uses the most direct method to get first-level children.

Based on Anurag's revised speed tests here: http://jsfiddle.net/QLV9y/1/

Speed test: (More is Better)

On Chrome, Method 3 is the best then method 1/2 and then 4/5

enter image description here

On Firefox, Method 3 is still best then method 1/2 and then 4/5

enter image description here

On Opera, Method 3 is still best then method 4/5 and then 1/2

enter image description here

On IE 8, while slower overall than other browsers, it still follows the Method 3, 1,2,4,5 ordering.

enter image description here

Overall, method 3 is the overal best method to use as it is called directly and it doesn't need to traverse more than one level of child elements unlike method 1/2 and it doesn't need to be parsed like method 4/5

Though, keep in mind that in some of these we are comparing apples to oranges as Method 5 looks at all children instead of first-level ones.

小开

Method 1

Can't be shorter and faster using jQuery. This call directly gets down to $(context).find(selector) (method 2, due to optimazation) which in turn, calls getElementById.

Method 2

Is doing the same, but without some unnecessary internal function calls.

Method 3

using children() is faster than using find(), but of course, children() will only find direct childrens of the root element whereas find() will search recursivly top-down to all child elemens(including sub child elements)

Method 4

Using selectors like this, has to be slower. Since sizzle (which is the selector engine from jQuery) works right to left, it will match ALL classes .child first before it looks if they are a direct child from id 'parent'.

Method 5

As you stated correctly, this call will also create a $(context).find(selector) call, due to some optimazation within the jQuery function, otherwise it could also go through the (slower) sizzle engine.

小开

As it is an old post, and things change with the time. I did some tests on the last browser versions so far, and I`m posting it here to avoid misunderstandings.

Using jQuery 2.1 on HTML5 and CSS3 compatible browsers the performance changes.

Here is the test scenario and results:

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>

So, for 100 000 iterations I get:

JS jQuery selector stats

(I have added them as img for formatting purposes.)

You can run the code snippet yourself to test ;)


提交答案