Ich glaube, jeder weiß, dass JavaScript eine Full-Stack-Entwicklungssprache ist und JS auf dem Browser, dem Mobiltelefon und der Serverseite zu sehen ist. In diesem Artikel wird einige effiziente JavaScript -Best Practices ausgewiesen, um Ihr Verständnis der zugrunde liegenden JS- und Implementierungsprinzipien zu verbessern.
Datenspeicherung
In der Computerdisziplin gibt es ein klassisches Problem, das eine optimale Lese- und Schreibleistung erzielt, indem der Standort des Datenspeichers geändert wird. In JavaScript kann der Standort der Datenspeicherung erhebliche Auswirkungen auf die Codeleistung haben. Wenn Sie Objekte mit {} erstellen können, verwenden Sie kein neues Objekt. Wenn Sie Arrays mit [] erstellen können, verwenden Sie kein neues Array. Die Zugangsgeschwindigkeit von Literalen in JS ist höher als die von Objekten. Je tiefer die Variable in der Bereichskette liegt, desto länger ist die für den Zugang erforderliche Praxis. Für solche Variablen können lokale Variablen über Cache gespeichert werden, wodurch die Anzahl der Zugriffe auf Geltungsketten reduziert wird. Es gibt keinen großen Unterschied zwischen Punktnotation (Objekt.Name) und Operator (Objekt [Name]). Nur Safari hat einen Unterschied und Punkte sind immer schneller
Zyklus
Es gibt mehrere gemeinsame Schleifen in JS:
for (var i = 0; i <10; i ++) {// etwas tun} für (var prop im objekt) {// für Schleifenobjekt} [1,2] .foreach (Funktion (Wert, Index, Array) {// funktionsbasierte Loop})Unnötig zu zweifeln, die erste Methode ist nativ, mit dem niedrigsten Leistungsverbrauch und der schnellsten Geschwindigkeit. Die zweite Methode for-In erzeugt bei jeder Iteration mehr Overhead (lokale Variablen), und ihre Geschwindigkeit beträgt nur 1/7 des ersten Typs. Die dritte Methode bietet offensichtlich eine bequemere Schleifenmethode, aber ihre Geschwindigkeit beträgt nur 1/8 der gewöhnlichen Schleife. Daher können Sie die entsprechende Schleifenmethode gemäß Ihrer Projektsituation auswählen.
Ereignisdelegation
Stellen Sie sich vor, Sie fügen einem Tag auf der Seite ein Ereignis hinzu. Werden wir jedem Tag einen Onclick hinzufügen? Diese Situation kann die Leistung beeinflussen, wenn auf der Seite eine große Anzahl von Elementen vorhanden ist, die an dieselbe Ereignisverarbeitung gebunden sein müssen. Jedes Bindungsereignis erhöht die Belastung auf der Seite oder während des Laufs. Für eine reichhaltige Front-End-Anwendung werden zu viele Bindungen auf einer Seite mit schweren Interaktionen zu viel Speicher erzeugen. Ein einfacher und eleganter Weg ist die Ereignisdelegation. Es handelt sich um einen ereignisbasierten Workflow: Schicht aufnehmen, das Ziel erreichen, Schicht für Schicht aufblasen. Da es einen Blasenmechanismus für Ereignisse gibt, können wir mit Ereignissen aus allen Kinderelementen abwickeln, indem wir Ereignisse an die äußere Schicht binden.
document.getElementById ('Inhalt'). Onclick = Funktion (e) {e = e || Fenster.Event; var target = e.target || e.srcelement; // Wenn es nicht das A -Tag ist, werde ich beenden, wenn (target.nodenmae!Neu streichen und neu ordnen
Nachdem der Browser HTML, CSS und JS heruntergeladen hat, werden zwei Bäume erzeugt: der Dom -Baum und der Rendering -Baum. Wenn sich die geometrischen Eigenschaften von DOM wie die Breite und Höhe von DOM oder Farbe, Position ändern, muss der Browser die geometrischen Eigenschaften des Elements neu berechnen und den Rendering -Baum wieder aufbauen. Dieser Vorgang wird als Neuausrichtung und Umlagerung bezeichnet.
BodyStyle = document.body.style; Bodystyle.Color = rot; BodyStyle.Height = 1000px; bodystyke.width = 100%;
Durch die Änderung der drei Eigenschaften in der obigen Methode wird der Browser dreimal wieder aufnehmen. In einigen Fällen kann die Reduzierung dieser Neuarrangement die Rendering-Leistung des Browsers verbessern. Die empfohlene Methode lautet wie folgt: Es wird nur eine Operation durchgeführt und drei Schritte werden ausgeführt:
BodyStyle = document.body.style; BodyStyle.CSSTEXT 'Farbe: Rot; Höhe: 1000px; Breite: 100%';
JavaScript -Laden
IE8, Firefox3.5 und Chrome2 ermöglichen den erforderlichen Download von JavaScript -Dateien. <Script> blockiert also keine anderen Tag -Downloads. Leider blockiert der JS -Download -Prozess immer noch das Herunterladen anderer Ressourcen, wie z. B. Bilder. Obwohl die neuesten Browser die Leistung verbessern, indem es parallele Downloads zulässt, ist das Skriptsperrungsblockieren immer noch ein Problem. Daher wird empfohlen, alle <Script> -Tags am Ende der <body> -Tags zu platzieren, um die Auswirkungen auf das Rendern der gesamten Seite zu minimieren und Benutzer einen leeren Speicherplatz anzusehen
Hochleistungs-JS-Dateibereitstellung
Da Sie bereits wissen, dass mehrere <Script> -Tags die Geschwindigkeitsrendite der Seite beeinflussen, ist es nicht schwer zu verstehen, dass "die Reduzierung des für die Seitenwiedergabe erforderlichen HTTP" eine klassische Regel für die Geschwindigkeit von Website ist. Durch das Zusammenführen aller JS -Dateien in der Produktumgebung werden daher die Anzahl der Anfragen verringert, wodurch das Rendern der Seitenüberschreitung beschleunigt wird. Neben dem Zusammenführen von JS -Dateien können wir auch JS -Dateien komprimieren. Komprimierung bezieht sich auf das Ausziehen von Teilen einer Datei, die nicht mit dem Lauf zusammenhängen. Der abgespeckte Inhalt enthält Whitespace -Charaktere und Kommentare. Der Änderungsprozess kann die Dateigröße normalerweise um die Hälfte reduzieren. Es gibt auch einige Komprimierungswerkzeuge, die die Länge lokaler Variablen verringern, z. B.:
var myname = "foo" + "bar"; // Nach der Komprimierung wird es var a = "foobar";
Cache JS -Dateien
Durch das Caching -HTTP -Komponenten können die Benutzererfahrung von Website -Rückgabebieten erheblich verbessern. Der Webserver verwendet den "Ablauf des HTTP -Antwortheaders", um dem Client mitzuteilen, wie lange eine Ressource zwischengespeichert werden sollte. Natürlich hat Cache auch seine eigenen Fehler: Wenn die Anwendung aktualisiert wird, müssen Sie sicherstellen, dass der Benutzer den neuesten statischen Inhalt herunterlädt. Dieses Problem kann gelöst werden, indem der Dateiname der statischen Ressource geändert wird. Möglicherweise sehen Sie die Browser-Referenz JSapplication-20151123201212.js in der Produktumgebung. Dies soll die neue JS -Datei in einem Zeitstempel speichern und damit das Problem des nicht aktualisierten Cache löst.
Zusammenfassen
Natürlich geht es bei effizienten JS nicht nur um diese Dinge, die verbessert werden können. Wenn einige Leistungsverluste reduziert werden können, können wir JavaScript verwenden, um sich effizienter zu entwickeln.