Ergänzender Artikel zur Front-End-Performance-Optimierung

 Funktion getCategory(Alter) {
    var Kategorie = "";
    Schalter (wahr) {
        Fall ist NaN (Alter):
            Kategorie = "kein Alter";
            brechen;
        Fall (Alter >= 50):
            Kategorie = "Alt";
            brechen;
        Fall (Alter <= 20):
            Kategorie = "Baby";
            brechen;
        Standard:
            Kategorie = "Jung";
            brechen;
    };
    Rückgabekategorie;
}
getCategory(5); //Baby

 var str = "<div>Dies ist eine Testzeichenfolge</div>";
/**Geringe Effizienz**/
var obj = document.getElementsByTagName("body");
für(var i = 0; i < 100; i++){
    obj.innerHTML += str + i;
}
/**Hohe Effizienz**/
var obj = document.getElementsByTagName("body");
var arr = [];
für(var i = 0; i < 100; i++){
    arr[i] = str + i;
}
obj.innerHTML = arr.join("");

 /**Nicht empfohlen**/
var i = 1;
var j = "hallo";
var arr = [1,2,3];
var jetzt = neues Datum();
/**fördern**/
var i = 1,
    j = "hallo",
    arr = [1,2,3],
    jetzt = neues Datum();

 /**Nicht empfohlen**/
var name = Werte[i];
ich++;
/**fördern**/
var name = Werte[i++];

 /**Nicht empfohlen**/
var a = neues Array();
a[0] = 1;
a[1] = "hallo";
a[2] = 45;
var o = neues Objekt();
o.name = "Rechnung";
o.Alter = 13;
/**fördern**/
var a = [1, "hallo", 45];
var o = {
    Name: "Rechnung",
    Alter: 13
};

 String() ist eine interne Funktion und daher sehr schnell.
.toString() muss die Funktion im Prototyp abfragen, daher ist es etwas langsamer.
new String() ist am langsamsten.

 /**Geringe Effizienz**/   
var divs = document.getElementsByTagName("div");    
für(var i = 0; i < divs.Länge; i++){   
    ...  
}    
/**Hohe Effizienz, geeignet zum Abrufen von DOM-Sammlungen. Wenn es sich um ein reines Array handelt, gibt es kaum einen Unterschied zwischen den beiden Fällen**/  
var divs = document.getElementsByTagName("div");   
für(var i = 0, len = divs.length; i < len; i++){   
    ... 
}

 versuchen {
  für (var i = 0; i < 200; i++) {}
} Fang (e){}

 Der Funktionsaufruf mit Anweisung erstellt seinen eigenen Bereich und erhöht somit die Länge des Bereichs, in dem der Code ausgeführt wird.
Globaler Umfang.

 var foo = Funktion() {
  var lokal = {};
};
foo();
console.log(lokal); //=> undefiniert

var bar = Funktion() {
  lokal = {};
};
Bar();
console.log(lokal); //=> {}

/**Hier definieren wir die Funktion foo() und die Funktion bar(), die beide eine Variable namens „local“ definieren sollen. In der Funktion foo() verwenden wir die var-Anweisung, um eine lokale Variable zu deklarieren, und da innerhalb des Funktionskörpers ein Bereich gebildet wird, wird diese Variable in diesem Bereich definiert. Darüber hinaus wird im Hauptteil der Funktion foo() keine Bereichserweiterung durchgeführt, sodass nach Ausführung der Funktion auch die lokale Variable zerstört wird. Auf die Variable kann im äußeren Bereich nicht zugegriffen werden. In der Funktion bar() werden lokale Variablen nicht mit der Anweisung var deklariert. Stattdessen wird local direkt als globale Variable definiert. Daher kann der äußere Bereich auf diese Variable zugreifen. **/

lokal = {};
// Die Definition hier ist äquivalent zu global.local = {};

 Funktion foo() {
  var val = "hallo";
  Funktion bar() {
    Funktion baz() {
      global.val = "Welt;"
    };
    baz();
    console.log(val); //=> hallo
  };
  Bar();
};
foo();

/**In ‚JAVASCRIPT‘ werden Variablenbezeichner vom aktuellen Bereich nach außen bis zum globalen Bereich durchsucht. Der Zugriff auf Variablen im JAVASCRIPT-Code kann daher nur nach außen erfolgen, nicht umgekehrt. Die Ausführung der Funktion baz() definiert eine globale Variable val im globalen Gültigkeitsbereich. In der Funktion bar() gilt beim Zugriff auf den Bezeichner val das Suchprinzip von innen nach außen: Wird er im Gültigkeitsbereich der Funktion bar nicht gefunden, wird in der oberen Ebene, also im Gültigkeitsbereich der Funktion foo(), danach gesucht. Der Schlüssel zu aller Verwirrung liegt jedoch hier: Dieser Bezeichnerzugriff findet eine passende Variable im Gültigkeitsbereich der Funktion foo() und sucht nicht weiter außerhalb, sodass die in der Funktion baz() definierte globale Variable val keinen Einfluss auf diesen Variablenzugriff hat. **/

 /**Geringe Effizienz**/
für(var i = 0; i < 10000; i++){
    var but1 = document.getElementById("but1");
}
/**Hohe Effizienz**/
/**Globale Suche vermeiden**/
var doc = Dokument;
für(var i = 0; i < 10000; i++){
    var but1 = doc.getElementById("but1");
}
/**Im obigen Code besteht der zweite Fall darin, zuerst die Variable des globalen Objekts in der Funktion zu speichern und dann direkt auf die Variable zuzugreifen, während der erste Fall darin besteht, die Bereichskette jedes Mal bis zur globalen Umgebung zu durchlaufen. Wir können sehen, dass der zweite Fall tatsächlich nur einmal durchlaufen wird, während der erste Fall jedes Mal durchlaufen wird, und dieser Unterschied wird bei mehrstufigen Bereichsketten und mehreren globalen Variablen sehr deutlich. Die Anzahl der Suchvorgänge in der Bereichskette beträgt O(n). Indem wir eine lokale Variable erstellen, die auf „Dokument“ verweist, können wir die Leistung dieser Funktion verbessern, indem wir die Suche auf eine globale beschränken. **/

 Funktion foo() {
  var local = "Hallo";
  return Funktion() {
    Rückgabe vor Ort;
  };
}
var bar = foo();
console.log(bar()); //=> Hallo

/**Die hier gezeigte Technik, um dem äußeren Bereich Zugriff auf den inneren Bereich zu ermöglichen, wird als Schließung bezeichnet. Durch die Anwendung höherwertiger Funktionen wird der Gültigkeitsbereich der Funktion foo() „erweitert“. Die Funktion foo() gibt eine anonyme Funktion zurück, die im Gültigkeitsbereich der Funktion foo() existiert, sodass sie auf die lokalen Variablen im Gültigkeitsbereich der Funktion foo() zugreifen und ihre Referenzen speichern kann. Da diese Funktion die lokale Variable direkt zurückgibt, kann die Funktion bar() direkt im äußeren Bereich ausgeführt werden, um die lokale Variable zu erhalten. **/

 Schleifenbindungsereignisse, wir gehen von einem Szenario aus: Es gibt sechs Schaltflächen, die sechs Ereignissen entsprechen. Wenn der Benutzer auf die Schaltfläche klickt, wird das entsprechende Ereignis an der angegebenen Stelle ausgegeben.

var btns = document.querySelectorAll('.btn'); // 6 Elemente
var Ausgabe = document.querySelector('#Ausgabe');
var Ereignisse = [1, 2, 3, 4, 5, 6];
// Fall 1
für (var i = 0; i < btns.Länge; i++) {
  btns[i].onclick = Funktion(evt) {
    output.innerText += 'Geklickt ' + events[i];
  };
}
/**Die erste Lösung hier ist offensichtlich ein typischer Fehler bei einem Schleifenbindungsereignis. Ich werde hier nicht ins Detail gehen. Weitere Einzelheiten finden Sie in meiner Antwort an einen Internetnutzer. Der Unterschied zwischen der zweiten und dritten Lösung liegt in den Parametern, die vom Abschluss übergeben werden. **/
// Fall 2
für (var i = 0; i < btns.Länge; i++) {
  btns[i].onclick = (Funktion(Index) {
    Rückgabefunktion (evt) {
      output.innerText += 'Geklickt ' + events[index];
    };
  })(ich);
}
/**Die zweite Lösung übergibt den aktuellen Schleifenindex als Parameter, während die letztere direkt das entsprechende Ereignisobjekt übergibt. Letzteres ist eigentlich besser für groß angelegte Datenanwendungen geeignet. Da in der funktionalen Programmierung von JavaScript die beim Aufruf einer Funktion übergebenen Parameter Objekte vom Basistyp sind, ist der im Funktionskörper erhaltene formale Parameter ein kopierter Wert, sodass dieser Wert als lokale Variable im Gültigkeitsbereich des Funktionskörpers definiert wird. Nach Abschluss der Ereignisbindung kann die Ereignisvariable manuell dereferenziert werden, um den Speicherverbrauch im äußeren Gültigkeitsbereich zu reduzieren. Darüber hinaus werden beim Löschen eines Elements auch die entsprechende Ereignisüberwachungsfunktion, das Ereignisobjekt und die Abschlussfunktion zerstört und wiederverwendet. **/
//Fall 3
für (var i = 0; i < btns.Länge; i++) {
  btns[i].onclick = (Funktion(Ereignis) {
    Rückgabefunktion (evt) {
      output.innerText += 'Geklickt ' + Ereignis;
    };
  })(Ereignisse[i]);
}

 ;(function() { // Hauptgeschäftscode})();

 ;(Funktion(win, doc, $, undefiniert) {
  // Hauptgeschäftscode})(window, document, jQuery);

 /**ErforderlichJS**/
definieren(['jquery'], Funktion($) {
  // Hauptgeschäftscode});
/**SeaJS**/
definieren('Modell', ['dep', 'Unterstrich'], Funktion($, _) {
  // Hauptgeschäftscode});

 Funktion getData(Rückruf){
    $.ajax({
        URL: "",
        Daten:{},
        Datentyp: „json“,
        Typ: „get“,
        Erfolg:Funktion(Daten){
            Rückruf(null,Daten)
        }
    })

}

 getData(Funktion(Fehler,Daten){
 console.log(Daten)
})

 var arr = [1,2,3,4,5];
var arr2 = [];

 arr[arr.length] = 6; // am schnellsten arr.push(6); // 34,66 % langsamer
arr2 = arr.concat([6]); // 85,79% langsamer

 var arr = [1,2,3,4,5];
arr.unshift(0); 
[0].concat(arr);

 [0].concat(arr); // Schneller arr.unshift(0); // 64,70 % Langsamer

 var items = ['eins', 'zwei', 'drei', 'vier'];
items.splice(items.length / 2, 0, 'hallo');