Sześć najlepszych praktyk jQuery dla poprawy wydajności

jQuery jest jednym z najpopularniejsze biblioteki JavaScript dzisiaj. Jego API jest bardzo łatwe w użyciu, co prowadzi do nie tak stromej krzywej uczenia się. Wiele projektów używa kodu jQuery zamiast bezpośrednio korzystać z waniliowego JavaScript, aby wprowadzić dynamiczne funkcje.

Ale jQuery ma również swoje wady. Może to prowadzić do pewnych problemów z wydajnością, jeśli będą używane niedbale tak jak język, na którym jest oparty. Ten post wyświetli niektóre z najlepszych praktyk w używaniu jQuery, które pomogą nam uniknąć problemów z wydajnością.

1. Leniwe skrypty ładowania w razie potrzeby

Przeglądarki uruchamiają JavaScript przed utworzeniem drzewa DOM i malowaniem pikseli na ekranie, ponieważ skrypty mogą dodawać nowe elementy do strony lub zmieniać układ lub styl niektórych węzłów DOM. Więc przez dając przeglądarce mniej skryptów do wykonania podczas ładowania strony, możemy skrócić czas potrzebny dla ostatecznego stworzenia drzewa DOM i malowania, po którym użytkownik będzie widzieć stronę.

Jednym ze sposobów na zrobienie tego w jQuery jest użycie $ .getScript załadować dowolny plik skryptu w momencie jego potrzeby, a nie podczas ładowania strony.

$ .getScript ("scripts / gallery.js", callback); 

Jest to funkcja ajax, która otrzyma pojedynczy plik skryptu, gdy tego chcesz, ale pamiętaj, że pobrany plik nie jest buforowany. Aby włączyć buforowanie dla getScript musisz włączyć to samo dla wszystkich żądań ajax. Możesz to zrobić za pomocą poniższego kodu:

$ .ajaxSetup (cache: true); 

2. Unikaj $ (okno) .load () jeśli twój skrypt nie potrzebuje żadnych zasobów podrzędnych strony

The $ (dokument) .ready () jest równa DOMContentLoaded (gdzie DOMContentLoaded jest dostępny) i $ (okno) .load () do Obciążenie. Pierwszy z nich jest uruchamiany, gdy ładowany jest własny DOM, ale nie zewnętrzne zasoby, takie jak obrazy i arkusze stylów. Drugi jest uruchamiany, gdy załadowana jest cała strona, w tym jej własna zawartość i jej zasoby.

Więc jeśli piszesz skrypt, który opiera się na zasobach strony, np. Zmienia kolor tła a div stylizowany przez zewnętrzny arkusz stylów, najlepiej go używać $ (okno) .load ().

Ale jeśli tak nie jest, lepiej się trzymać $ (dokument) .ready () ponieważ, jQuery nazywa to gotowy obsługa zdarzeń niezależnie od tego, czy używasz $ (dokument) .ready () czy nie, więc używaj go, kiedy tylko możesz.

3. Użyj odłączyć aby usunąć elementy z DOM, które trzeba było zmienić.

“Przepływ” jest terminem, który odnosi się do zmian układu na stronie internetowej, kiedy przeglądarka zmienia układ elementów strony, aby pomieścić nowy element, dostosuj się do zmian strukturalnych elementu, wypełnij lukę pozostawioną przez usunięty element lub inną akcję, która wymaga zmiana układu na stronie. reflow jest kosztowny proces przeglądarki.

Możemy zmniejszyć nie. reflowów spowodowanych zmianami strukturalnymi elementu poprzez wykonanie na nim zmian po usunięcie go z przepływu strony i odkładając to, kiedy to zrobisz. Jeśli dodajesz wiele wierszy do tabeli jeden po drugim, spowoduje to wiele przepływów. Więc lepiej jest wyjmij tabelę z drzewa DOM, dodaj do niej wiersze i umieść z powrotem w DOM; zmniejszy to przepływy.

jQuery's odłączyć() pozwala nam usunąć element ze strony, różni się od usunąć() ponieważ zapisze dane skojarzone z elementem, gdy trzeba go później dodać do strony. Odłączony element można następnie ponownie umieścić na stronie, gdy został zmodyfikowany.

4. Użyj css () aby ustawić wysokość lub szerokość zamiast wysokość() i szerokość()

Jeśli ustawiasz wysokość lub szerokość elementu w jQuery, sugeruję użycie css () funkcja, ponieważ ustawienie tych wartości za pomocą wysokość() i szerokość() spowoduje dodatkowe ponowne przepływy z powodu dostępu do niektórych właściwości układu w funkcji computeStyleTests w jQuery (testowane w najnowszej wersji).

Dla kodu p.height („300px”); oto reflows.

Dla p.css ("height": "300px");

computeStyleTests jest używany do wykonywania niektórych testów wsparcia. Nazywa się to także while dostawanie wysokość i szerokość za pomocą obie css () i wysokość szerokość() , ale dla oprawa jest to tylko wymagane wysokość szerokość() które mogą nie być potrzebne, więc użyj css () zamiast.

5. Nie należy niepotrzebnie uzyskiwać dostępu do właściwości układu

Dostęp do właściwości układu, takich jak wysokość, szerokość, margines itp. Spowoduje wyzwolenie przepływu na stronie. Dzieje się tak zawsze, gdy pytasz przeglądarkę o dowolne właściwości layoutu upewnia się, że otrzymujesz zaktualizowaną wartość (jeśli wartość została wcześniej unieważniona) przez przeliczając wartości i stosując dowolne zmiany układu.

Niezależnie od tego, czy używasz jQuery, czy waniliowego JavaScript, uważaj na niepotrzebne uzyskiwanie dostępu do właściwości układu szczególnie w pętli lub w konsekwencji po zmianie stylu.

6. Korzystaj z buforowania, gdzie możesz

Niektóre funkcje jQuery mają mechanizmy buforowania, które można dobrze wykorzystać. Żądania Ajax buforują zasoby, ale nie są dostępne dla scenariusz i jsonp, więc jeśli chcesz buforować wszystkie żądania ajax, możesz ustaw globalnie jak poniżej.

Zauważ również, że jeśli pobierasz zasoby za pomocą słupek nie będzie buforowany nawet po włączeniu buforowania w powyższej konfiguracji.

Jak wspomniałem wcześniej, odłączyć() buforuje dane powiązane z usuwanym elementem w przeciwieństwie do tego usunąć();ukryć() buforuje początkowy CSS pokaz wartość elementu przed ukryciem go, aby można go było później przywrócić bez utraty danych.

Wniosek

W jeden sposób możesz mieć pewność, że używasz najbardziej efektywnego kodu jQuery, ponieważ potrzebujesz czekać, aż faktycznie uruchomisz swój kod i zauważysz, że jest jakiś problem z wydajnością. Jeśli jest, użyj narzędzi wydajności i debugera wykryć źródło problemu.

Ponieważ jQuery jest jak kokon dla JavaScript z dodatkowymi funkcjami kompatybilności i funkcji przeglądarki, zdiagnozowanie problemów bez tych narzędzi może być trudne.