Apa metode tercepat untuk memilih elemen turunan di jQuery?

Sejauh yang saya tahu, ada beberapa cara untuk memilih elemen anak di jQuery .

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

Metode 1 (dengan menggunakan ruang lingkup)

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

Metode 2 (metode find ())

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

Metode 3 (Hanya untuk anak-anak usia dini)

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

Metode 4 (melalui pemilih CSS) - disarankan oleh @spinon

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

Metode 5 (identik dengan Metode 2 ) - menurut @Kai

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

Saya tidak terbiasa dengan pembuatan profil untuk dapat menyelidiki ini sendiri, jadi saya ingin melihat apa yang Anda katakan.

PS Saya mengerti bahwa ini adalah kemungkinan duplikat dari pertanyaan ini, tetapi tidak mencakup semua metode.

Metode 1 dan metode 2 identik dengan satu-satunya perbedaan adalah metode 1 perlu mengurai cakupan yang diteruskan dan menerjemahkannya menjadi panggilan ke $parent.find(".child").show();.

Metode 4 dan Metode 5 perlu mengurai selektor lalu memanggil: $('#parent').children().filter('.child')dan $('#parent').filter('.child')masing - masing.

Jadi metode 3 akan selalu menjadi yang tercepat karena metode ini perlu melakukan sedikit pekerjaan dan menggunakan metode paling langsung untuk mendapatkan anak tingkat pertama.

Berdasarkan uji kecepatan revisi Anurag di sini: http://jsfiddle.net/QLV9y/1/

Tes kecepatan: (Lebih banyak lebih baik)

Di Chrome , Metode 3 adalah yang terbaik lalu metode 1/2 dan kemudian 4/5

Di Firefox , Metode 3 masih yang terbaik daripada metode 1/2 dan kemudian 4/5

Di Opera , Metode 3 masih yang terbaik daripada metode 4/5 dan kemudian 1/2

Di IE 8 , meskipun secara keseluruhan lebih lambat daripada browser lain, ia masih mengikuti pengurutan Metode 3, 1,2,4,5.

Secara keseluruhan, metode 3 adalah metode umum terbaik untuk digunakan karena dipanggil secara langsung dan tidak perlu melintasi lebih dari satu tingkat elemen turunan tidak seperti metode 1/2 dan tidak perlu diurai seperti metode 4/5

Meskipun demikian, perlu diingat bahwa dalam beberapa metode ini kami membandingkan apel dengan jeruk karena Metode 5 melihat semua anak, bukan yang tingkat pertama.

Metode 1

Tidak bisa lebih pendek dan lebih cepat menggunakan jQuery. Panggilan ini secara langsung turun ke $(context).find(selector)( metode 2 , karena pengoptimalan) yang pada gilirannya, memanggil getElementById.

Metode 2

Melakukan hal yang sama, tetapi tanpa beberapa panggilan fungsi internal yang tidak perlu.

Metode 3

menggunakan children()lebih cepat daripada menggunakan find(), tetapi tentu saja, children()hanya akan menemukan find()turunan langsung dari elemen root sedangkan akan mencari secara berulang dari atas ke bawah ke semua elemen anak (termasuk elemen sub anak)

Metode 4

Menggunakan selektor seperti ini, harus lebih lambat. Karena sizzle(yang merupakan mesin pemilih dari jQuery) bekerja dari kanan ke kiri , itu akan mencocokkan SEMUA kelas .childterlebih dahulu sebelum terlihat jika mereka adalah turunan langsung dari id 'induk'.

Metode 5

Seperti yang Anda nyatakan dengan benar, panggilan ini juga akan membuat $(context).find(selector)panggilan, karena beberapa pengoptimalan di dalam jQueryfungsi, jika tidak, bisa juga melalui (lebih lambat) sizzle engine.

Karena ini adalah pos lama, dan banyak hal berubah seiring waktu. Sejauh ini saya telah melakukan beberapa pengujian pada versi browser terakhir, dan saya mempostingnya di sini untuk menghindari kesalahpahaman.

Menggunakan jQuery 2.1 pada browser yang kompatibel dengan HTML5 dan CSS3, kinerja berubah.

Berikut skenario dan hasil pengujiannya:

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>

Jadi, untuk 100.000 iterasi saya mendapatkan:

(Saya telah menambahkannya sebagai img untuk tujuan pemformatan.)

Anda dapat menjalankan sendiri cuplikan kode untuk menguji;)