Co jest szybsze i dlaczego? Wybór div (dla potrzeb wtyczki) przez $('div[data-something]') lub $('div.something')? Pochylam się do pierwszego, ponieważ jest "czystszy".Wydajność jQuery - wybierz według danych-attr lub według klasy?
Na podstawie this SO question Wiem, że nie powinienem używać obu. Jednak nie dowiedziałem się, czy istnieje między nimi różnica.
Będzie się różnić w zależności od przeglądarki. Prawie wszystkie przeglądarki obsługują teraz querySelectorAll, a jQuery użyje go, gdy będzie mógł. querySelectorAll może być używany z selektorami obecności atrybutów, więc jeśli jest tam jQuery nie musi wykonywać pracy, może odciążyć ją do silnika.
Dla starszych przeglądarek bez querySelectorAll, jQuery będzie oczywiście musiał wykonać więcej pracy, ale nawet IE8 go ma.
Ponieważ większość z tych rzeczy, najlepiej jest:
nie martw się o to aż/chyba widzisz problem, a
Jeśli pojawi się problem, profil w przeglądarkach, które zamierzasz obsługiwać, a następnie podjąć świadomą decyzję.
Wybór według klasy jest zawsze szybszy niż selektor atrybutu, ponieważ jQuery próbuje najpierw użyć natywnej wersji getElementByCalssName, jeśli jest obsługiwana przez przeglądarki. Jeśli nie, używa ona querySelector, która używa selektorów css do znajdowania elementów na stronie.
Nie, jQuery użyje 'querySelectorAll' w prawie wszystkich przeglądarkach, zamiast' getElementsByClassName'. Wróci do "getElementsByClassName" dla prostych selektorów klas (niepołączonych takich jak 'div.test'), ale tak czy inaczej odkładasz na własną implementację CSS przeglądarki na coś nowoczesnego. –
Dlaczego w dół? – ShankarSangoli
Wydaje mi się to trochę surowe, ale prawdopodobnie dlatego, że powiedziałeś, że "div.something" zawsze będzie szybsze, a tak nie jest. –
W przeglądarce Chrome co najmniej there is no difference. Jeśli jednak dokonać wyboru klasy mniej konkretny ($(".test") na przykład), to jednak lepsze wyniki niż inne metody:
To było nieco nieoczekiwane, ponieważ jak wspomina ShankarSangoli, myślałem, że selektor div.test klasa byłaby szybciej.
Podobne wyniki na IE9, z 'div.something' jest bardzo nieznacznie szybszy niż' div [dane-coś] ', ale oba są znacznie wolniejsze niż' .s coś ". –
@ T.J.Crowder - Dziękuję za uratowanie mnie kilka minut, uruchamiając go w IE9 :) Firefox jest znowu taki sam. Zaktualizowałem zrzut ekranu, aby uwzględnić te wyniki. –
'' .test'' pozwoli Sizzle na optymalizację wyboru DOM za pomocą 'getElementsByClassName' zamiast' querySelectorAll'. W większości przeglądarek ten pierwszy jest obecnie szybszy. Ale "div.test" będzie najprawdopodobniej szybszy w przeglądarkach takich jak IE6 i IE7, które nie obsługują ani 'gEBCN' ani' qSA', ponieważ zawęża ręczny test klasy tylko do elementów 'div'. –
Dobre pytania ... czy ktoś może spróbować dla mnie $ ("*"). :) zawsze chciał wiedzieć, co robi i jaka jest jego wydajność. – ggzone