Jaka jest najszybsza metoda wybierania elementów potomnych w jQuery?

Z tego, co wiem, Istnieje wiele sposobów wybierania elementów potomnych w jQuery .

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

Metoda 1 (za pomocą zakresu) 

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

Metoda 2 (metoda find ()) 

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

Metoda 3 (tylko dla dzieci) 

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

Metoda 4 (poprzez selektor CSS) - sugerowany przez @ spinon 

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

Metoda 5 (identyczna z metodą 2) - według @Kai 

$("#parent .child").show();
Nie jestem zaznajomiony z profilowaniem, by móc zbadać to na własną rękę, więc chciałbym zobaczyć, co masz do powiedzenia.

P. S. rozumiem, że jest to możliwy duplikat tego pytania , ale nie obejmuje wszystkich metod.

Author: Marko, 2010-07-05
Source

3 answers

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

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

Więc Metoda 3 zawsze będzie najszybsza, ponieważ musi wykonać jak najmniej pracy i użyć najbardziej bezpośredniej metody, aby uzyskać pierwszy poziom dzieci.

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

Speed test: (More is Better)

Na Chrome, Metoda 3 jest najlepsza potem metoda 1/2 a potem 4/5

Alt text http://tinyurl.com/2clyrbz

Na Firefox Metoda 3 jest nadal najlepsza potem metoda 1/2 a potem 4/5

Alt text http://tinyurl.com/2e89tp5

Na Opera Metoda 3 jest nadal najlepsza wtedy metoda 4/5 a następnie 1/2

Alt text http://tinyurl.com/2a9r9r8

Na IE 8, choć ogólnie wolniej niż w innych przeglądarkach, nadal stosuje metodę 3, 1,2,4,5.

Alt text http://tinyurl.com/2a8ag59

Ogólnie Rzecz Biorąc, Metoda 3 jest ogólnie najlepszą metodą do użycia, ponieważ jest wywoływana bezpośrednio i nie musi przekraczać więcej niż jednego poziomu elementów potomnych 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 patrzy na wszystkie dzieci zamiast na dzieci pierwszego poziomu.
 95
Author: Aaron Harun,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2010-07-05 15:38:03

Metoda 1

Nie może być krótszy i szybszy przy użyciu jQuery. To połączenie bezpośrednio sprowadza się do$(context).find(selector) (Metoda 2 , ze względu na optymalizację), która z kolei wywołuje getElementById.

Metoda 2

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

Metoda 3

Użycie children() jest szybsze niż użycie find(), ale oczywiście children() znajdzie tylko bezpośrednie dzieci elementu głównego, podczas gdy find() będzie wszystkie elementy potomne(w tym elementy podrzędne) są rekurencyjnie przeszukiwane od góry do dołu]}

Metoda 4

Używanie selektorów w ten sposób musi być wolniejsze. Ponieważ sizzle (który jest silnikiem selektora z jQuery) działa od prawej do lewej , najpierw dopasuje wszystkie klasy .child, zanim sprawdzi, czy są bezpośrednio potomkami z id 'parent'.

Metoda 5

Jak podałeś poprawnie, to wywołanie utworzy również $(context).find(selector) wywołanie, ze względu na pewną optymalizację w ramach funkcji jQuery, w przeciwnym razie może również przejść przez (wolniejszy) sizzle engine.

 13
Author: jAndy,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2011-04-15 04:37:33

Jak to jest stary post, a rzeczy zmieniają się z czasem. Zrobiłem kilka testów na ostatnich wersjach przeglądarki do tej pory, i zamieszczam go tutaj, aby uniknąć nieporozumień.

Używając jQuery 2.1 w przeglądarkach zgodnych z HTML5 i CSS3 Wydajność się zmienia.

Oto scenariusz i wyniki testu: 

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>

więc za 100 000 iteracji dostaję:

Statystyki selektora JS jQuery

(dodałem je jako img do formatowania cele.)

Możesz sam uruchomić fragment kodu do przetestowania;)

 8
Author: Vasil Popov,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-09-19 02:24:27