Jaka jest najszybsza metoda wybierania elementów podrzędnych w jQuery?

O ile wiem, w jQuery można wybierać elementy potomne na wiele sposobów .

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

Metoda 1 (przy użyciu zakresu)

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

Metoda 2 ( metoda find ())

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

Metoda 3 (tylko dla bezpośrednich dzieci)

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

Metoda 4 (przez selektor CSS) - sugerowana przez @spinon

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

Metoda 5 (identyczna z metodą 2 ) - zgodnie z @Kai

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

Nie jestem zaznajomiony z profilowaniem, aby móc to zbadać samodzielnie, więc chciałbym zobaczyć, co masz do powiedzenia.

PS Rozumiem, że to możliwe powtórzenie tego pytania, ale nie obejmuje wszystkich metod.

Metoda 1 i metoda 2 są identyczne, z tą różnicą, że metoda 1 musi przeanalizować przekazany zakres i przetłumaczyć go na wywołanie $parent.find(".child").show();.

Metody 4 i 5 muszą przeanalizować selektor, a następnie po prostu wywołać odpowiednio : $('#parent').children().filter('.child')i $('#parent').filter('.child').

Zatem metoda 3 zawsze będzie najszybsza, ponieważ wymaga wykonania najmniejszej ilości pracy i wykorzystuje najbardziej bezpośrednią metodę, aby zdobyć dzieci pierwszego stopnia.

Na podstawie poprawionych testów prędkości Anurag tutaj: http://jsfiddle.net/QLV9y/1/

Test prędkości: (im więcej, tym lepiej)

W przeglądarce Chrome metoda 3 jest najlepsza, a następnie metoda 1/2, a następnie 4/5

W przeglądarce Firefox metoda 3 jest nadal najlepsza, a następnie metoda 1/2, a następnie 4/5

W przeglądarce Opera metoda 3 jest nadal najlepsza, a następnie metoda 4/5, a następnie 1/2

W IE 8 , chociaż ogólnie wolniejszy niż w innych przeglądarkach, nadal jest zgodny z kolejnością metody 3, 1,2,4,5.

Ogólnie rzecz biorąc, metoda 3 jest ogólnie najlepszą metodą do użycia, ponieważ jest wywoływana bezpośrednio i nie musi przechodzić przez więcej niż jeden poziom elementów podrzędnych w przeciwieństwie do metody 1/2 i nie musi być analizowana jak metoda 4/5

Należy jednak pamiętać, że w niektórych z nich porównujemy jabłka do pomarańczy, ponieważ Metoda 5 dotyczy wszystkich dzieci, a nie dzieci pierwszego poziomu.

Metoda 1

Nie można być krótszym i szybszym przy użyciu jQuery. To wywołanie sprowadza się bezpośrednio do $(context).find(selector)( metoda 2 , ze względu na optymalizację), która z kolei wywołujegetElementById .

Metoda 2

Robi to samo, ale bez niepotrzebnych wywołań funkcji wewnętrznych.

Metoda 3

używanie children()jest szybsze niż używanie find(), ale oczywiście children()znajdzie tylko bezpośrednie elementy potomne elementu głównego, podczas gdy find()będzie wyszukiwać rekursywnie z góry na dół do wszystkich elementów potomnych (w tym elementów podrzędnych)

Metoda 4

Korzystanie z takich selektorów musi być wolniejsze. Ponieważ sizzle(który jest silnikiem selektora z jQuery) działa od prawej do lewej , najpierw dopasuje WSZYSTKIE klasy, .childzanim sprawdzi, czy są one bezpośrednim dzieckiem z id 'rodzic'.

Metoda 5

Jak poprawnie stwierdziłeś, wywołanie to również utworzy $(context).find(selector)wywołanie, z powodu pewnej optymalizacji w jQueryfunkcji, w przeciwnym razie może również przejść przez (wolniej) sizzle engine.

Ponieważ jest to stary post, a wraz z upływem czasu wszystko się zmienia. Zrobiłem kilka testów na ostatnich wersjach przeglądarek do tej pory i zamieszczam je tutaj, aby uniknąć nieporozumień.

Korzystanie z jQuery 2.1 w przeglądarkach zgodnych z HTML5 i CSS3 zmienia wydajność.

Oto scenariusz testu i wyniki:

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>

Tak więc za 100 000 iteracji otrzymuję:

(Dodałem je jako img do celów formatowania).

Możesz samodzielnie uruchomić fragment kodu, aby przetestować;)