JavaScript- Leistung
So beschleunigen Sie Ihren JavaScript-Code.
Reduzieren Sie die Aktivität in Schleifen
Schleifen werden häufig in der Programmierung verwendet.
Jede Anweisung in einer Schleife, einschließlich der for-Anweisung, wird für jede Iteration der Schleife ausgeführt.
Anweisungen oder Zuweisungen, die außerhalb der Schleife platziert werden können, beschleunigen die Ausführung der Schleife.
Schlecht:
for (let i = 0; i < arr.length; i++) {
Besserer Code:
let l = arr.length;
for (let i = 0; i < l; i++) {
Der fehlerhafte Code greift bei jedem Schleifendurchlauf auf die length-Eigenschaft eines Arrays zu.
Der bessere Code greift auf die length-Eigenschaft außerhalb der Schleife zu und lässt die Schleife schneller laufen.
Reduzieren Sie den DOM-Zugriff
Der Zugriff auf das HTML-DOM ist im Vergleich zu anderen JavaScript-Anweisungen sehr langsam.
Wenn Sie erwarten, mehrmals auf ein DOM-Element zuzugreifen, greifen Sie einmal darauf zu und verwenden Sie es als lokale Variable:
Beispiel
const obj = document.getElementById("demo");
obj.innerHTML = "Hello";
Reduzieren Sie die DOM-Größe
Halten Sie die Anzahl der Elemente im HTML-DOM klein.
Dadurch wird das Laden von Seiten immer verbessert und das Rendern (Seitenanzeige) beschleunigt, insbesondere auf kleineren Geräten.
Jeder Versuch, das DOM zu durchsuchen (wie getElementsByTagName), profitiert von einem kleineren DOM.
Vermeiden Sie unnötige Variablen
Erstellen Sie keine neuen Variablen, wenn Sie nicht vorhaben, Werte zu speichern.
Oft können Sie Code wie folgt ersetzen:
let fullName = firstName + " " + lastName;
document.getElementById("demo").innerHTML = fullName;
Mit diesem:
document.getElementById("demo").innerHTML = firstName + " " + lastName;
JavaScript-Laden verzögern
Wenn Sie Ihre Skripts am Ende des Seitentexts platzieren, lädt der Browser die Seite zuerst.
Während ein Skript heruntergeladen wird, startet der Browser keine anderen Downloads. Darüber hinaus können alle Parsing- und Rendering-Aktivitäten blockiert werden.
Die HTTP-Spezifikation definiert, dass Browser nicht mehr als zwei Komponenten parallel herunterladen sollten.
Eine Alternative ist die Verwendung defer="true"im script-Tag. Das Attribut defer gibt an, dass das Skript ausgeführt werden soll, nachdem die Seite das Parsen beendet hat, aber es funktioniert nur für externe Skripte.
Wenn möglich, können Sie Ihr Skript per Code zur Seite hinzufügen, nachdem die Seite geladen wurde:
Beispiel
<script>
window.onload = function() {
const element = document.createElement("script");
element.src = "myScript.js";
document.body.appendChild(element);
};
</script>
Vermeiden Sie die Verwendung mit
Vermeiden Sie die Verwendung des withSchlüsselworts. Es wirkt sich negativ auf die Geschwindigkeit aus. Es verstopft auch JavaScript-Bereiche.
Das withSchlüsselwort ist im strikten Modus nicht zulässig .