Um ein frisches und eindeutiges Benutzererlebnis zu bieten, verwenden viele Websites JavaScript, um das Design zu verbessern, Formulare zu überprüfen, Browser sowie AJAX-Anforderungen, Cookie-Operationen usw. zu überprüfen, um aktualisierte dynamische Effekte zu erzielen. Wenn Sie jedoch eine große Menge an Inhalten im Browser rendern möchten, fällt die Leistung der Website stark ab. Daher ist es notwendig zu verstehen, wie die Ausführungseffizienz von JavaScript verbessert werden kann.
JavaScript -Funktionen
In JavaScript werden Funktionen vor der Verwendung vorkompiliert. Obwohl manchmal Saiten anstelle von Funktionen verwendet werden können, wird dieser JavaScript-Code jedes Mal, wenn er ausgeführt, wieder festgelegt, was die Leistung beeinträchtigt.
1. Beispiele
Die Codekopie lautet wie folgt:
eval ('output = (input * input)');
// Es wird empfohlen, sich zu ändern zu:
eval (new Function () {output = (Eingabe * Eingabe)});
2. SetTimeout -Beispiel
Die Codekopie lautet wie folgt:
setTimeout ("alarm (1)", 1000);
// Es wird empfohlen, sich zu ändern zu:
setTimeout (function () {alert (1)}, 1000);
Verwenden Sie Funktionen anstelle von Zeichenfolgen als Parameter, um sicherzustellen, 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 Bereichskette zu verstehen, damit Sie sie ausnutzen können.
Die Codekopie lautet wie folgt:
var localvar = "global"; // Globale Variablen
Funktionstest () {
var localvar = "local"; // Lokale Variablen
// Lokale Variablen
Alarm (LocalVar);
// Globale Variablen
alarm (this.localvar);
// Suchen Sie das Dokument und die lokale Variable können nicht gefunden werden. Suchen Sie also nach der globalen Variablen
var pagename = document.getElementById ("pagename");
}
Die Verwendung lokaler Variablen ist viel schneller als die Verwendung globaler Variablen, da die Analyse, je weiter in der Umfangskette, die Analyse ist. Die folgende Abbildung zeigt die Umfangskettenstruktur:
Wenn es mit Anweisungen im Code oder mit Anweisungen aus dem Code gibt, ist die Bereichskette komplizierter, wie in der folgenden Abbildung gezeigt:
JavaScript -Zeichenfolgen
Eine Funktion in JavaScript, die eine sehr leistungsstarke Auswirkung aufweist, ist die String -Verkettung. Im Allgemeinen wird das + Zeichen verwendet, um das Spleißen von Strings zu implementieren. Frühe Browser haben solche Verbindungsmethoden jedoch nicht optimiert, was zur kontinuierlichen Erstellung und Zerstörung von Zeichenfolgen führte, die die Effizienz der JavaScript -Ausführung ernsthaft verringern.
Die Codekopie lautet wie folgt:
var txt = "Hallo" + "" + "Welt";
Es wird empfohlen, sich zu ändern zu:
Die Codekopie lautet wie folgt:
var o = [];
O.Push ("Hallo");
o.push ("");
O.Push ("Welt");
var txt = o.join ();
Lassen Sie uns einfach zusammenfassen:
Die Codekopie 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 das:
Die Codekopie lautet wie folgt:
var txt = new StringBuffer ();
txt.append ("Hallo");
txt.append ("");
txt.Append ("Welt");
alert (txt.tostring ());
JavaScript DOM -Operation
Das HTML -Dokumentobjektmodell (DOM) definiert eine Standardmethode zum Zugriff und zum Manipulieren von HTML -Dokumenten. Es stellt ein HTML -Dokument als Knotenbaum dar, das Elemente, Attribute und Textinhalte enthält. Durch die Verwendung von HTML DOM kann JavaScript auf alle Knoten in einem HTML -Dokument zugreifen und manipulieren.
Dom Repaint
Jedes Mal, wenn ein DOM-Objekt, das auf eine Seite geändert wurde, mit DOM-Neubeschaffung beinhaltet, wird der Browser die Seite erneut rendern. Durch die Reduzierung der Anzahl der Modifikationen von DOM -Objekten kann daher die Leistung von JavaScript effektiv verbessern.
Die Codekopie 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, sich zu ändern zu:
Die Codekopie lautet wie folgt:
var html = [];
für (var i = 0; i <1000; i ++) {
html.push ('<p>' + i + '</p>');
}
document.body.innerhtml = html.join ('');
DOM -Zugriff
Jeder Knoten im HTML -Dokument kann über das DOM zugegriffen werden. Jedes Mal, wenn Sie GetElementById (), GetelementsByTagName () und andere Methoden anrufen, wird der Knoten neu gestellt und zugegriffen. Daher können die gefundenen Dom -Knoten auch die Leistung von JavaScript verbessern.
Die Codekopie lautet wie folgt:
document.getElementById ("p2"). style.color = "blau";
document.getElementById ("p2"). style.fontfamily = "arial";
document.getElementById ("p2"). style.fontsize = "größer";
Es wird empfohlen, sich zu ändern zu:
Die Codekopie lautet wie folgt:
var elmt = document.getElementById ("p2");
elmt.style.color = "blau";
elmt.style.fontfamily = "arial";
Elmt.Style.Fontsize = "größer";
DOM Traversal
DOM -Traversal -Kinderelemente lesen normalerweise das nächste Kinderelement per Indexschleife. In frühen Browsern ist diese Lesemethode bei der Ausführung sehr effizient. Die Verwendung der Nextsibling -Methode kann die Effizienz des Durchquerens von DOM durch JS verbessern.
Die Codekopie 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, sich zu ändern zu:
Die Codekopie lautet wie folgt:
var html = [];
var x = document.getElementById ("div"); // Der überlegene Knoten
var node = x.Firstchild;
while (node! = null) {
// todo
node = node.nextsibling;
}
JavaScript -Speicherfreigabe
In Webanwendungen wird der Speicherverbrauch mit zunehmender DOM -Objekte immer größer. Daher sollten Verweise auf Objekte rechtzeitig freigegeben werden, damit der Browser diesen Speicher recyceln kann.
Freie die von der DOM besetzte Erinnerung
Die Codekopie lautet wie folgt:
document.getElementById ("test"). innerhtml = "";
Das Einstellen der Innerhtml des DOM -Elements in eine leere Zeichenfolge kann den von seinen untergeordneten Elementen besetzten Speicher befreien.
JavaScript -Objekt freigeben
Die Codekopie lautet wie folgt:
//Objekt:
obj = null
// Objekteigenschaften:
obj.property löschen
// Array -Elemente:
Arr.SPLICE (0,3); // Die ersten 3 Elemente löschen