Wydajność JavaScript
Jak przyspieszyć kod JavaScript.
Zmniejsz aktywność w pętlach
Pętle są często używane w programowaniu.
Każda instrukcja w pętli, w tym instrukcja for, jest wykonywana dla każdej iteracji pętli.
Instrukcje lub przypisania, które można umieścić poza pętlą, przyspieszą działanie pętli.
Zły:
for (let i = 0; i < arr.length; i++) {
Lepszy kod:
let l = arr.length;
for (let i = 0; i < l; i++) {
Zły kod uzyskuje dostęp do właściwości length tablicy za każdym razem, gdy pętla jest iterowana.
Lepszy kod uzyskuje dostęp do właściwości length poza pętlą i przyspiesza jej działanie.
Zmniejsz dostęp DOM
Dostęp do HTML DOM jest bardzo powolny w porównaniu do innych instrukcji JavaScript.
Jeśli spodziewasz się uzyskać dostęp do elementu DOM kilka razy, uzyskaj do niego dostęp raz i użyj go jako zmiennej lokalnej:
Przykład
const obj = document.getElementById("demo");
obj.innerHTML = "Hello";
Zmniejsz rozmiar DOM
Utrzymuj małą liczbę elementów w HTML DOM.
To zawsze poprawi ładowanie strony i przyspieszy renderowanie (wyświetlanie strony), zwłaszcza na mniejszych urządzeniach.
Każda próba przeszukania DOM (np. getElementsByTagName) skorzysta z mniejszego DOM.
Unikaj niepotrzebnych zmiennych
Nie twórz nowych zmiennych, jeśli nie planujesz zapisywać wartości.
Często możesz zastąpić kod w ten sposób:
let fullName = firstName + " " + lastName;
document.getElementById("demo").innerHTML = fullName;
Z tym:
document.getElementById("demo").innerHTML = firstName + " " + lastName;
Opóźnij ładowanie JavaScript
Umieszczenie skryptów na dole treści strony pozwala przeglądarce najpierw załadować stronę.
Podczas pobierania skryptu przeglądarka nie rozpocznie żadnych innych operacji pobierania. Ponadto wszystkie czynności związane z analizowaniem i renderowaniem mogą być zablokowane.
Specyfikacja HTTP określa, że przeglądarki nie powinny pobierać jednocześnie więcej niż dwóch komponentów.
Alternatywą jest użycie defer="true"w tagu skryptu. Atrybut defer określa, że skrypt powinien zostać wykonany po zakończeniu analizowania strony, ale działa tylko w przypadku skryptów zewnętrznych.
Jeśli to możliwe, możesz dodać swój skrypt do strony za pomocą kodu, po załadowaniu strony:
Przykład
<script>
window.onload = function() {
const element = document.createElement("script");
element.src = "myScript.js";
document.body.appendChild(element);
};
</script>
Unikaj używania z
Unikaj używania withsłowa kluczowego. Ma negatywny wpływ na szybkość. Zaśmieca także zakresy JavaScript.
Słowo withkluczowe nie jest dozwolone w trybie ścisłym.