Wypróbuj

Nozbe - get things done

i zwiększ swoją produktywność

6 porad jak wydajniej używać jQuery

8

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!

CHCESZ DARMOWEGO E-BOOKA?

Jeśli chcesz otrzymać mojego e-booka: Rozmowa Kwalifikacyjna - pytania z podstaw JavaScript zostaw mi swój e-mail:

Oprócz tego co poniedziałek dostaniesz maila z listą moich wpisów z poprzedniego tygodnia!

  • Krótko i na temat, takie tutki lubię! 🙂

  • No i najważniejsze to nie używać jQuery tam, gdzie niepotrzebne 😛
    http://youmightnotneedjquery.com/

  • JS

    Fajny art, konkrety. No i nieśmiertelny alert(‚dupa’); // 🙂

  • Mnie zawsze zastanawiało czy lepiej jest używać jQuery przez CDN jak te od Google czy hostować na własnym serwerze?

    • Bartłomiej Dybowski

      Raczej zaleca się używać CDN plus dodatkowy „fallback” w razie czego – poprawia to wydajność (mniej requestów, poza tym jest duże prawdopodobieństwo, że przeglądarka już była na jakiejś stronie używającej CDN więc ma ten plik w cache)…

    • Mniej, chyba więcej? Jeśli mam serwer na HTTP2, a mam 🙂 to chyba lepiej jak po 1 łączu leci wszystko? A jeśli CDN to jeszcze jest ten oficjalny od jQuery 😛 sporo do wyboru 😉

      • Bartłomiej Dybowski

        „mniej” w sensie mniej requestów do naszego serwera – przeglądarki blokują równoczesne pobieranie wielu plików z tej samej domeny więc wydajniej jest mieć to zróżnicowane… z CDN możesz też linkować zawsze najnowszą wersję danej biblioteki, to też może być przydatne 😉

  • PM

    Tyle mamy wydajnych bibliotek do manipulacji DOMa, obsługi eventów, xhr … a jQ nadal rulez.