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

发布于 2024-09-08 08:23:38 字数 906 浏览 2 评论 0原文

据我所知，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 （与方法2相同） - 根据@Kai，

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

我不熟悉分析，无法自己调查这个问题，所以我很乐意看到你有什么要说的。

PS我知道这可能是这个问题的重复，但是它没有涵盖所有方法。

原文

As far is I know, there are a number of ways of selecting child elements in jQuery.

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

Method 1 (by using a scope)

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

Method 2 (the find() method)

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

Method 3 (For immediate children only)

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

Method 4 (via CSS selector) - suggested by @spinon

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

Method 5 (identical to Method 2) - according to @Kai

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

I'm not familiar with profiling to be able to investigate this on my own, so I would love to see what you have to say.

P.S. I understand this is a possible duplicate of this question but it doesn't cover all methods.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

哥，最终变帅啦 2024-09-15 08:23:38

方法1和方法2完全相同，唯一的区别是方法1需要解析传递的范围并将其转换为对<的调用代码>$parent.find(".child").show();。

方法4和方法5都需要解析选择器，然后调用：$('#parent').children().filter('.child ') 和 $('#parent').filter('.child') 分别。

所以方法3永远是最快的，因为它需要做的工作量最少，并且使用最直接的方法来获取第一级子级。

基于 Anurag 修订后的速度测试：http://jsfiddle.net/QLV9y/1/

速度测试：（越多越好）

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

在 Firefox 上，方法 3 仍然是最好的方法，然后是方法 1/2，然后是方法 4/5

在 Opera 上，方法 3 仍然是最好的，然后是方法 4/5，然后是 1/2

在 IE 8 上，虽然整体速度比其他浏览器慢，但仍然遵循方法 3、1、2、4、5 排序。

，方法 3 是总体上最好的方法，因为它是直接调用的，并且与方法 1 不同，它不需要遍历多于一层的子元素/ 2 并且不需要像方法 4/5 那样进行解析

不过，请记住，在其中一些方法中，我们将苹果与橙子进行比较，因为方法 5 着眼于所有子级而不是第一级子级。

回复收藏 0 原文

夜吻♂芭芘 2024-09-15 08:23:38

方法 1

使用 jQuery 无法更短、更快。此调用直接进入 $(context).find(selector) （方法 2，由于优化），后者又调用 getElementById 。

方法 2

做同样的事情，但没有一些不必要的内部函数调用。

方法 3

使用 children() 比使用 find() 更快，但当然，children() 会只查找根元素的直接子元素，而find()将递归地自上而下搜索所有子元素（包括子子元素）

方法4

使用这样的选择器，有慢一点。由于 sizzle （这是 jQuery 的选择器引擎）从右到左工作，因此它会先匹配所有类 .child，然后再查找它们是否是 id 'parent' 的直接子级。

方法 5

正如您所说的正确，由于 jQuery 中的一些优化，此调用还将创建一个 $(context).find(selector) 调用code> 函数，否则它也可以通过（较慢的）sizzle 引擎。

回复收藏 0 原文

┾廆蒐ゝ 2024-09-15 08:23:38

由于这是一篇旧文章，内容会随着时间而变化。到目前为止，我对最新的浏览器版本做了一些测试，我将其发布在这里以避免误解。

在 HTML5 和 CSS3 兼容浏览器上使用 jQuery 2.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>

因此，对于 100 000 次迭代，我得到：

JS jQuery 选择器统计信息

（我有将它们添加为 img 以便格式化。）

您可以自己运行代码片段进行测试；）

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 ;)

回复收藏 0 原文

~没有更多了~