JavaScript ist eine sehr flexible Sprache. Wir können verschiedene Codestile schreiben, wie wir möchten. Verschiedene Codestile führen zwangsläufig zu Unterschieden in der Ausführungseffizienz. Während des Entwicklungsprozesses sind wir vielen Methoden zur Verbesserung der Codeleistung ausgesetzt. Lassen Sie uns die häufigsten und leicht zu vermeidenen Probleme aussortieren.
Javascripts eigene Ausführungseffizienz
Die Umfangskette, der Verschluss, die Prototyp -Vererbung, die Bewertung und andere Merkmale in JavaScript bieten verschiedene magische Funktionen und bringen gleichzeitig verschiedene Effizienzprobleme. Wenn Sie es nachlässig verwenden, führen Sie zu einer ineffizienten Ausführung.
1. Globaler Import
Während des Codierungsprozesses werden wir einige globale Variablen (Fenster, Dokument, benutzerdefinierte globale Variablen usw.) verwenden. Jeder, der die JavaScript-Bereichskette kennt, weiß, dass der Zugriff auf globale Variablen in einem lokalen Bereich erfordert, dass die gesamte Bereichskette für Schicht bis zur oberen Ebene durchquert wird, und die Zugangseffizienz lokaler Variablen wird schneller und höher sein. Bei der Verwendung einiger globaler Objekte bei hoher Frequenz im lokalen Bereich kann es daher beispielsweise in den lokalen Bereich importiert werden:
Die Codekopie lautet wie folgt:
// 1. Geben Sie es als Parameter in das Modul weiter
(Funktion (Fenster, $) {
var xxx = window.xxx;
$ ("#xxx1"). xxx ();
$ ("#xxx2"). xxx ();
}) (Fenster, jQuery);
// 2. Lagern auf lokale Variablen
Funktion(){
var doc = document;
var global = window.global;
}
2. Eval- und Klassenbewertungsprobleme
Wir alle wissen, dass Eval einen String als JS -Code verwenden kann, um ihn auszuführen und zu verarbeiten. Es wird gesagt, dass der Code, der mit EVAL ausgeführt wird, mehr als 100 -mal langsamer ist als der Code, der nicht mit eval verwendet wird (ich habe die spezifische Effizienz nicht getestet, und diejenigen, die interessiert sind, können ihn testen).
Der JavaScript -Code führt vor der Ausführung ähnliche "Vorkompilationsvorgänge" aus: Erstens erstellt er ein aktives Objekt in der aktuellen Ausführungsumgebung und legt die mit VAR als Eigenschaften des aktiven Objekts deklarierten Variablen fest, aber zu diesem Zeitpunkt sind die Zuordnungen dieser Variablen nicht definiert, und die Funktionen sind auch als Eigenschaften des aktiven Objekts hinzugefügt und ihre Werte sind genau die Definition der Funktion der Funktion. Wenn Sie jedoch "Eval" verwenden, kann der Code in "Eval" (tatsächlich eine Zeichenfolge) seinen Kontext nicht vorab identifizieren, und kann nicht im Voraus analysiert und optimiert werden, d. H. Vorgefertigte Operationen können nicht durchgeführt werden. Daher wird seine Leistung stark reduziert
Tatsächlich verwenden die Menschen jetzt selten Eval. Was ich hier sprechen möchte, ist ein Szenario von zwei Arten von Eval (neue Funktion {}, setTimeout, setInterver)
Die Codekopie lautet wie folgt:
setTimtout ("alarm (1)", 1000);
setInterver ("alarm (1)", 1000);
(neue Funktion ("Alarm (1)")) ();
Die oben genannten Arten der Codeausführungseffizienz sind relativ niedrig. Daher wird empfohlen, anonyme Methoden oder Verweise direkt an die SetTimeout -Methode zu übergeben.
3. Nach Abschluss der Schließung wird die nicht mehr verwiesene Variable freigegeben.
Die Codekopie lautet wie folgt:
var f = (function () {
var a = {name: "var3"};
var b = ["var1", "var2"];
var c = document.getElementByTagName ("li");
// **** Andere Variablen
// *** Einige Operationen
var res = function () {
Alarm (A.Name);
}
return res;
}) ())
Der Rückgabewert der Variablen F im obigen Code ist eine Methode res, die in einem Verschluss aus einer sofortigen Ausführungsfunktion zurückgegeben wird. Diese Variable behält Verweise auf alle Variablen (A, B, C usw.) in diesem Verschluss. Daher befinden sich diese beiden Variablen immer im Speicherraum, insbesondere im Verweis auf das DOM -Element verbraucht viel Speicher. Wir verwenden nur den Wert der Variablen A in Res. Daher können wir andere Variablen befreien, bevor die Schließung zurückkehrt.
Die Codekopie lautet wie folgt:
var f = (function () {
var a = {name: "var3"};
var b = ["var1", "var2"];
var c = document.getElementByTagName ("li");
// **** Andere Variablen
// *** Einige Operationen
// Die Variablen, die nicht mehr verwendet werden, bevor der Verschluss zurückkehrt, nicht mehr verwendet werden
b = c = null;
var res = function () {
Alarm (A.Name);
}
return res;
}) ())
Die Effizienz von JS -Betriebsdom
Während des Webentwicklungsprozesses betrifft der Engpass der Effizienz von Front-End-Ausführung häufig DOM-Operationen. DOM-Operationen sind eine sehr leistungsstarke Sache. Wie können wir versuchen, während der DOM -Operationen Leistung zu sparen?
1. Reflow reduzieren
Was ist Reflow?
Wenn sich die Eigenschaften des DOM -Elements ändern (z. B. Farbe), benachrichtigt der Browser das Render, um das entsprechende Element neu zu definieren. Dieser Prozess wird als Repaint bezeichnet.
Wenn die Änderung das Elementlayout (z. B. die Breite) umfasst, verwandelt der Browser die ursprünglichen Attribute, resokalkuliert und übergibt das Ergebnis an das Rendern, um die Seitenelemente neu zu erneuern. Dieser Prozess wird als Reflow bezeichnet.
Wie man den Reflow reduziert
Löschen Sie zuerst das Element aus dem Dokument und geben Sie nach Abschluss der Änderung das Element wieder in seine ursprüngliche Position (wenn eine große Anzahl von Reflow -Operationen an einem bestimmten Element und seinen untergeordneten Elementen durchgeführt wird, sind die Auswirkungen der 1 und 2 Methoden offensichtlicher).
Stellen Sie die Anzeige des Elements auf "None" fest und ändern Sie nach Abschluss der Änderung die Anzeige auf den ursprünglichen Wert
Definieren Sie die Klassenklasse, wenn Sie mehrere Style -Attribute ändern, anstatt die Stilattribute mehrmals zu ändern (empfohlen von bestimmten Schülern)
Verwenden Sie Dokumentfragment, wenn Sie der Seite große Mengen von Elementen hinzufügen
Zum Beispiel
Die Codekopie lautet wie folgt:
für (var i = 0; i <100: i ++) {
var child = docuemnt.createelement ("li");
Child.innerhtml = "Child";
document.getElementById ("Eltern"). appendChild (Kind);
}
Wenn der Code mehrere Zugriff auf die Statussinformationen eines Elements erfordert, können wir ihn vorübergehend in einer Variablen speichern, wenn der Zustand unverändert bleibt, was den Speicheraufwand vermeiden kann, der durch mehrere Zugriff auf das DOM verursacht wird. Ein typisches Beispiel ist:
Versuchen Sie bei der Suche nach DOM -Elementen, um die Seitenelemente in großen Bereichen zu vermeiden, um genaue Selektoren zu verwenden, oder geben Sie einen Kontext an, um den Suchbereich einzugrenzen, und nehmen Sie JQuery als Beispiel an
Verwenden Sie weniger Fuzzy -Matching -Selektoren.
Geben Sie den Kontext an: zum Beispiel $ ("#parent .class"), $ (". Klasse", $ el) usw.
4. Verwenden Sie die Ereignisdelegation
Nutzungsszenario: Eine Liste mit einer großen Anzahl von Datensätzen. Jeder Datensatz muss gebunden sein, um auf Ereignisse zu klicken. Einige Funktionen werden nach dem Klicken auf die Maus implementiert. Unsere übliche Praxis ist es, für jeden Datensatz an Hörenereignisse zu binden. Diese Praxis führt zu einer großen Anzahl von Ereignishörern auf der Seite, was relativ ineffizient ist.
Grundprinzip: Wir alle wissen, dass Ereignisse in der DOM -Spezifikation sprudeln werden, dh Ereignisse eines beliebigen Elements werden nach der Struktur des DOM -Baums von der ersten Schritt für Schritt auf der oberen Seite sprudeln. Das Ereignisobjekt bietet auch Event.target (srcelement unter IE), um auf die Ereignisquelle zu verweisen, damit wir das originellste Element finden, das das Ereignis auslöst, auch wenn wir das Ereignis auf dem übergeordneten Element anhören. Dies ist das Grundprinzip des Delegierten. Ohne weiteres das obige Beispiel
Basierend auf dem oben eingeführten Prinzip der Überwachung von Ereignissen schreiben wir es neu.
Natürlich müssen wir die Ereignisquelle nicht jedes Mal beurteilen. Wir können sie abstrahieren und der Werkzeugklasse übergeben, um sie zu vervollständigen. Die Delegate () -Methode in JQuery implementiert diese Funktion
Die Syntax ist wie $ (Selector) .Delegate (Childselector, Ereignis, Daten, Funktion), zum Beispiel:
Die Codekopie lautet wie folgt:
$ ("div"). Delegate ("Schaltfläche", "klicken", function () {
$ ("p"). Slidetoggle ();
});
Parameterbeschreibung (zitiert von W3school)
Parameterbeschreibung
Childselector ist erforderlich. Gibt an, dass ein oder mehrere Kinderelemente des Event -Handlers angebracht werden sollen.
Ereignis ist erforderlich. Gibt ein oder mehrere Ereignisse an, die dem Element angehängt sind. Trennende mehrere Ereigniswerte nach Leerzeichen. Muss ein gültiges Ereignis sein.
Daten sind optional. Gibt die zusätzlichen Daten an, die an die Funktion übergeben wurden.
Funktion erforderlich. Gibt die Funktion an, die ausgeführt wird, wenn ein Ereignis auftritt.
Tipps: Ein weiterer Vorteil der Ereignisdelegation besteht darin, dass selbst Ereignisse, die auf Elementen ausgelöst werden, die nach einer Ereignisbindung dynamisch hinzugefügt wurden, sodass Sie die Ereignisse nicht jedes Mal binden müssen, wenn Sie der Seite dynamisch ein Element hinzufügen.