2013-06-04 14 views
5

Czytam książkę i pokazują kilka przykładów, jak wybrać elementy w DOM, ale radzą, aby zawsze używać metod trasowania Jquery nad selektorami, na przykład jeśli masz listę wewnątrz div zamiast używaćJquery przechodzenie i używanie selektorów

$("#myList > li") 

należy użyć

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

większość czasu używam najpierw nad tym ostatnim, autor mówi 2nd jest korzystne i bardziej efektywny, ale on nie dotyczy dlaczego, czy ktoś może wyjaśnić powód tego?

+0

Jeśli interesuje Cię wydajność, nie powinieneś w ogóle używać jQuery. Użyj tego, co jest dla ciebie bardziej przejrzyste. – Bergi

+0

możliwy duplikat [wydajności selektora jQuery] (http://stackoverflow.com/questions/1411143/jquery-selector-performance) – Bergi

+2

[Przeczytaj to] (https://developers.google.com/speed/docs/best- praktyka/rendering? hl = fr-FR # UseEfficientCSSSelectors) 'Child i selektory sąsiednie są nieefektywne, ponieważ dla każdego pasującego elementu przeglądarka musi ocenić inny węzeł. Staje się podwójnie kosztowny dla każdego selektora dla dzieci w regule. Ponownie, im mniej konkretny klucz, tym większa liczba węzłów, które muszą być ocenione. Jednak, chociaż są mało wydajne, nadal preferują selektory potomne pod względem wydajności. " –

Odpowiedz

5

myślę, że różnica w wydajności w tym konkretnym przypadku sprowadza się do tego:

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

i test wydajności tutaj: http://jsperf.com/ae-d2-56-2a-e2-36-a3-d3-52-74

jQuery może sprawdzić, czy jest to li podane selektor ale to nadal będzie szybsze niż querySelectorAll lub Sizzle.

+0

Co ciekawe w Operze natywny selektor jest o około 50% szybszy :-) – Bergi

+0

@Bergi: Presto! Teraz Blink dwa razy ... – elclanrs

+1

jsperf nie jest jabłkiem, ponieważ nie filtruje dzieci według nazwy znacznika. Robiąc to, okazuje się, że 'querySelectorAll' jest najszybszy. Zobacz poprawiony jsperf. –

Powiązane problemy