2013-06-04 5 views
5

Ich lese ein Buch und sie zeigen ein paar Beispiele für die Auswahl von Elementen im DOM, aber sie raten, immer Jquery trasversing Methoden über die Selektoren zu verwenden, zum Beispiel wenn Sie eine Liste haben innerhalb eines div stattdessen sollte der Verwendung vonJquery Traversieren und Verwenden von Selektoren

$("#myList > li") 

Sie

$("#myList").children("li") 

ich die erste über letzteren verwenden die meiste Zeit verwenden, sagt der Autor die zweite Beliebten und effizienter, aber er geht nicht auf Warum kann jemand den Grund dafür erklären?

+0

Wenn Sie an der Leistung interessiert sind, sollten Sie jQuery überhaupt nicht verwenden. Verwenden Sie, was Ihnen klarer ist. – Bergi

+0

möglich Duplikat von [jQuery Selector Leistung] (http://stackoverflow.com/questions/1411143/jquery-selector-performance) – Bergi

+2

[Lesen Sie] (https://developers.google.com/speed/docs/best- practices/rendering? hl = fr-FR # UseEfficientCSSSelectors) 'Untergeordnete und benachbarte Selektoren sind ineffizient, da der Browser für jedes passende Element einen anderen Knoten evaluieren muss. Es wird für jeden Kindselektor in der Regel doppelt teuer. Je weniger spezifisch der Schlüssel ist, desto größer ist die Anzahl der Knoten, die ausgewertet werden müssen. Obwohl sie ineffizient sind, sind sie in Bezug auf die Leistung immer noch den Nachkommenselektoren vorzuziehen. –

Antwort

5

Ich denke, der Unterschied in der Leistung in diesem speziellen Fall kommt unten zu diesem:

document.querySelectorAll('#myList > li'); 
// VS 
document.getElementById('myList').children; 

und die Performance-Test hier: http://jsperf.com/ae-d2-56-2a-e2-36-a3-d3-52-74

jQuery überprüfen könnten, um zu sehen, ob es ein li ist der Wähler gegeben, aber das wird immer noch schneller sein als querySelectorAll oder Sizzle.

+0

Interessanterweise ist der native Selektor in Opera um 50% schneller :-) – Bergi

+0

@Bergi: Presto! Jetzt blink zweimal ... – elclanrs

+1

Die Jsperf ist nicht Äpfel-zu-Äpfel, weil es nicht die Kinder nach Tag-Namen filtert. Dabei stellt sich heraus, dass "querySelectorAll" am schnellsten ist. Siehe überarbeitete Jsperf. –