Leistungsstarke JAVASCRIPT_Javascript-Tipps, die Sie nicht kennen

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 3f1c4e4b6b16bbbd69b2ee476dc4f83a nicht das Herunterladen anderer Tags. Leider blockiert der JS-Downloadvorgang weiterhin den Download anderer Ressourcen, wie z. B. Bilder. Obwohl die neuesten Browser die Leistung verbessert haben, indem sie parallele Downloads zulassen, bleibt das Blockieren von Skripten ein Problem. Daher wird empfohlen, alle 3f1c4e4b6b16bbbd69b2ee476dc4f83a-Tags am Ende des 6c04bd5ca3fcae76e30b72ad730ca86d-Tags zu platzieren, um die Auswirkungen auf die Darstellung der gesamten Seite zu minimieren und zu verhindern, dass Benutzer ein leeres

sehen

Hochleistungsbereitstellung von JS-Dateien

Da jetzt jeder weiß, dass sich mehrere 3f1c4e4b6b16bbbd69b2ee476dc4f83a-Tags auf die Seitenrenderinggeschwindigkeit auswirken, ist es nicht schwer zu verstehen, dass „die Reduzierung des für die Seitenrendering erforderlichen HTTP“ eine klassische Regel zur Beschleunigung der Website ist. Daher wird durch das Zusammenführen aller JS-Dateien in einer Produktionsumgebung die Anzahl der Anfragen reduziert und somit das Seitenrendering beschleunigt. Neben dem Zusammenführen von JS-Dateien können wir auch JS-Dateien komprimieren. Unter Komprimierung versteht man das Entfernen von Teilen einer Datei, die für die Ausführung der Datei nicht relevant sind. Der entfernte Inhalt enthält Leerzeichen und Kommentare. Durch den Änderungsprozess kann die Dateigröße normalerweise um die Hälfte reduziert werden. Es gibt auch einige Komprimierungstools, die die Länge lokaler Variablen reduzieren, wie zum Beispiel:

var myName = "foo" + "bar"; 
//压缩后变成 
var a = "foobar";

JS-Dateien zwischenspeichern

Das Zwischenspeichern von HTTP-Komponenten kann das Benutzererlebnis bei erneuten Besuchen der Website erheblich verbessern. Der Webserver nutzt den „Expires HTTP Response Header“, um dem Client mitzuteilen, wie lange eine Ressource zwischengespeichert werden soll. Natürlich hat das Caching seine eigenen Nachteile: Wenn Ihre Anwendung aktualisiert wird, müssen Sie sicherstellen, dass Benutzer die neuesten statischen Inhalte herunterladen. Dieses Problem kann durch Ändern des Dateinamens der statischen Ressourcen gelöst werden. Möglicherweise wird in der Produktionsumgebung angezeigt, dass der Browser auf jsapplication-20151123201212.js verweist. Dadurch wird die neue JS-Datei als Zeitstempel gespeichert, um das Problem zu lösen, dass der Cache nicht aktualisiert wird.

Zusammenfassung

Natürlich gibt es bei effizientem JS nicht nur diese Bereiche, die verbessert werden können. Wenn wir einige Leistungsverluste reduzieren können, können wir JavaScript verwenden, um effizienter zu entwickeln.

Alles, was Sie nicht über leistungsstarkes JAVASCRIPT wussten, jetzt wissen Sie es!