Erkundung von Problemen bei der Ausführungseffizienz von Javascript_Grundkenntnisse

Javascript ist eine sehr flexible Sprache. Unterschiedliche Codestile führen zwangsläufig zu Unterschieden in der Ausführungseffizienz , klären Sie die häufigsten und leicht zu vermeidenden Probleme

　Javascripts eigene Ausführungseffizienz
Umfangskette, Schließung, prototypische Vererbung, Bewertung und andere Funktionen in Javascript bieten nicht nur verschiedene magische Funktionen, sondern bringen auch verschiedene Effizienzprobleme mit sich. Bei unachtsamer Verwendung führen sie zu einer geringen Ausführungseffizienz.

　1. Globaler Import
Wir werden einige globale Variablen (Fenster, Dokument, benutzerdefinierte globale Variablen usw.) mehr oder weniger während des Codierungsprozesses verwenden. Jeder, der die JavaScript-Bereichskette versteht, weiß, dass der Zugriff auf globale Variablen im lokalen Bereich einen gesamten Bereich erfordert Die Kette wird Schicht für Schicht bis zum Bereich der obersten Ebene durchlaufen, und die Zugriffseffizienz lokaler Variablen ist schneller und höher. Wenn daher einige globale Objekte häufig im lokalen Bereich verwendet werden, können sie z. B. in den lokalen Bereich importiert werden Beispiel:

Code kopieren Der Code lautet wie folgt:

//1. Übergeben Sie das Modul als Parameter
(function(window,$){
var xxx = window.xxx; $("#xxx1").xxx();
$("#xxx2").xxx();
})(window,jQuery);

//2. Vorübergehend in lokalen Variablen speichern
function(){
var doc = document;
var global = window.global; }

　2. Bewertung und bewertungsähnliche Probleme

Wir alle wissen, dass eval eine Zeichenfolge als js-Code verarbeiten kann. Es heißt, dass mit eval ausgeführter Code mehr als 100-mal langsamer ist als Code ohne eval (ich habe die spezifische Effizienz nicht getestet, interessierte Schüler können es testen).
JavaScript-Code führt vor der Ausführung einen ähnlichen „Vorkompilierungs“-Vorgang durch: Er erstellt zunächst ein aktives Objekt in der aktuellen Ausführungsumgebung und legt die mit var deklarierten Variablen als Attribute des aktiven Objekts fest, zu diesem Zeitpunkt jedoch diese Variablen Die Zuweisungswerte sind alle undefiniert, und die mit Funktion definierten Funktionen werden auch als Eigenschaften des aktiven Objekts hinzugefügt, und ihre Werte entsprechen genau der Definition der Funktion. Wenn Sie jedoch „eval“ verwenden, kann der Code in „eval“ (eigentlich eine Zeichenfolge) seinen Kontext nicht im Voraus erkennen und kann nicht im Voraus analysiert und optimiert werden, dh es können keine vorkompilierten Vorgänge ausgeführt werden. Daher wird auch seine Leistung stark reduziert

Tatsächlich wird eval heutzutage nur noch selten verwendet. Worüber ich hier sprechen möchte, sind zwei eval-ähnliche Szenarien (neue Funktion{}, setTimeout, setInterver)

Code kopieren Der Code lautet wie folgt:

setTimtout("alert(1)",1000);

setInterver("alert(1)",1000); (neue Funktion("alert(1)"))();



Die Ausführungseffizienz der oben genannten Codetypen ist relativ gering, daher wird empfohlen, anonyme Methoden oder Methodenreferenzen direkt an die setTimeout-Methode zu übergeben

　

3. Geben Sie nach Abschluss des Abschlusses Variablen frei, auf die nicht mehr verwiesen wird

Code kopieren Der Code 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 die Methode res, die im Abschluss zurückgegeben wird, der aus einer sofort ausgeführten Funktion besteht. Diese Variable behält Verweise auf alle Variablen (a, b, c usw.) in diesem Abschluss Diese beiden Variablen befinden sich immer im Speicherbereich, insbesondere der Verweis auf das dom-Element, das viel Speicher verbraucht. Wir verwenden jedoch nur den Wert der a-Variablen in res, sodass wir vor dem Abschluss die Freigabe vornehmen können andere Variablen

Code kopieren

Der Code lautet wie folgt:

var f = (function(){
var a = {name:"var3"}; var b = ["var1", "var2"]; var c = document.getElementByTagName("li"); //****Andere Variablen
//***Einige Operationen
//Variablen freigeben, die nicht mehr verwendet werden, bevor der Abschluss
zurückgibt b = c = null;
var res = function(){
alarm(a.name);
           }
Return res;
})()

Die Effizienz von Js Betriebsdom

Im Prozess der Webentwicklung liegt der Engpass bei der Front-End-Ausführungseffizienz häufig im DOM-Betrieb und ist eine sehr leistungsintensive Sache. Wie können wir während des DOM-Betriebs so viel Leistung wie möglich einsparen? 1. Reflow reduzieren
Was ist Reflow?

Wenn sich die Eigenschaften eines DOM-Elements ändern (z. B. die Farbe), weist der Browser Render an, das entsprechende Element neu zu zeichnen.

Wenn die Änderung das Elementlayout (z. B. die Breite) betrifft, verwirft der Browser die ursprünglichen Attribute, berechnet sie neu und übergibt die Ergebnisse an Render, um die Seitenelemente neu zu zeichnen. Dieser Vorgang wird als Reflow bezeichnet.

Methoden zur Reduzierung des Rückflusses

Löschen Sie zunächst das Element aus dem Dokument und setzen Sie das Element dann nach Abschluss der Änderung wieder an seine ursprüngliche Position (wenn eine große Anzahl von Reflow-Vorgängen an einem Element und seinen Unterelementen ausgeführt wird, wirken sich die Methoden 1 und 2 negativ aus). offensichtlicher)

Stellen Sie die Anzeige des Elements auf „keine“ ein und ändern Sie die Anzeige nach Abschluss der Änderung auf den ursprünglichen Wert

Wenn Sie mehrere Stilattribute ändern, definieren Sie eine Klassenklasse, anstatt die Stilattribute mehrmals zu ändern (empfohlen für bestimmte Schüler)
Verwenden Sie documentFragment
, wenn Sie der Seite eine große Anzahl von Elementen hinzufügen ​Zum Beispiel

Code kopieren Der Code lautet wie folgt: for(var i=0;i<100:i ){

var child = docuemnt.createElement("li");
child.innerHtml = "child";

document.getElementById("parent").appendChild(child);

}

Wenn der Code mehrmals auf die Statusinformationen eines Elements zugreifen muss, können wir diese vorübergehend in einer Variablen speichern, wenn der Status unverändert bleibt. Dadurch kann der durch mehrere Zugriffe auf das DOM verursachte Speicheraufwand vermieden werden >

Vermeiden Sie bei der Suche nach DOM-Elementen das Durchqueren großer Bereiche von Seitenelementen, verwenden Sie präzise Selektoren oder geben Sie den Kontext an, um den Suchbereich einzugrenzen. Nehmen Sie als Beispiel jquery

Verwenden Sie weniger Fuzzy-Matching-Selektoren wie $("[name*='_fix']") und verwenden Sie mehr zusammengesetzte Selektoren wie id und schränken Sie den Bereich schrittweise ein $("li.active") usw. Geben Sie den Kontext an: z. B. $("#parent .class"), $(".class",$el) usw.

4. Verwenden Sie die Ereignisdelegation

Verwendungsszenario: Eine Liste mit einer großen Anzahl von Datensätzen muss an ein Klickereignis gebunden werden, um bestimmte Funktionen zu implementieren, nachdem mit der Maus geklickt wurde Seite Es wird eine große Anzahl von Ereignis-Listenern geben, die ineffizient sind.

Grundprinzip: Wir alle wissen, dass Ereignisse in der DOM-Spezifikation in die Luft sprudeln, was bedeutet, dass die Ereignisse eines beliebigen Elements gemäß der Struktur des DOM-Baums Schritt für Schritt nach oben sprudeln, ohne das Ereignis-Sprudeln aktiv zu verhindern . Das Ereignisobjekt stellt auch event.target (srcElement unter IE) bereit, um auf die Ereignisquelle zu verweisen. Selbst wenn wir das Ereignis im übergeordneten Element abhören, können wir das ursprüngliche Element finden, das das Ereignis ausgelöst hat Delegation. Hier ist ohne weiteres ein Beispiel

Basierend auf dem oben vorgestellten 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 die Vervollständigung der Tool-Klasse überlassen. Die Methode „delegate()“ in jquery implementiert diese Funktion

Die Syntax sieht so aus: $(selector).delegate(childSelector, event, data, function), zum Beispiel:

Code kopieren

Der Code lautet wie folgt: $("div").delegate("button","click",function(){ $("p").slideToggle();

});

Parameterbeschreibung (zitiert nach w3school)
Parameterbeschreibung
childSelector erforderlich. Gibt ein oder mehrere untergeordnete Elemente an, an die Ereignishandler angehängt werden.
Veranstaltung ist erforderlich. Gibt ein oder mehrere Ereignisse an, die dem Element zugeordnet werden sollen. Mehrere durch Leerzeichen getrennte Ereigniswerte. Muss ein gültiges Ereignis sein.
Daten sind optional. Gibt zusätzliche Daten an, die an die Funktion übergeben werden sollen.
Funktion erforderlich. Gibt eine Funktion an, die ausgeführt werden soll, wenn ein Ereignis auftritt.
Tipps: Ein weiterer Vorteil der Ereignisdelegierung besteht darin, dass auch Ereignisse, die auf Elementen ausgelöst werden, die nach der Ereignisbindung dynamisch hinzugefügt wurden, überwacht werden können, sodass Ereignisse nicht jedes Mal an Elemente gebunden werden müssen, wenn sie der Seite dynamisch hinzugefügt werden