Jeder muss wissen, dass JavaScript eine Full-Stack-Entwicklungssprache ist und JS in Browsern, Mobiltelefonen und Servern zu sehen ist. 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.
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 Auswirkungen erhebliche Auswirkungen 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 Es gibt einen Unterschied, es ist immer schneller
Die üblichen Schleifen in JS sind wie folgt:
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 der erste Weg nativ ist und hat eine bessere Leistung. Derjenige mit dem niedrigsten Verbrauch ist auch der Schnellste. 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.
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) }
Nachdem der Browser HTMl, CSS und JS heruntergeladen hat, generiert er zwei Bäume: einen DOM-Baum und einen 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%';
IE8, Firefox3.5 und Chrome2 ermöglichen alle das obligatorische Herunterladen von JavaScript-Dateien.