Neueste Web-Entwicklung Tutorials
 

JavaScript Performance


Wie Sie Ihren JavaScript-Code zu beschleunigen.


Reduzieren Sie Aktivität in Loops

Loops werden häufig in der Programmierung verwendet.

Jede Anweisung in einer Schleife, einschließlich der for die Anweisung wird für jede Iteration der Schleife ausgeführt.

Suchen Sie nach Anweisungen oder Aufgaben, die außerhalb der Schleife platziert werden können.

Bad Code:

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

Bessere Code:

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

Die schlechte Code greift auf die Eigenschaft length eines Arrays jedes Mal, wenn die Schleife wiederholt wird.

Der besseren Code greift auf die Eigenschaft length außerhalb der Schleife, und macht die Schleife schneller laufen.


Reduzieren Sie DOM-Zugang

Zugriff auf den HTML-DOM ist sehr langsam, im Vergleich zu anderen JavaScript-Anweisungen.

Wenn Sie erwarten, dass ein DOM-Element mehrmals zugreifen, es einmal zugreifen und es als lokale Variable verwendet werden:

Beispiel

obj = document.getElementById("demo");
obj.innerHTML = "Hello";
Versuch es selber "

Reduzieren Sie DOM Größe

Halten Sie die Anzahl der Elemente in der HTML DOM klein.

Dies wird immer das Laden der Seite zu verbessern und zu beschleunigen Rendering (Seite Anzeige), vor allem auf kleineren Geräten.

Jeder Versuch, das DOM (wie getElementsByTagName) zu suchen von einem kleineren DOM profitieren.


Vermeiden Sie unnötige Variablen

Erstellen Sie keine neuen Variablen, wenn Sie Werte nicht zu speichern.

Oft können Sie Code wie folgt ersetzt:

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

Mit diesem:

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

Verzögerung JavaScript Loading

Putting Ihre Skripte am unteren Rand der Seite Körper, lässt der Browser zunächst die Seite zu laden.

Während ein Skript heruntergeladen wird, wird der Browser keine andere Downloads starten. Darüber hinaus könnten alle Parsing und Rendering-Aktivität blockiert werden.

Die HTTP-Spezifikation legt fest, dass Browser sollten nicht mehr als zwei Komponenten parallel herunterladen.

Eine Alternative ist die Verwendung defer="true" im Skript - Tag. Das defer-Attribut gibt an, dass das Skript ausgeführt werden soll, nachdem die Seite Syntaxanalyse abgeschlossen ist, aber es funktioniert nur für externe Skripte.

Wenn möglich, können Sie Ihr Skript auf die Seite von Code hinzufügen, nachdem die Seite geladen wurde:

Beispiel

<script>
window.onload = downScripts;

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

Vermeiden der Verwendung von mit

Vermeiden Sie das mit Schlüsselwort. Es hat einen negativen Effekt auf die Geschwindigkeit. Es clutters auch auf JavaScript Bereiche.

Das mit Schlüsselwort wird nicht im strikten Modus erlaubt.