Dieser Artikel untersucht viele Aspekte, wie die JavaScript-Leistung im sich ständig ändernden JavaScript-Ökosystem optimiert werden kann. Wir werden dem Prinzip von "Tools, nicht Regeln" folgen und versuchen, zu viel JavaScript -Jargon zu vermeiden. Aufgrund des begrenzten Raums können alle Aspekte der JavaScript -Leistungsoptimierung nicht behandelt werden, lesen Sie unbedingt den Referenzlink und tauchen Sie selbst ein.
Bevor wir uns mit den Details befassen, verstehen wir diese Frage zunächst aus makroigeren Sicht: Was ist ein Hochleistungs-JavaScript und wie passt sie in eine breitere Web-Leistungsmetrik?
Schlüsselpunkte
Hintergrundeinstellungen
Zuallererst müssen wir klar sein: Wenn Sie nur auf Desktops testen, schließen Sie mehr als 50% der Benutzer aus.
Dieser Trend wird sich nur weiterentwickeln, wenn sich aufstrebende Marktnutzer in erster Linie über Android -Geräte unter 100 US -Dollar auf das Internet zugreifen. Die Ära von Desktops als Hauptgerät für den Zugriff auf das Internet ist beendet, und die nächste Stapel von einer Milliarde Internetnutzern zugreifen hauptsächlich über mobile Geräte auf Ihre Website.
Tests im Gerätemodus mit Chrome Devtools ist kein Ersatz für Tests auf realen Geräten. Die Verwendung von CPU- und Netzwerkstrombeschränkungen hilft, ist jedoch im Wesentlichen unterschiedlich. Bitte testen Sie es auf echten Geräten.
Selbst wenn Sie auf einem echten mobilen Gerät testen, können Sie möglicherweise mit Ihrem brandneuen Flaggschiff -Telefon von 600 US -Dollar testen. Das Problem ist, dass dies nicht das Gerät ist, das Ihre Benutzer haben. Das mittlere Gerät ähnelt dem Moto G1 - einem Gerät mit weniger als 1 GB Speicher, sehr schwacher CPU und GPU.
Schauen wir uns an, wie es funktioniert, wenn durchschnittliche JS -Pakete analysiert werden. 
Addy Osmani: Durchschnittliche Zeit für JS -Parsen und -bewertung.
oh nein. Während dieses Bild nur die Parsing- und Kompilierungszeit von JS (mehr dazu später) als die Gesamtleistung abdeckt, ist es eng mit der Gesamtleistung verbunden und kann als Metrik für die Gesamtleistung JS verwendet werden.
zitierte Bruce Lawson: "Dies ist das World Wide Web, nicht das wohlhabende westliche Web." Daher ist Ihr Web -Leistungsziel ein Gerät, das etwa 25 -mal langsamer ist als Ihr MacBook oder iPhone. Denken Sie sorgfältig darüber nach. Aber es ist noch schlimmer. Mal sehen, was unsere tatsächlichen Ziele sind.
Was ist ein Hochleistungs-JS-Code?
Jetzt, wo wir die Zielplattform kennen, können wir die nächste Frage beantworten: Was ist Hochleistungs- JS-Code?
Während es keine absolute Klassifizierung gibt, um Hochleistungscode zu definieren, haben wir ein benutzerzentriertes Leistungsmodell, das als Referenz verwendet werden kann: das Schienenmodell.
sam saccone: Leistungsplanung: PRPL
Wenn Ihre App auf Benutzeraktionen innerhalb von 100 Millisekunden reagiert, wird der Benutzer die Antwort als sofort betrachten. Dies eignet sich für klickbare Elemente, jedoch nicht für Scrollen oder Ziehen.
Auf einem 60 -Hz -Display möchten wir während der Animation und Scrollen eine konstante Bildrate von 60 Bildern pro Sekunde erreichen. Dies bedeutet, dass es ungefähr 16 Millisekunden pro Rahmen gibt. In diesem Budget von 16 Millisekunde haben Sie tatsächlich nur 8-10 Millisekunden, um die gesamte Arbeit zu erledigen. Der Rest der Zeit wird von den internen Mechanismen und anderen Unterschieden des Browsers übernommen.
Wenn Sie eine teure und kontinuierliche laufende Aufgabe haben, teilen Sie sie sicher, dass Sie sie in kleinere Stücke teilen, damit der Haupt -Thread auf die Benutzereingabe reagieren kann. Sie sollten keine Aufgabe haben, die die Benutzereingabe um mehr als 50 Millisekunden verzögert.
Sie sollten die Ladezeit der Seite auf weniger als 1000 Millisekunden steuern. Nach dieser Zeit fühlen sich Ihre Benutzer ungeduldig an. Dies ist ein ziemlich schwieriges Ziel, dass die Seite interaktiv ist, nicht nur auf den Bildschirm und scrollbar. Tatsächlich ist die Zeit kürzer:
standardmäßig schnell: moderne Best Practices (2017 Chrome Dev Summit)
In der Tat beträgt das Ziel 5 Sekunden Interaktionszeit. Dies ist die Metrik, die Chrome in seinem Leuchtturm -Audit verwendet.
Da wir die Indikatoren kennen, schauen wir uns einige Statistiken an:
und weitere Informationen von Addy Osmani:
Fühlen Sie sich depressiv genug? sehr gut. Lassen Sie uns beginnen und das Web beheben. ✊
Kontext ist entscheidend
Sie haben möglicherweise festgestellt, dass der Hauptgutball die Zeit ist, die zum Laden der Website benötigt wird. Insbesondere handelt es sich um die JavaScript -Download-, Parsen-, Kompilierungs- und Ausführungszeit. Es gibt nichts anderes zu tun, außer weniger JavaScript -Code zu laden und intelligenter zu laden.
Aber was ist mit der Arbeit, die Ihr Code tatsächlich ausführt, abgesehen von der Start der Website? Dort muss es einige Leistungsverbesserungen geben, oder?
Bevor Sie sich in den Code graben, sollten Sie überlegen, was Sie aufbauen. Bauen Sie einen Framework oder eine VDOM -Bibliothek auf? Benötigt Ihr Code Tausende von Operationen pro Sekunde? Schreiben Sie eine zeitkritische Bibliothek für die Verarbeitung von Benutzereingaben und/oder Animationen? Wenn nicht, müssen Sie möglicherweise Ihre Zeit und Energie an einen effektiveren Ort verschieben.
Dies bedeutet nicht, dass das Schreiben von Hochleistungscode nicht wichtig ist, sondern dass er normalerweise nur geringe Auswirkungen auf die Gesamtsituation hat, insbesondere wenn es um Mikrooptimierung geht. Bevor Sie sich über .map gegen .foreach gegen Schleifen auf Stapelüberlauf und den Vergleich der Ergebnisse auf JSPERF.com streiten, stellen Sie sicher, dass Sie den Wald sehen, nicht nur die Bäume. Auf dem Papier klingen 50K OPS/s möglicherweise 50 -mal besser als 1k Ops/s, aber in den meisten Fällen macht es keinen Unterschied.
Analyse, Kompilierung und Ausführung
Grundsätzlich ist das Problem bei den meisten nicht hohen Leistung JS nicht der laufende Code selbst, sondern alle Schritte, die vor dem Ausführen des Codes ausführen müssen. Wir sprechen hier über die Ebene der Abstraktion. Die CPU in Ihrem Computer führt den Maschinencode aus. Der größte Teil des auf Ihrem Computer ausgeführten Codes befindet sich in einem kompilierten Binärformat. (Denken Sie heute über alle Elektronenanwendungen nach, ich spreche von Code nicht
Programme.) Dies bedeutet, dass es mit Ausnahme aller Abstraktionen auf OS-Ebene in Ihnen nativ auf der Hardware ausgeführt wird ohne Vorbereitung. JavaScript ist nicht vorkompiliert. Es kommt in Ihrem Browser in Form von lesbarem Code an und ist in jeder Hinsicht das "Betriebssystem" Ihres JS -Programms. Der Code muss zuerst analysiert werden - dh lesen und in eine Struktur konvertiert werden, die vom Computer zur Kompilierung indiziert werden kann. Kompilieren Sie es dann in Bytecode und schließlich in den Maschinencode, bevor es von Ihrem Gerät/Browser ausgeführt werden kann.
Eine weitere sehr wichtige Sache zu erwähnen ist, dass JavaScript ein einzelner Thread ist und auf dem Hauptfaden des Browsers ausgeführt wird. Dies bedeutet, dass jeweils nur ein Prozess ausgeführt werden kann. Wenn Ihre Devtools Performance Timeline voller gelber Peaks ist, die Ihre CPU auf 100%laufen lassen, werden Sie auf lange/abgelegene Rahmen, stotternde Scrollen und alle möglichen anderen nervigen Dinge stoßen.
Paul Lewis: Wenn alles zählt, ist nichts zählt! .
Bevor Ihr JS funktioniert, müssen Sie das alles tun. In Chrome's V8 Engine machen analysiert und zusammengestellt bis zu 50% der gesamten JS -Ausführungszeit.
Addy Osmani: JavaScript Startup -Leistung.
Zwei Dinge, an die Sie sich aus diesem Abschnitt erinnern sollten:
Obwohl es nicht unbedingt linear ist, ist die JS -Parsingzeit proportional zur Paketgröße. Je kleiner die Menge an JS -Code ist, desto besser.
Was Sie jedoch tun können, ist es jedoch, die Verwendung von JS -Animations -Frameworks für alles zu vermeiden und zu verstehen, was Zeichnung und Layout auslöst. Diese Bibliotheken werden nur verwendet, wenn regelmäßige CSS -Übergänge und Animationen absolut unmöglich sind, Animationen zu implementieren.
Auch wenn sie CSS -Übergänge, synthetische Eigenschaften und RequestAnimationFrame () verwenden, werden sie immer noch in JS im Hauptfaden ausgeführt. Grundsätzlich schlagen sie alle 16 Millisekunden mit Inline -Stil mit Ihrem Dom nur, weil es fast nichts anderes zu tun gibt. Um die Animation reibungslos zu halten, müssen Sie sicherstellen, dass alle JS innerhalb von 8 Millisekunden pro Rahmen ausgeführt werden können.
CSS -Animationen und -übergänge hingegen aus dem Hauptfaden laufen - wenn sie effizient implementiert sind, laufen Sie auf der GPU ohne Relayout/Repaint.
In Anbetracht der Tatsache, dass die meisten Animationen während des Ladens oder der Benutzerinteraktion ausgeführt werden, kann dies Ihrer Webanwendung dringend benötigter Atemraum bieten.
Webanimationen-API ist ein bevorstehendes Feature-Set, mit dem Sie Hochleistungs-JS-Animationen außerhalb des Hauptthreads durchführen können. Bleiben Sie jedoch für den Moment bei Technologien wie CSS-Übergängen und Flip.
Die Rückgröße ist entscheidend
Jetzt dreht sich alles um Packen. Bower und am Ende
Dutzende von Markierungen vor Markierungen Die Ära der Markierungen sind vergangen.
Jetzt geht es darum, alle glänzenden neuen Spielzeuge zu installieren, die Sie auf NPM finden, sie mit Webpack in eine riesige 1 -MB -JS -Datei bündeln und im Browser Ihres Benutzers Langsamkeit verursachen und gleichzeitig ihren Datenplan einschränken.
Versuchen Sie, die Menge an JS -Code zu reduzieren. Ihr Projekt benötigt möglicherweise nicht die gesamte Lodash -Bibliothek. Müssen Sie unbedingt JS Framework verwenden? Wenn ja, haben Sie überlegt, andere Frameworks als React wie Preact oder HyperHTML zu verwenden, die weniger als 1/20 React sind? Benötigen Sie Tweenmax, um Scrollen zur Top -Animation zu implementieren? Die Bequemlichkeit des Isolierens von Komponenten in NPM und Frameworks bringt einen Nachteil: Die erste Möglichkeit für Entwickler, Probleme zu lösen, wird mehr JavaScript -Code hinzugefügt. Alles sieht aus wie ein Nagel, wenn Sie nur einen Hammer haben. Versuchen Sie nach dem Abschluss von Unkraut und der Reduzierung der Menge des JS -Codes, es intelligent mehr zu liefern. Liefern Sie das, was Sie brauchen, wenn Sie benötigt werden.
WebPack 3 hat erstaunliche -Funktionen, die als Code -Segmentierung und dynamischer Import bezeichnet werden. Anstatt alle JS -Module in ein einzelnes App.js -Paket zu bündeln, kann er den Code automatisch mit der Import () -Syntax () trennen und asynchron laden.
Sie müssen auch keine Frameworks, Komponenten und Client -Routing verwenden, um die Vorteile zu erhalten. Angenommen, Sie haben einen komplexen Code, der Ihr .mega-Widget unterstützt, das sich auf einer beliebigen Anzahl von Seiten befindet. Sie müssen nur Folgendes in der Hauptdatei JS -Datei schreiben:
Wenn Ihre App das Widget auf der Seite findet, wird der erforderliche Hilfscode dynamisch geladen. Ansonsten ist alles normal.Darüber hinaus benötigt WebPack seine eigene Laufzeit, um zu arbeiten, und es gibt es in alle von ihm generierenden .js -Dateien. Wenn Sie das CommonChunks -Plugin verwenden, können Sie die Laufzeit mit der folgenden Methode in seinen eigenen Block extrahieren:
if (document.querySelector('.mega-widget')) {
import('./mega-widget');
}Es streift die Laufzeit von allen anderen Blöcken in eine eigene Datei, in diesem Fall runTime.js. Stellen Sie einfach sicher, dass es vor dem Haupt -JS -Paket geladen wird. Zum Beispiel:
new webpack.optimize.CommonsChunkPlugin({
name: 'runtime',
}),Abgesehen davon verwenden Sie möglicherweise auch das Babel-Polyfill-Paket und das Whatwg-Fetch, um fehlende Funktionen in älteren Browsern zu patchen. Wenn Sie dann Code mit Async/Awed schreiben, müssen Sie auch einen Generator verwenden, um ihn zu Regenerator-Runtime zu übersetzen…
<🎜> <🎜>
Der Schlüssel ist, dass Sie dem JS -Paket fast 100 Kilobyten Daten hinzufügen, was nicht nur in der Dateigröße, sondern auch in der Analyse- und Ausführungskosten enorm ist, um ältere Browser zu unterstützen.
Es ist jedoch keinen Sinn, Benutzer zu bestrafen, die moderne Browser verwenden. Eine Methode, die ich verwende und eine in diesem Beitrag eingeführte Philip Walton besteht darin, zwei separate Pakete zu erstellen und bedingt zu laden. Babel verwendet Babel-Preset-Env, um dies leicht zu tun. Sie haben beispielsweise ein Paket, das den IE 11 und ein anderes Paket unterstützt, das keine Polyfill für die neueste Version der modernen Browser enthält.
Ein ineffizienter, aber effektiver Weg ist es, Folgendes in ein Inline -Skript zu setzen:
if (document.querySelector('.mega-widget')) {
import('./mega-widget');
}Wenn der Browser die asynchrone Funktion nicht bewerten kann, gehen wir davon aus, dass es sich um einen alten Browser handelt, und liefern nur das Paket, das die Polyfill enthält. Andernfalls erhalten Benutzer eine einfache und moderne Version.
Schlussfolgerung
Wir hoffen, dass Sie aus diesem Artikel erhalten, dass JavaScript viel Leistung verbraucht und mit Vorsicht verwendet werden sollte.
Stellen Sie sicher, dass Sie die Website der Website in Low-End-Geräten und realen Netzwerkumgebungen testen. Ihre Website sollte so schnell wie möglich geladen und interagieren. Dies bedeutet, die Menge des JS -Codes zu verringern und das Laden so schnell wie möglich zu beschleunigen. Ihr Code sollte immer komprimiert, in kleinere, einfacher zu verwalten und paketen einfacher zu verwalten und nach Möglichkeit asynchron zu laden. Stellen Sie auf der Serverseite sicher, dass HTTP/2 für schnellere parallele Übertragungen aktiviert ist, und verwenden Sie die Gzip/Brotli -Komprimierung, um die JS -Übertragungsgröße erheblich zu reduzieren.
Apropos, ich möchte es mit dem folgenden Tweet beenden:
Ich muss viel Anstrengungen unternehmen, um dies zu erreichen. Aber im Ernst, Freunde, es ist Zeit, Ihr Framework aufzugeben und zu sehen, wie schnell der Browser sein kann.
- Alex Russell (@SlightlyLate) 15. September 2016
FAQs über die JavaScript -Leistung Optimierung
JavaScript -Leistungsprobleme beruhen häufig auf ineffiziente Codierungspraktiken. Dies können übermäßige DOM -Operationen, Speicherlecks und unnötige Berechnungen umfassen. Um diese Probleme zu vermeiden, ist es wichtig zu verstehen, wie JavaScript funktioniert und effiziente Codierungspraktiken anwendet. Begrenzen Sie beispielsweise die Verwendung globaler Variablen, verwenden Sie Ereignisdelegierte, um Ereignisse effizient zu behandeln, und vermeiden Sie es mit () () und eval (), da sie Leistungsprobleme verursachen können.
Loops sind häufige Merkmale in JavaScript, können aber auch die Quelle von Leistungsproblemen sein, wenn sie nicht korrekt optimiert werden. Eine Möglichkeit, eine Schleife zu optimieren, besteht darin, die Arbeiten innerhalb der Schleife zu minimieren. Berechnen Sie sie beispielsweise in jeder Iteration, anstatt die Länge des Arrays in jeder Iteration zu berechnen, bevor die Schleife beginnt. Eine andere Möglichkeit besteht darin, die effizienteste Schleife entsprechend Ihren Anforderungen zu verwenden. Zum Beispiel kann die foreach () -Methode langsamer als die traditionelle für die Schleife sein.
Erhöhung ist ein Mechanismus in JavaScript, bei dem Variablen und Funktionserklärungen während der Zusammenstellungsphase auf die Spitze des eingeschlossenen Umfangs verschoben werden. Wenn dies nicht richtig verstanden wird, kann dies zu unerwartetem Verhalten und potenziellen Leistungsproblemen führen. Wenn beispielsweise eine große Menge an Daten angehoben wird, aber nicht sofort verwendet wird, kann die Werbung zu unnötiger Speicherverwendung führen. Das Verständnis der Höhe und Verwendung von LET und const anstelle von VAR kann helfen, diese Probleme zu lindern.
Wenn kein Speicher mehr benötigt wird, tritt ein Speicherleck auf, was dazu führt, dass die Leistung im Laufe der Zeit abnimmt. Häufige Ursachen für Speicherlecks in JavaScript umfassen vergessene Timer oder Rückrufe, separate DOM -Elemente und globale Variablen. Um Speicherlecks zu verhindern, stellen Sie sicher, dass Sie Intervalle und Zeitüberschreitungen löschen, Ereignishörer löschen, wenn sie nicht mehr benötigt werden, und vermeiden Sie nach Möglichkeit globale Variablen.
JavaScript bietet eine Vielzahl integrierter Tools für die Leistungsanalyse und -optimierung. Mit der Performance -API können Sie die Zeit, die für verschiedene Teile Ihres Codes aufgewendet wird, messen und dabei helfen, Engpässe zu identifizieren. Mit der Speicher -API können Sie Speicherverbrauch verfolgen und mögliche Lecks identifizieren. Darüber hinaus bieten Browser -Entwickler -Tools häufig Leistungsanalysefunktionen, mit denen Sie Ihren Code optimieren können.
Asynchrones Programmieren ermöglicht es JavaScript, nicht blockierende Vorgänge durchzuführen und die Leistung zu verbessern, indem anderer Code ausgeführt wird, während der asynchrone Betrieb abgeschlossen ist. Eine falsche Verwendung der asynchronen Programmierung kann jedoch zu Leistungsproblemen führen. Beispielsweise kann die Verwendung von zu vielen Versprechen oder Rückrufen zu "Callback -Hölle" und zur Leistungsverschlechterung führen. Das Erlernen der korrekten Verwendung von Async/Warten, Versprechen und Rückrufen kann dazu beitragen, Ihren asynchronen Code zu optimieren.
Optimierung von JavaScript für mobile Geräte erfordert die Berücksichtigung von Faktoren wie begrenzte CPU -Funktionen und Netzwerklatenz. Zu den Techniken für die mobile Optimierung gehört die Minimierung der Menge an JavaScript-Code, die über das Netzwerk gesendet wird, mit effizienten Codierungspraktiken zur Reduzierung der CPU-Nutzung und die Verwendung progressiver Verbesserungen, um sicherzustellen, dass Ihre Website auch auf Geräten mit geringer Leistung ordnungsgemäß funktioniert.
Komprimierung und Komprimierung verringern die Größe von JavaScript -Dateien, wodurch Downloads beschleunigt und die Leistung verbessert wird. Durch die Komprimierung werden unnötige Zeichen wie Leerzeichen und Kommentare gelöscht, während die Komprimierung die Kodierung von Daten in einem effizienteren Format beinhaltet. Beide Technologien können die Ladegeschwindigkeiten der Website erheblich verbessern, insbesondere für Benutzer mit langsameren Netzwerken.
RequestAnimationFrame können Sie eine Animationsfunktion vor dem nächsten Repaint des Browsers aufrufen und eine reibungslose Animation erstellen. Dies kann zu effizienteren Animationen führen als die Verwendung von SetInterval oder SetTimeOut, da der Browser Animationen basierend auf dem aktuellen Gerät und den Ladebedingungen optimieren kann.
Web Workers können Sie JavaScript in einem separaten Thread im Hintergrund ausführen, ohne den Haupt -Thread zu blockieren. Dies ist nützlich, um rechenintensive Aufgaben auszuführen, ohne die Benutzeroberfläche zu verlangsamen. Webarbeiter haben jedoch einige Einschränkungen und Kosten, wie z.
Das obige ist der detaillierte Inhalt vonTipps zum JavaScript -Leistungsoptimierungsoptimierung: Ein Überblick. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
Ist Code Red ein Computervirus?
Was ist eine unabhängige Direktverbindung?
Verwendung von PathFileExists
Was ist die normale Temperatur eines Laptops?
Häufig verwendete Linux-Befehle
Kann pagefile.sys gelöscht werden?
Benennen Sie die APK-Software um
Einführung in alle Verwendungsmöglichkeiten von Python
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
