10 porad i sztuczek JavaScript, aby zoptymalizować wydajność

JavaScript jest niezbędny do tworzenia stron internetowych. Język stoi za większością interaktywności i animacji, które zobaczysz na stronach internetowych. Ale JavaScript może również powodować spowolnienie witryny, jeśli kod jest źle napisany. Nieefektywność może skutkować zarówno słabymi czasami ładowania, jak i niską szybkością renderowania.

Zastosuj następujące praktyki, aby poprawić szybkość i wydajność swojej witryny.

1. Zdefiniuj zmienne lokalnie

Jako programista musisz wiedzieć jak działa scoping. W JavaScript istnieją dwa rodzaje zmiennych: zmienne lokalne i zmienne globalne.

Zmienne lokalne to zmienne zadeklarowane w bloku funkcyjnym. Zakres pozostaje tylko w funkcji, w której zostały zadeklarowane. Zmienne globalne to zmienne dostępne w całym skrypcie. W przypadku zmiennych globalnych zakres pozostaje w całym programie.

Za każdym razem, gdy próbujesz uzyskać dostęp do zmiennej, przeglądarka wykonuje coś, co nazywa się wyszukiwaniem zakresu. Sprawdza najbliższy zakres dla zmiennej i szuka dalej, aż znajdzie zmienną. Zatem im więcej łańcucha zasięgu masz w swoim programie, tym dłużej zajmie dostęp do zmiennych poza bieżącym zakresem.

Z tego powodu najlepiej jest zawsze definiować zmienne bliżej kontekstu wykonania. Używaj zmiennych globalnych tylko w rzadkich przypadkach; gdy chcesz na przykład przechowywać dane używane w całym skrypcie. Zmniejszy to liczbę zakresów w programie, poprawiając w ten sposób wydajność.

2. Ładuj JavaScript asynchronicznie

JavaScript to jednowątkowy język programowania. Oznacza to, że po wykonaniu funkcji musi działać do końca, zanim inna funkcja będzie mogła zostać uruchomiona. Taka architektura może prowadzić do sytuacji, w których kod może zablokować wątek i zawiesić aplikację.

Aby wątek działał dobrze, niektóre czasochłonne zadania należy uruchamiać asynchronicznie. Kiedy zadanie działa asynchronicznie, nie zużywa całej mocy obliczeniowej wątku. Zamiast tego funkcja dołącza do kolejki zdarzeń, w której jest uruchamiana po wykonaniu wszystkich innych kodów.

Wywołania API są idealne dla wzorca asynchronicznego, ponieważ ich rozwiązanie wymaga czasu. Więc zamiast wstrzymywać wątek, użyjesz biblioteki opartej na obietnicach, takiej jak interfejs API pobierania, aby pobrać dane asynchronicznie. W ten sposób inny kod może działać, gdy przeglądarka pobiera dane z interfejsu API.

Zrozum zawiłości programowania asynchronicznego, a poprawisz wydajność swojej aplikacji.

3. Unikaj niepotrzebnych pętli

Używanie pętli w JavaScript może być drogie, jeśli nie będziesz ostrożny. Przeglądanie kolekcji elementów może bardzo obciążać przeglądarkę.

Chociaż zdecydowanie nie da się uniknąć pętli w kodzie, trzeba włożyć w nie jak najmniej pracy. Możesz użyć innych technik, które pozwolą uniknąć konieczności przeglądania kolekcji w pętli.

Na przykład długość tablicy można zapisać w innej zmiennej, zamiast odczytywać ją podczas każdej iteracji pętli. Jeśli uzyskasz to, czego chcesz z pętli, natychmiast ją wyrwij.

4. Zminimalizuj kod JavaScript

Minifikacja to skuteczna metoda optymalizacji kodu JavaScript. Minimalizator przekształca surowy kod źródłowy w mniejszy plik produkcyjny. Usuwają komentarze, przycinają zbędną składnię i skracają długie nazwy zmiennych. Usuwają również nieużywany kod i optymalizują istniejące funkcje, aby zajmowały mniej linii.

Przykładami minimalizatorów są Google Closure Compiler, UglifyJS i Microsoft AJAX miniifier. Możesz także ręcznie zminimalizować swój kod, sprawdzając go i szukając sposobów na jego optymalizację. Na przykład możesz uprościć instrukcje if w swoim kodzie.

5. Kompresuj duże pliki za pomocą Gzip

Większość klientów użyj Gzip do kompresji i dekompresji duże pliki JavaScript. Gdy przeglądarka żąda zasobu, serwer może go skompresować, aby w odpowiedzi zwrócić mniejszy plik. Gdy klient otrzyma plik, dekompresuje go. Ogólnie rzecz biorąc, takie podejście oszczędza przepustowość i zmniejsza opóźnienia, poprawiając wydajność aplikacji.

6. Zminimalizuj dostęp do DOM

Dostęp do DOM może mieć wpływ na wydajność Twojej aplikacji, ponieważ przeglądarka musi odświeżać się przy każdej aktualizacji DOM. Najlepiej ograniczyć dostęp DOM do jak najmniejszej częstotliwości. Jednym ze sposobów na to jest przechowywanie odniesień do obiektów przeglądarki.

Możesz także użyć biblioteki takiej jak React, która wprowadza zmiany w wirtualnym DOM przed przekazaniem ich do prawdziwego DOM. W rezultacie przeglądarka aktualizuje te części aplikacji, które wymagają aktualizacji, zamiast odświeżać całą stronę.

7. Odłóż niepotrzebne ładowanie JavaScript

Chociaż ważne jest, aby strona ładowała się na czas, nie wszystkie funkcje muszą działać przy początkowym ładowaniu. Załóżmy, że masz klikalny przycisk i menu kart, które odwołują się do kodu JavaScript; możesz odłożyć oba do momentu załadowania strony.

Ta metoda uwalnia moc obliczeniową, umożliwiając terminowe renderowanie niezbędnych elementów strony. Opóźniasz kompilację kodu, który może wstrzymać początkowe wyświetlenie strony. Następnie, po zakończeniu ładowania strony, możesz rozpocząć ładowanie funkcjonalności. W ten sposób użytkownik może cieszyć się szybkim ładowaniem i rozpocząć interakcję z elementami na czas.

Możesz również umieścić najmniejszą ilość CSS i JavaScript w swoim elemencie head, aby ładował się natychmiast. Kod pomocniczy może wtedy znajdować się w osobnych plikach .css i .js. Technika ta wymaga porządnej znajomości j jak działa DOM.

8. Użyj CDN, aby załadować JavaScript

Korzystanie z sieci dostarczania treści pomaga przyspieszyć ładowanie strony, ale nie zawsze jest skuteczne. Na przykład, jeśli wybierzesz CDN bez lokalnego serwera w kraju odwiedzającego, nie odniesie on korzyści.

Aby rozwiązać ten problem, możesz użyć narzędzi do porównania kilku sieci CDN i zdecydować, która zapewnia najlepszą wydajność w danym przypadku użycia. Aby dowiedzieć się, który CDN jest najlepszy dla Twojej biblioteki, sprawdź cdnjs strona internetowa.

9. Usuń wycieki pamięci

Wycieki pamięci mogą negatywnie wpłynąć na wydajność aplikacji. Wycieki pojawiają się, gdy ładowana strona zajmuje coraz więcej pamięci.

Przykładem wycieku pamięci jest sytuacja, w której Twoja przeglądarka zaczyna zwalniać po długiej sesji pracy z aplikacją.

Za pomocą Narzędzi dla programistów Chrome możesz wykrywać wycieki pamięci w swojej aplikacji. Narzędzie zapisuje oś czasu na karcie wydajności. Wiele wycieków pamięci występuje w wyniku usuwania elementów DOM. Moduł wyrzucania elementów bezużytecznych zwolni pamięć dopiero wtedy, gdy wszystkie zmienne odnoszące się do tych elementów znajdą się poza zakresem.

Narzędzia takie jak Lighthouse, Google PageSpeed ​​Insights i Chrome mogą pomóc w wykrywaniu problemów. Lighthouse sprawdza dostępność, wydajność i problemy z SEO. Google PageSpeed ​​może pomóc w optymalizacji języka JavaScript w celu zwiększenia wydajności aplikacji.

Przeglądarka Chrome udostępnia funkcję Narzędzi dla programistów, którą można przełączać, klikając klawisz F12 na słowie kluczowym. Możesz użyć jego analizy wydajności do włączania i wyłączania sieci oraz sprawdzania zużycia procesora. Sprawdza również inne wskaźniki, aby wykryć problemy wpływające na Twoją witrynę.

Jako programista stron internetowych będziesz dużo pracować w przeglądarce internetowej. Większość przeglądarek jest dostarczana z zestawem narzędzi dla programistów, które pomagają w rozwiązywaniu problemów z witryną. Funkcja Narzędzi dla programistów Google Chrome ma wiele funkcji, które mogą Ci pomóc.