Jak przyspieszyć wykonanie kodu JavaScript

Opracowując aplikację lub stronę internetową, jednym z najważniejszych elementów do rozważenia jest wydajność aplikacji lub strony internetowej. Jako użytkownik nie chciałbym, aby żadna aplikacja zajęła dużo czasu lub za każdym razem, gdy coś klikam i muszę poczekać na jakąś akcję. Często, jeśli strona internetowa zajmuje 5-6 sekund, aby załadować większość użytkowników, w tym ja.

Dla twórców stron internetowych JavaScript jest fantastycznym narzędziem. Każdy programista internetowy nauczył się JavaScript w pewnym momencie ich życia. Jednak słaby kod JavaScript skutkuje wolniejszymi stronami internetowymi.

Mając to na uwadze, programista zawsze patrzy na sposoby poprawy swojej strony internetowej. Masz szczęście, ponieważ dzisiaj porozmawiamy o tym, jak przyspieszyć wykonanie kodu JavaScript.

Zmniejszenie aktywności pętli

Programista często używa pętli do skrócenia kodu. Należy jednak pamiętać, że istnieje kilka złych sposobów korzystania z pętli, które sprawiają, że Twój program jest powolny.

Weźmy przykład pętli „for”.

Przykład:

Ta pętla ma rację, ale jej wydajność będzie zła. Możemy umieścić MyArray.Instrukcja długości poza pętlą, aby nie musiała ona obliczać długości wielokrotnie, dopóki pętla się nie skończy.

Rozwiązanie:

Niech len = myarray.długość;
dla (niech i = 0; i < len; i++)
//Cześć

W tej pętli widzimy, że długość jest ustalona, ​​a pętla nie musi obliczać długości tablicy za każdym razem. Stąd prędkość wzrasta, podobnie jak wydajność.

Redukcja dostępu DOM

Jeśli porównamy instrukcję JavaScript w celu uzyskania dostępu do HTML DOM, przekonamy się, że dostęp do HTML DOM jest bardzo wolny. To nie jest problem, jeśli nie uzyskujemy dostępu do wielu operacji DOM. Jednak podczas wykonywania wielu operacji DOM wpływa to na szybkość strony internetowej.

Rozwiązaniem jest przechowywanie elementu DOM w zmiennej lokalnej, a następnie możemy uzyskać dostęp do wielu razy.

Na przykład:

const myObj = Document.getElementById („prędkość”), innerhtml = „nie osiągnięte”;
const myObj = Document.getElementById („prędkość”).hidden = „false”;
// powolne i utrudnia prędkość

To sprawia, że ​​nasz program wykonuje nieefektywnie.

Spójrzmy na kolejny przykład, który rozwiązuje ten problem.

const myObj = Document.getElementById („prędkość”);
Myobj.innerhtml = "osiągnięte";
Myobj.hidden = „false”;

Teraz, gdy spojrzeliśmy na redukcję dostępu DOM, pozwól nam rzucić światło na redukcję wielkości DOM, aby poprawić szybkość naszej strony internetowej na JavaScript.

Redukcja wielkości DOM

Przed przejściem do redukcji wielkości DOM spójrzmy na nadmierny rozmiar DOM, co oznacza, że ​​Twoja strona ma zbyt wiele węzłów DOM/HTML, jeśli rozmiar DOM jest zbyt duży. Może to również oznaczać, że elementy twoich stron są głęboko zagnieżdżone. Powoduje to zużycie większej mocy, a tym samym zmniejszenie wydajności lub prędkości strony.

Rozwiązaniem jest to, że liczba elementów należy zminimalizować w html DOM. Zaletą tego jest to, że poprawia ładowanie strony, a także przyspieszy proces renderowania, który jest wyświetlaniem strony. Jest bardzo przydatny, szczególnie na mniejszych urządzeniach, takich jak telefony komórkowe itp.

Eliminowanie niepotrzebnych zmiennych

To najprostsza sztuczka, aby poprawić wydajność strony internetowej. Po co tworzyć zmienne, skoro nie są potrzebne? Po co tworzyć zmienne tam, gdzie wiesz, że używasz go po prostu do wyświetlania go gdzieś? Kiedy unikamy tworzenia niepotrzebnych zmiennych.

Na przykład zły kod:

LET FISTNAME = "JHON";
niech lastName = "cena";
Let FullName = FirstName+""+LastName;
alert (pełna nazwa);

W tym przykładzie widzimy, że przechowujemy pierwszą nazwę i nazwę LastName, aby wyświetlić go w pogotowiu. Czy nie lepiej byłoby bezpośrednio ostrzec pierwszą nazwę i nazwę LastName? To właśnie wyeliminowanie niepotrzebnych zmiennych jest.

Rozwiązanie (dobry kod):

LET FISTNAME = "JHON";
niech lastName = "cena";
alert (FirstName+""+LastName);

Opóźnienie załadunku JavaScript

Aby poprawić wydajność strony w JavaScript, powszechną praktyką jest umieszczenie znacznika skryptu lub w tagu skryptu kod JavaScript na końcu strony HTML. Głównym celem jest, aby przeglądarka najpierw załadować HTML, a następnie kod JavaScript. Aby umieścić go w kategoriach technicznych, podczas gdy scenariusz pobiera, przeglądarka nie będzie inicjować żadnych innych pobrań, a wszystkie analizowanie i renderowanie zostanie zablokowane.

Możemy również użyć „defer =” true ”w naszym znaczniku skryptu. Funkcja atrybutu Defer jest taka, że ​​określa, że ​​skrypt powinien być wykonywany tylko po zakończeniu parsowania strony. Innymi słowy, czeka na załadowanie całego DOM. Należy jednak zauważyć, że jest to kompatybilne tylko z zewnętrznymi skryptami.

Przykład:

Unikaj używania słowa kluczowego „z”

Ze słowem kluczowym służy do odwołania się do właściwości lub metod obiektu, ponieważ jest to rodzaj stenografii. Użycie słowa kluczowego „z” spowalnia prędkość. Innym powodem, dla którego nie używa słowa kluczowego, jest to, że unosi się ono po rozszczepieniu JavaScript.

Minify JavaScriptCode

Minifowanie lub minimalizacja kodu JavaScript to kolejna metoda przyspieszenia wykonywania naszego kodu JavaScript. Minifowanie kodu JavaScript oznacza po prostu usunięcie lub zmianę wszystkich niechcianych i niepotrzebnych znaków w kodzie źródłowym JavaScript, ale bez zmiany funkcjonalności programu. Zawiera wiele rzeczy, takich jak usunięcie komentarzy, półkolisów, a także białych. Oprócz tego wymaga również użycia krótkiej funkcji i nazw zmiennych. Zobaczmy przykład przed i po minifikacji naszego kodu:

Przed minimalizacją:

//funkcja
// Który dziennik konsoli
// Pierwsza wiadomość od osoby
Funkcja FirstMessage (name)
konsola.log („Pierwsza wiadomość pochodzi z:”, nazwa);

// teraz wywołać funkcję
FirstMessage („John”);

Po minifikacji:

funkcja fmsg (n) konsola.log („Pierwsza wiadomość pochodzi z:”, n) FirstMessage („John”);

Wniosek

Deweloper zawsze utrzymuje równowagę między niezawodnością a optymalizacją kodu. Z tego powodu omówiliśmy, jak przyspieszyć wykonanie kodu JavaScript w tym artykule. Wszystkie wskazówki i wskazówki wymienione powyżej, gdy używane razem będą miały znaczną poprawę prędkości kodu JavaScript. Należy jednak pamiętać, że chociaż wydajność jest konieczna, nie jest powyżej wykrywania błędów lub dodawania funkcji.