Was Sie über Hochleistungs-Javascript wissen müssen

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.

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 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

Schleife

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.

Ereignisdelegation

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) }

Neuzeichnen und Neuanordnen

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%';

JavaScript-Laden

IE8, Firefox3.5 und Chrome2 ermöglichen alle das obligatorische Herunterladen von JavaScript-Dateien. <script> blockiert also 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 <script>-Tags am Ende des <body>-Tags zu platzieren, um die Auswirkungen auf die Darstellung der gesamten Seite zu minimieren und zu verhindern, dass Benutzer ein leeres

High-Performance-Deployment von sehen JS-Dateien

Da nun jeder weiß, dass mehrere <script>-Tags die Seitenrendering-Geschwindigkeit beeinflussen, ist es nicht schwer zu verstehen, dass „die Reduzierung des für die Seitenrendering erforderlichen HTTP“ eine klassische Regel zur Verbesserung der Website-Geschwindigkeit 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";

Caching von JS-Dateien

Caching von HTTP-Komponenten kann die Benutzererfahrung 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 sehen Sie Browser, die in der Produktionsumgebung auf jsapplication-20151123201212.js verweisen. Dadurch werden neue JS-Dateien in Form von Zeitstempeln gespeichert, um das Problem zu lösen, dass der Cache nicht aktualisiert wird.

Zusammenfassung

Natürlich gibt es mehr als nur diese Bereiche für Verbesserungen bei effizientem JS. Wenn wir einige Leistungsverluste reduzieren können, können wir JavaScript verwenden, um effizienter zu entwickeln.

Empfohlenes Tutorial: „JavaScript-Grundlagen-Tutorial“

Das obige ist der detaillierte Inhalt vonWas Sie über Hochleistungs-Javascript wissen müssen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!