Biblioteka jQuery to chyba jedno z najważniejszych elementów świata JavaScript (przynajmniej tego webowego). Myślę, że zna ją praktycznie każdy kto spędził choć trochę czasu nad wyglądem jakiejkolwiek strony internetowej. Nic dziwnego - to narzędzie, które w znaczący sposób ułatwia pracę z drzewem elementów DOM. Myślę więc, że warto sprawdzić jak wydajniej używać jQuery - spróbujemy tego dzisiaj dokonać…

#1 Używaj ID

Jednym z najprostszych porad jakie można znaleźć na stronach jQuery jest ta zalecająca używanie (w miarę możliwości) selektorów przeszukujących drzewo DOM za pomocą ID elementu:

$('#test').css('color', 'red');

Powód tego jest prosty - jeśli używamy ID elementu, jQuery pod spodem zamiast stosować silnik selektorów Sizzle wykorzystuje po prostu wbudowaną funkcję getElementById() - oczywistym jest, że taka funkcja jest szybsza.

#2 Optymalizacja “od prawej do lewej”

Twórcy biblioteki jQuery zalecają nam optymalizować nasze selektory zgodnie z zasadą “od prawej do lewej” co sprowadza się do tego, że pisząc selektor powinniśmy po jego prawej stronie umieszczać jak najbardziej specyficzną definicję elementu:

$('#test p.text').css('color', 'red');

Jest to spowodowane sposobem w jaki działa silnik Sizzle. Analizuje on bowiem najpierw to co znajduje się po prawej stronie selektora, a dopiero później ogranicza wyniki za pomocą tego co znajduje się po lewej stronie, warto więc mu w opisany sposób ułatwić życie…

#3 Używaj konkretnych nazw tagów

Jeśli jesteśmy koniecznie zmuszeni szukać elementów po nazwie klasy to oto wyjaśnienie dlaczego tak jest lepiej:

$('p.text').css('color', 'red');

niż tak:

$('.text').css('color', 'red');

Otóż jQuery, znając nazwę tagu HTML skorzysta najpierw z wbudowanej funkcji getElementsByTagName() (co oczywiście jest szybsze), a dopiero później zaprzęgnie do działania Sizzle aby ograniczyć wyniki do podanej nazwy klasy.

#4 Wykorzystuj selektory z kontekstem

Aby przyspieszyć wyszukiwanie elementów HTML za pomocą selektorów jQuery możemy użyć kontekstu (oczywiście jeśli jest on nam znany) - bardzo często w ogóle zapomina się, że istnieje taka opcja:

$('p.text', '#test').css('color', 'red');

Jak widać jako drugi parametr funkcji $() podajemy drugi selektor i to on jest kontekstem dla pierwszego selektora. Oczywiście jest to szczególnie szybkie jeśli kontekstem jest selektor z użyciem ID elementu (patrz porada #1).

Zamiast kontekstu można też skorzystać z funkcji find() - podobno jest to jeszcze szybsze niż kontekst:

$('#test').find('p.text').css('color', 'red');

#5 Zawsze przypisuj selektor do zmiennej

A przynajmniej zawsze wtedy, kiedy używasz go więcej niż raz:

var text = $('#test').find('p.text');

text.css('color', 'red');
text.click(function(){ alert('dupa'); });

W ten sposób zabezpieczysz się przed niepotrzebnym, kilkukrotnym przeszukiwaniem drzewa DOM tylko po to by znajdować wciąż ten sam element…

#6 Wykorzystuj “chaining”

Porada bezpośrednio związana z poprzednią - jQuery pozwala wywoływać funkcje manipulujące elementami łańcuchowo:

$('#test')
    .find('p.text')
    .css('color', 'red')
    .click(function(){ alert('dupa'); });

W ten sposób również zabezpieczamy się przed wielokrotnym wyszukiwaniem tego samego elementu. Porady #5 i #6 powinny być używane zamiennie w zależności, która w danym momencie bardziej nam pasuje do rozwiązywanego problemu.

No więc jak wydajniej używać jQuery?

jQuery to biblioteka o wielkich możliwościach, która zrewolucjonizowała sposób pracy z elementami DOM. Warto jednak używać jej mądrze, tak aby pisany przez nas kod był wydajny. Mam nadzieję, że moje porady jak wydajniej używać jQuery okażą się dla Was pomocne. Jeśli chcecie podzielić się innymi poradami dotyczącymi wydajności jQuery - zapraszam do komentowania pod wpisem!