In diesem Artikel werden einige Best Practices für effizientes JavaScript vorgestellt, um das Verständnis aller für die zugrunde liegenden und Implementierungsprinzipien von JS zu verbessern.
Datenspeicherung
Ein klassisches Problem in der Informatik besteht darin, die beste Lese- und Schreibleistung durch Ändern des Speicherorts der Daten zu erzielen. In JavaScript hat der Speicherort der Daten einen erheblichen Einfluss auf die Codeleistung. – Wenn Sie {} verwenden können, um ein Objekt zu erstellen, verwenden Sie kein neues Objekt. Wenn Sie [] verwenden können, um ein Array zu erstellen, verwenden Sie kein neues Array. Die Zugriffsgeschwindigkeit von Literalen in JS ist höher als die von Objekten. – Je tiefer eine Variable in der Scope-Kette liegt, desto länger dauert der Zugriff darauf. Für diese Art von Variable können Sie sie mithilfe lokaler Variablen durch Caching speichern, um die Anzahl der Zugriffe auf die Bereichskette zu reduzieren. Es gibt keinen großen Unterschied zwischen der reinen Verwendung der Punktnotation (object.name) und der Verwendung des Operators (object[name]). Safari wird einen Unterschied machen, der Klick ist immer schneller
Schleife
Übliche Schleifen in JS umfassen die folgenden Typen:
for(var i = 0; i < 10; i++) { // do something}
for(var prop in object) { // for loop object}
[1,2].forEach(function(value, index, array) { // 基于函数的循环})
Es besteht kein Zweifel, dass die erste Methode nativ ist, den geringsten Leistungsverbrauch aufweist und am schnellsten ist. Die zweite Methode von for-in erzeugt bei jeder Iteration mehr Overhead (lokale Variablen) und ihre Geschwindigkeit beträgt nur 1/7 der ersten Methode. Die dritte Methode bietet offensichtlich eine bequemere Schleifenmethode, aber ihre Geschwindigkeit beträgt nur 1/8 des normalen Zyklus. Daher können Sie entsprechend Ihrer Projektsituation die geeignete Recyclingmethode wählen.
Veranstaltungsdelegierter
Stellen Sie sich vor, Sie fügen jedem A-Tag auf der Seite ein Ereignis hinzu. Fügen wir jedem Tag einen onClick hinzu? Wenn die Seite eine große Anzahl von Elementen enthält, die an denselben Ereignishandler gebunden werden müssen, kann sich diese Situation auf die Leistung auswirken. Jedes gebundene Ereignis erhöht die Last auf der Seite oder zur Laufzeit. Bei einer Rich-Front-End-Anwendung belegen zu viele Bindungen zu viel Speicher auf Seiten mit starker Interaktion. Eine einfache und elegante Möglichkeit ist die Delegation von Veranstaltungen. Es handelt sich um einen ereignisbasierten Arbeitsablauf: Schicht für Schicht erfassen, das Ziel erreichen und Schicht für Schicht aufblasen. Da es einen Bubbling-Mechanismus für Ereignisse gibt, können wir Ereignisse von allen untergeordneten Elementen verarbeiten, indem wir Ereignisse an die äußere Ebene binden.
document.getElementById('content').onclick = function(e) {
e = e || window.event;
var target = e.target || e.srcElement; //如果不是 A标签，我就退出
if(target.nodeNmae !=== 'A') { return } //打印A的链接地址
console.log(target.href) }
Neu zeichnen und neu anordnen
Nachdem der Browser HTML, CSS und JS heruntergeladen hat, generiert er zwei Bäume: den DOM-Baum und den Rendering-Baum. Wenn sich die geometrischen Eigenschaften des Doms ändern, z. B. die Breite, Höhe, Farbe und Position des Doms, muss der Browser die geometrischen Eigenschaften des Elements neu berechnen und den Rendering-Baum neu erstellen. Dieser Vorgang wird als Neuzeichnen und Neuanordnen bezeichnet.
bodystyle = document.body.style; bodystyle.color = red; bodystyle.height = 1000px; bodystyke.width = 100%;
Das Ändern der drei Attribute in der oben genannten Methode führt dazu, dass der Browser dreimal neu fließt und neu zeichnet. In einigen Fällen kann die Reduzierung dieses Reflows die Browser-Rendering-Leistung verbessern. Die empfohlene Methode lautet wie folgt: Führen Sie nur einen Vorgang aus und führen Sie drei Schritte aus:
bodystyle = document.body.style; bodystyle.cssText 'color:red;height:1000px;width:100%';
JavaScript wird geladen
IE8, Firefox3.5 und Chrome2 ermöglichen alle das Herunterladen von JavaScript-Dateien. Daher blockiert
