Einige Kenntnisse zur effektiven Verbesserung der JavaScript-Ausführungseffizienz_Javascript-Fähigkeiten

Um ein frisches und einzigartiges Benutzererlebnis zu bieten, verwenden viele Websites JavaScript, um das Design zu verbessern, Formulare zu validieren, Browser, Ajax-Anfragen, Cookie-Vorgänge usw. zu überprüfen, um dynamische Effekte ohne Aktualisierung zu erzielen. Allerdings muss eine große Menge an Inhalten im Browser gerendert werden, und wenn diese nicht richtig verarbeitet werden, sinkt die Leistung der Website stark. Wir müssen also verstehen, wie wir die Ausführungseffizienz von JavaScript verbessern können.

JavaScript-Funktion

In JavaScript werden Funktionen vor der Verwendung vorkompiliert. Obwohl manchmal Zeichenfolgen anstelle von Funktionen verwendet werden können, wird dieser JavaScript-Code bei jeder Ausführung erneut analysiert, was sich auf die Leistung auswirkt.

1. Bewertungsbeispiel

Code kopieren Der Code lautet wie folgt:

eval('output=(input * input)');
// Es wird empfohlen, es zu ändern:
eval(neue Funktion() { Ausgabe=(Eingabe * Eingabe)});

2. setTimeout-Beispiel

Code kopieren Der Code lautet wie folgt:

setTimeout("alert(1)", 1000);
// Es wird empfohlen, es zu ändern:
setTimeout(function(){alert(1)}, 1000);

Durch die Verwendung von Funktionen anstelle von Zeichenfolgen als Parameter wird sichergestellt, dass der Code in der neuen Methode vom JavaScript-Compiler optimiert werden kann.

JavaScript-Bereich

Jeder Bereich in der JavaScript-Bereichskette enthält mehrere Variablen. Es ist wichtig, die Bereichsverkettung zu verstehen, um sie nutzen zu können.

Code kopieren Der Code lautet wie folgt:

var localVar = "global"; //Globale Variable

Funktionstest() {

var localVar = "local"; //lokale Variable

//Lokale Variablen
alarm(localVar);

//Globale Variablen
alarm(this.localVar);

//Wenn das Dokument nicht in lokalen Variablen gefunden werden kann, suchen Sie nach globalen Variablen
var pageName = document.getElementById("pageName"); }

Die Verwendung lokaler Variablen ist viel schneller als die Verwendung globaler Variablen, da die Auflösung umso langsamer ist, je weiter man in der Bereichskette voranschreitet. Die folgende Abbildung zeigt die Struktur der Bereichskette:

Wenn der Code With- oder Try-Catch-Anweisungen enthält, wird die Bereichskette komplizierter, wie unten gezeigt:

JavaScript-Zeichenfolge

Eine Funktion in JavaScript, die sich stark auf die Leistung auswirkt, ist die Zeichenfolgenverkettung. Im Allgemeinen werden Symbole zum Zusammenfügen von Zeichenfolgen verwendet. Frühe Browser optimierten diese Verbindungsmethode jedoch nicht, was zur kontinuierlichen Erstellung und Zerstörung von Zeichenfolgen führte, was die Effizienz der JavaScript-Ausführung erheblich beeinträchtigte.

Code kopieren Der Code lautet wie folgt:

var txt = "hello" " " "world";

Es wird empfohlen, es wie folgt zu ändern:

Code kopieren Der Code lautet wie folgt:

var o = [];
o.push("Hallo");
o.push(" ");
o.push("world");
var txt = o.join();

Lassen Sie es uns einfach zusammenfassen:

Code kopieren Der Code lautet wie folgt:

Funktion StringBuffer(str) {
var arr = [];
arr.push(str || "");
This.append = function(str) {
arr.push(str);
         gib dies zurück;
};
This.toString = function() {
          return arr.join("");
};
};

Dann nennen Sie es so:

Code kopieren Der Code lautet wie folgt:

var txt = new StringBuffer();
txt.append("Hallo");
txt.append(" ");
txt.append("World");
alarm(txt.toString());

JavaScript DOM-Manipulation

HTML Document Object Model (DOM) definiert eine Standardmethode für den Zugriff auf und die Bearbeitung von HTML-Dokumenten. Es stellt ein HTML-Dokument als Knotenbaum dar, der Elemente, Attribute und Textinhalte enthält. Durch die Verwendung des HTML-DOM kann JavaScript auf alle Knoten in einem HTML-Dokument zugreifen und diese bearbeiten.

DOM neu zeichnen

Jedes Mal, wenn das DOM-Objekt der Seite geändert wird, ist eine Neuzeichnung des DOM erforderlich, und der Browser rendert die Seite neu. Daher kann die Reduzierung der Anzahl der Änderungen an DOM-Objekten die Leistung von JavaScript effektiv verbessern.

Code kopieren Der Code lautet wie folgt:

für (var i = 0; i < 1000; i ) {
var elmt = document.createElement('p');
elmt.innerHTML = i;
document.body.appendChild(elmt);
}

Es wird empfohlen, es wie folgt zu ändern:

Code kopieren Der Code lautet wie folgt:

var html = [];
für (var i = 0; i < 1000; i ) {
html.push('

' i '

');
}
document.body.innerHTML = html.join('');

DOM-Zugriff

Auf jeden Knoten im HTML-Dokument kann über das DOM zugegriffen werden. Jedes Mal, wenn Sie getElementById(), getElementsByTagName() und andere Methoden aufrufen, wird der Knoten erneut durchsucht und darauf zugegriffen. Daher kann das Zwischenspeichern der gefundenen DOM-Knoten auch die Leistung von JavaScript verbessern.

Code kopieren Der Code lautet wie folgt:

document.getElementById("p2").style.color = "blue";
document.getElementById("p2").style.fontFamily = "Arial";
document.getElementById("p2").style.fontSize = "larger";

Es wird empfohlen, es wie folgt zu ändern:

Code kopieren Der Code lautet wie folgt:

var elmt = document.getElementById("p2");
elmt.style.color = "blue";
elmt.style.fontFamily = "Arial";
elmt.style.fontSize = "larger";

DOM-Durchquerung

Bei der DOM-Durchquerung untergeordneter Elemente wird normalerweise das nächste untergeordnete Element in einer Schleife gemäß dem Index gelesen. In frühen Browsern weist diese Lesemethode eine sehr geringe Ausführungseffizienz auf. Die nextSibling-Methode kann verwendet werden, um die Effizienz der DOM-Durchquerung zu verbessern.

Code kopieren Der Code lautet wie folgt:

var html = [];
var x = document.getElementsByTagName("p");//Alle Knoten
für (var i = 0; i < x.length; i ) {
//todo
}

Es wird empfohlen, es wie folgt zu ändern:

Code kopieren Der Code lautet wie folgt:

var html = [];
var x = document.getElementById("div");//Überlegener Knoten
var node = x.firstChild;
while(node ​​​​!= null){
//todo
node = node.nextSibling;
}

JavaScript-Speicherfreigabe

In Webanwendungen wird der Speicherverbrauch mit zunehmender Anzahl von DOM-Objekten immer größer. Daher sollte der Verweis auf das Objekt rechtzeitig freigegeben werden, damit der Browser den Speicher zurückgewinnen kann.

Gibt den von DOM belegten Speicher frei

Code kopieren Der Code lautet wie folgt:

document.getElementById("test").innerHTML = "";

Setzen Sie innerHTML eines DOM-Elements auf eine leere Zeichenfolge, um den von seinen untergeordneten Elementen belegten Speicher freizugeben.

Javascript-Objekt freigeben

Code kopieren Der Code lautet wie folgt:

//Objekt:
obj = null
//Objekteigenschaften:
obj.property löschen
//Array-Elemente:
arr.splice(0,3);//Die ersten 3 Elemente löschen