Wydajność w JavaScript

Jak przyspieszyć swój kod JavaScript.

Redukuj aktywność w pętli

Pętla jest często używana w programowaniu.

Każda iteracja pętli, każda linia w pętli, w tym for Zdania, które będą wykonywane.

Zdania lub przypisanie, które można umieścić poza pętlą, przyspieszą działanie pętli.

Gorszy kod:

var i;
for (i = 0; i < arr.length; i++) {

Lepszy kod:

var i;
var l = arr.length;
for (i = 0; i < l; i++) {

Złe kod w każdym kroku pętli odwiedza tablicę length właściwości.

Dobry kod dostępu do pętli poza pętlą length właściwości, aby przyspieszyć pętlę.

Redukuj dostęp do DOM

W porównaniu do innego JavaScript, dostęp do HTML DOM jest bardzo powolny.

Jeśli oczekujesz, że będziesz odwiedzać pewien element DOM kilka razy, odwiedź go tylko raz i użyj go jako lokalnej zmiennej:

Przykład

var obj;
obj = document.getElementById("demo");
obj.innerHTML = "Hello";

Spróbuj sam

Zmniejsz rozmiar DOM

Staraj się utrzymać mniejszą liczbę elementów w HTML DOM.

To zawsze poprawia ładowanie strony i przyspiesza renderowanie (wyświetlanie strony), szczególnie na mniejszych urządzeniach.

Każdy raz, gdy próbujesz wyszukiwać DOM (np. getElementsByTagNameWszystko to przyniesie korzyści z mniejszego DOM.

Unikaj niepotrzebnych zmiennych

Nie twórz nowych zmiennych, które nie mają na celu przechowywania wartości.

Zwykle możesz zastąpić kod:

var fullName = firstName + " " + lastName;
document.getElementById("demo").innerHTML = fullName;

Użyj tego kodu:

document.getElementById("demo").innerHTML = firstName + " " + lastName

Opóźnij ładowanie JavaScript

Umieść skrypt na dole strony, aby przeglądarka najpierw załadowała stronę.

Podczas ściąganego skryptu przeglądarka nie rozpocznie żadnych innych ściągań. Ponadto wszystkie działania analizy i renderowania mogą być zablokowane.

Według specyfikacji HTTP przeglądarka nie powinna równocześnie ściągać więcej niż dwóch elementów.

Jednym z opcji jest użycie defer="true"Atrybut defer określa, że skrypt powinien być wykonany po zakończeniu analizy strony, ale jest on dostępny tylko dla skryptów zewnętrznych.

Jeśli to możliwe, możesz dodać skrypt do strony za pomocą kodu po tym, jak strona zostanie załadowana:

Przykład

<script>
window.onload = downScripts;
function downScripts() {
    var element = document.createElement("script");
    element.src = "myScript.js";
    document.body.appendChild(element);
}
</script>

Unikaj użycia with

Unikaj użycia with kluczowe słowo. Ma to negatywny wpływ na szybkość. Również może wprowadzać zamieszanie w zakresie zakresu JavaScript.

w trybie rygorystycznymNie dozwolone kluczowe słowo with.