Dobre sposoby na poprawę wydajności selektora jQuery?

W niektórych przypadkach można przyspieszyć zapytanie, ograniczając jego kontekst. Jeśli masz odniesienie do elementu, możesz przekazać je jako drugi argument, aby ograniczyć zakres zapytania:

$(".myclass", a_DOM_element);

Powinien być szybszy niż

$(".myclass");

Jeśli masz już a_DOM_element i jest on znacznie mniejszy niż cały dokument.

Jak wspomniano powyżej jQuery działa od dołu do góry. Chociaż

To znaczy $('#foo bar div') jest lot wolniejszy niż $('bar div #foo')

Chodzi o to:

• jeśli podzelectujesz cokolwiek z elementu o ID, wybierz najpierw "later", a następnie użyj .find, .children itd.: $('#foo').find('div')
• twoja lewa (pierwsza) część z selektora Może być mniej wydajne skalowanie do najbardziej prawej (ostatniej) części, która powinna być najbardziej efektywna - to znaczy jeśli nie masz ID upewnij się, że szukasz $('div.common[slow*=Search] input.rare') zamiast $('div.rare input.common[name*=slowSearch]') - ponieważ nie zawsze ma to zastosowanie upewnij się, że wymusisz kolejność selektora dzieląc odpowiednio.

Aby w pełni zrozumieć, co jest szybsze, musisz zrozumieć, jak działa parser CSS.

Selektor zostanie podzielony na rozpoznawalne części za pomocą wyrażenia regularnego, a następnie przetworzony kawałek po kawałku.

Niektóre selektory, takie jak ID i TagName, używają natywnej implementacji przeglądarki, która jest szybsza. Podczas gdy inne, takie jak klasa i atrybuty, są programowane oddzielnie i dlatego są znacznie wolniejsze, wymagając zapętlenia wybranych elementów i sprawdzenia każdej klasy nazwisko.

Więc tak, aby odpowiedzieć na twoje pytanie:

$('tag.class') jest szybsza niż tylko $('.class"). Dlaczego? W pierwszym przypadku jQuery wykorzystuje natywną implementację przeglądarki, aby odfiltrować wybór do tylko potrzebnych elementów. Dopiero wtedy uruchamia wolniej .Implementacja klasy filtruje to, o co prosiłeś.

W drugim przypadku jQuery używa swojej metody do filtrowania każdego elementu za pomocą klasy grabbing.

To rozprzestrzenia się dalej niż jQuery jak wszystkie bazują na tym biblioteki javascript. Jedyną inną opcją jest użycie xPath, ale obecnie nie jest ona zbyt dobrze obsługiwana przez wszystkie przeglądarki.

Oto jak zwiększyć wydajność selektorów jQuery:

• Select by #id (performance test results ~250 faster)
• określ zakres swoich wyborów ($('.select', this))

Dodam uwagę, że w 99% aplikacji internetowych, nawet ciężkich aplikacji ajax, szybkość połączenia i odpowiedź serwera www będzie napędzać wydajność aplikacji, a nie javascript. Nie mówię, że powinieneś pisać celowo powolny kod lub że ogólnie świadomość tego, co może być szybsze niż inne, nie jest dobra.

Ale zastanawiam się, czy próbujesz rozwiązać problem, który tak naprawdę jeszcze nie istnieje, czy nawet jeśli optymalizujesz coś, co może zmienić w najbliższej przyszłości (powiedzmy, jeśli więcej osób zacznie korzystać z przeglądarki obsługującej funkcję getElementsByClassName(), o której mowa wcześniej), dzięki czemu zoptymalizowany kod będzie działał wolniej.

Kolejnym miejscem, w którym można szukać informacji o wydajności, jest strona Hugo Vidal Teixeira z analizą wydajności selektorów.

Http://www.componenthouse.com/article-19

Daje to dobry przebieg prędkości selektora według id, selektora według klasy i nazwy znacznika prefiksu selektora.

Najszybszy selektor po id to: $("#id")

Najszybszy selektor po klasie to: $('tag.class")

Więc prefiks po tagu pomógł tylko przy wyborze po klasie!

Byłem na niektórych listach dyskusyjnych jQuery i z tego, co tam czytałem, najprawdopodobniej filtrują według nazwy tagu, a następnie nazwy klasy (lub odwrotnie, jeśli była szybsza). Mają obsesję na punkcie szybkości i użyliby wszystkiego, aby uzyskać odrobinę wydajności.

Naprawdę nie martwiłbym się o to zbytnio, chyba że uruchamiasz selektor tysiące razy / SEK.

Jeśli jesteś naprawdę zaniepokojony, spróbuj zrobić jakiś benchmarking i zobaczyć, który jest szybszy.

Rozważ użycie biblioteki sekwencyjnej Olivera Steele ' a do wywoływania metod w czasie zamiast wszystkich naraz.

Http://osteele.com/sources/javascript/sequentially/

Metoda "ostatecznie" pomaga wywołać metodę po pewnym czasie od jej pierwszego wywołania. Metoda "sekwencyjnie" umożliwia kolejkowanie kilku zadań w określonym czasie.

Bardzo pomocny!

A świetna wskazówka z pytania, które zadałem: używaj standardowych selektorów CSS wszędzie tam, gdzie to możliwe. Pozwala to jQuery używać API selektorów . Zgodnie z testami przeprowadzonymi przez Johna Resiga , daje to prawie natywną wydajność dla selektorów. Należy unikać takich funkcji jak :has() i :contains().

Z moich badań wynika, że wsparcie dla API selektorów zostało wprowadzone z jQuery 1.2.7, Firefox 3.1, IE 8, Opera 10, Safari 3.1.

Jeśli się nie mylę, jQuery jest również silnikiem oddolnym. Oznacza to, że $('#foo bar div') jest dużo wolniejszy niż $('bar div #foo'). Na przykład, $('#foo a') przejrzy wszystkie elementy a na stronie i sprawdzi, czy mają przodka #foo, co sprawia, że Selektor jest niezwykle nieefektywny.

Resig może już zoptymalizowany pod ten scenariusz (nie zdziwiłbym się , gdyby to zrobił-wierzę, że zrobił w swoim silniku Sizzle, ale nie jestem w 100% pewien.)

Uważam, że wybranie najpierw ID jest zawsze szybsze:

$("#myform th").css("color","red");

Powinien być szybszy niż

$("th").css("color","red");

Zastanawiam się jednak, na ile chaining pomaga przy rozpoczynaniu od ID? Czy to

$("#myform").find("th").css("color","red")
.end().find("td").css("color","blue");

$("#myform th").css("color","red");
$("#myform td").css("color","blue");