代码之家 › 专栏 › 技术社区 › coryan

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

profiling jquery-selectors performance jquery

101

coryan · 技术社区 · 6 年前

据我所知,有很多方法可以选择子元素 jQuery查询

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

方法1 (通过使用范围)

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

方法2 (find()方法)

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

方法3

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

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

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

方法5 (等同于 ) -据@Kai

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

我不太熟悉分析,所以我很想看看你有什么要说的。

另外,我知道这可能是 this question

3 回复 | 直到 8 年前

Zoe - Save the data dump å¼ ç¾¤å³° 6 年前

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

方法5 两者都需要解析选择器,然后只需调用: $('#parent').children().filter('.child') $('#parent').filter('.child') 分别。

所以呢 方法3

根据Anurag修订的速度测试: http://jsfiddle.net/QLV9y/1/

在铬方法3的效果最好,其次是方法1/2和方法4/5

在火狐

在 歌剧院 方法3仍优于方法4/5和方法1/2

在 工业工程8

总的来说, 方法3 是直接调用时使用的最佳方法,与方法1/2不同,它不需要遍历多个级别的子元素,也不需要像方法4/5那样解析

不过,请记住,在其中一些案例中,我们将苹果和橙子进行比较,因为方法5关注的是所有儿童,而不是一级儿童。

alex 14 年前

方法1

$(context).find(selector) ( 方法2 ,这反过来 getElementById

方法2

正在执行相同的操作,但没有一些不必要的内部函数调用。

方法3

使用 children() 比使用 find() ,但当然, 儿童() 只会找到根元素的直接子元素 查找() 将自上而下递归搜索所有子元素(包括子元素)

方法4

像这样使用选择器,速度会慢一些。自 sizzle (这是jQuery的选择器引擎)工作正常 ,它将匹配所有类 .child 首先看他们是否是id为“parent”的直接子级。

方法5

正如您所说的,这个调用还将创建一个 $(上下文).find(选择器) 调用,因为 jQuery 函数,否则它也可以通过(较慢) sizzle engine .

Vasil Popov 7 年前

因为这是一个古老的职位,事情会随着时间而改变。到目前为止,我对最新的浏览器版本做了一些测试,我把它贴在这里是为了避免误解。

在HTML5和CSS3兼容的浏览器上使用jQuery2.1会改变性能。

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>

因此,对于100000次迭代,我得到:

JS jQuery selector stats

(为了格式化,我将它们添加为img。)