So beschleunigen Sie Ihren JavaScript-Code.
Schleifen werden häufig in der Programmierung verwendet.
Jede Anweisung in einer Schleife, einschließlich der for-Anweisung, wird für jede Iteration von ausgeführt Schleife.
Anweisungen oder Zuweisungen, die außerhalb der Schleife platziert werden können, führen dazu Schleife läuft schneller.
for (let i = 0; i < arr.length; i++) {
let l = arr.length;
for (let i = 0; i < l; i++) {
Der fehlerhafte Code greift bei jeder Schleife auf die Längeneigenschaft eines Arrays zu iteriert.
Der bessere Code greift außerhalb der Schleife auf die Längeneigenschaft zu und erstellt die Schleife läuft schneller.
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 es als lokale Variable:
const obj = document.getElementById("demo");
obj.innerHTML = "Hello";
Probieren Sie es selbst aus →
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Performance</h2>
<p>If you expect to access a DOM element several times, access it once, and the use it as a local variable:</p>
<p id="demo"></p>
<script>
const obj = document.getElementById("demo");
obj.innerHTML = " Hello";
</script>
</body>
</html>
Halten Sie die Anzahl der Elemente im HTML-DOM gering.
Das wird immer so sein Verbessern Sie das Laden von Seiten und beschleunigen Sie das Rendern (Seitenanzeige), insbesondere auf kleineren Geräten.
Jeder Versuch, das DOM zu durchsuchen (wie getElementsByTagName), wird davon profitieren aus einem kleineren DOM.
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;
Wenn Sie Ihre Skripte unten im Seitentext platzieren, kann der Browser die laden Seite zuerst.
Während ein Skript heruntergeladen wird, startet der Browser kein anderes Downloads. Darüber hinaus werden möglicherweise alle Parsing- und Rendering-Aktivitäten blockiert.
Die HTTP-Spezifikation legt fest, dass Browser nicht mehr herunterladen sollten als zwei Komponenten parallel.
Eine Alternative besteht darin, defer="true"
im Skript-Tag zu verwenden. Der Das Defer-Attribut gibt an, dass das Skript ausgeführt werden soll, nachdem die Seite ausgeführt wurde Das Parsen ist abgeschlossen, es funktioniert jedoch nur für externe Skripte.
Wenn möglich, können Sie Ihr Skript per Code zur Seite hinzufügen, nachdem die Seite geladen wurde:
<script>
window.onload = function() {
const element = document.createElement("script");
element.src = "myScript.js";
document.body.appendChild(element);
};
</script>
Vermeiden Sie die Verwendung des Schlüsselworts with
. Es wirkt sich negativ auf Geschwindigkeit. Außerdem werden dadurch JavaScript-Bereiche überfüllt.
Das Schlüsselwort with
ist im strikten Modus nicht zulässig.