12 Tipps zur Verbesserung der Leistung von JavaScript-Anwendungen

Die Leistung ist eines der wichtigsten Probleme für Webentwickler oder Webanwendungen. Niemand wird mit einer Anwendung oder einer Seite zufrieden sein, die seit Ewigkeiten geladen wird und die durch übermäßiges Laden abstürzt. Website-Benutzer sind nicht bereit, zu lange auf ihre Downloads zu warten oder ihre Seiten in einen funktionsfähigen Zustand zu versetzen. Laut Kissmetrics erwarten 47% der Besucher, dass eine Website in weniger als 2 Sekunden geladen wird. 40% der Besucher verlassen die Website, wenn das Laden länger als 3 Sekunden dauert.



Der Autor des Materials, dessen Übersetzung wir heute veröffentlichen, sagt, dass unter Berücksichtigung der obigen Zahlen klar wird, dass sich Webentwickler immer an die Leistung erinnern sollten. Hier sind 12 Tipps zur Verbesserung der Leistung von JS-Projekten.

1. Verwenden Sie Browser-Caching-Mechanismen

Es gibt zwei Möglichkeiten, Daten mithilfe von Browsern zwischenzuspeichern. Die erste ist die Verwendung der Cache-JavaScript-JavaScript-API, die von Servicemitarbeitern verwaltet wird. Der zweite ist ein regulärer HTTP-Cache.

Skripte werden häufig verwendet, um den Zugriff auf bestimmte Objekte zu organisieren. Wenn Sie einen Verweis auf ein Objekt speichern, auf das Sie häufig in einer Variablen zugreifen müssen, und wenn Sie diese Variable auch in wiederholten Vorgängen verwenden, die Zugriff auf das Objekt erfordern, können Sie die Codeleistung verbessern.

2. Optimieren Sie den Code für die Umgebungen, in denen er ausgeführt wird

Um die am Programm vorgenommenen Verbesserungen angemessen bewerten zu können, wird empfohlen, eine Reihe von Umgebungen zu bilden, in denen Messungen durchgeführt werden können.

In der Praxis können Sie beispielsweise nicht in allen vorhandenen Versionen von JS-Engines eine Untersuchung der Codeleistung durchführen und den Code für alle Umgebungen optimieren, in denen er ausgeführt werden kann. Es sollte jedoch beachtet werden, dass das Testen von Code in einer Umgebung auch nicht die beste Vorgehensweise ist. Ein solcher Ansatz kann zu verzerrten Ergebnissen führen. Daher ist es wichtig, eine Reihe von Umgebungen zu erstellen, in denen der Code höchstwahrscheinlich ausgeführt wird, und Projekte in diesen Umgebungen zu testen.

3. Entfernen Sie nicht verwendeten JS-Code

Durch das Entfernen von nicht verwendetem Code aus einem Projekt wird nicht nur die Ladezeit des Browsers für Skripte verbessert, sondern auch die Zeit, die Browser zum Analysieren und Kompilieren des Codes benötigen. Um nicht verwendeten Code zu entfernen, sollten Sie auf die Funktionen des Projekts achten. Wenn Sie also Funktionen finden, mit denen Benutzer nicht arbeiten, sollten Sie sie aus dem Projekt entfernen und gleichzeitig den zugehörigen JS-Code berücksichtigen. Infolgedessen wird die Site schneller geladen und die Vorbereitung auf die Arbeit im Browser ist schneller. Dies wirkt sich positiv auf die Eindrücke aus, die Benutzer mit der Website erleben. Beachten Sie bei der Analyse eines Projekts, dass beispielsweise eine bestimmte Bibliothek, die in seiner Komposition enthalten ist, versehentlich darin enthalten sein kann. Es kann sehr gut nicht darin verwendet werden. Es lohnt sich, es loszuwerden. Gleiches gilt für die Verwendung bestimmter Abhängigkeiten, die das implementieren, was bereits in modernen Browsern implementiert ist. Wenn Sie zu Standard-Browserfunktionen wechseln, die durch diese Abhängigkeit dupliziert wurden, können Sie unnötigen Code entfernen.

4. Speichern Sie Speicher

Es lohnt sich sicherzustellen, dass Webprojekte nur diesen Speicher verwenden, ohne den sie absolut nicht in der Lage sind. Tatsache ist, dass ein Entwickler nicht im Voraus wissen kann, auf wie viel Speicher seine Anwendung auf einem bestimmten Gerät zugreifen kann. Wenn die Anwendung zu Unrecht große Speichermengen verwendet, werden die Speicherverwaltungsmechanismen der Browser-JS-Engine dadurch stärker belastet. Dies gilt insbesondere für den Garbage Collector. Häufige Garbage Collection-Aufrufe verlangsamen Programme. Dies wirkt sich negativ auf die Benutzerfreundlichkeit des Projekts aus.

5. Verwenden Sie verzögerte Lademechanismen für kleinere Skripte

Benutzer möchten, dass Webseiten so schnell wie möglich geladen werden. Es ist jedoch unwahrscheinlich, dass der gesamte JS-Code des Projekts für die Erstanzeige der Seite benötigt wird. Wenn ein Benutzer eine Aktion ausführen muss, um einen bestimmten Code zu aktivieren (z. B. auf ein Element klicken oder zu einer Registerkarte in der Anwendung wechseln), kann das Laden dieses Codes nach Abschluss des ersten Ladens der Seite und der wichtigsten Ressourcen verschoben werden.

Mit diesem Ansatz können Sie vermeiden, dass der Browser zu Beginn eine große Menge an JS-Code lädt und kompiliert, dh die Seitenausgabe verlangsamt, die durch die Notwendigkeit verursacht wird, diese Vorgänge auszuführen. Nachdem der Download aller wichtigen Daten abgeschlossen ist, können Sie mit dem Herunterladen von zusätzlichem Code beginnen. Wenn der Benutzer diesen Code benötigt, steht er ihm daher bereits zur Verfügung. Gemäß dem RAIL- Modell empfiehlt Google, Skriptsitzungen mit verzögertem Laden von etwa 50 ms Dauer auszuführen. Bei diesem Ansatz wirken sich Code-Ladevorgänge nicht auf die Benutzerinteraktion mit der Seite aus.

6. Vermeiden Sie Speicherlecks

Wenn in Ihrer Anwendung ein Speicherverlust auftritt, fordert die geladene Seite immer mehr Speicher vom Browser an. Infolgedessen kann der Speicherverbrauch dieser Seite ein solches Niveau erreichen, dass die Leistung des gesamten Systems beeinträchtigt wird. Sie selbst hatten wahrscheinlich ein ähnliches Problem (und es hat Ihnen wahrscheinlich nicht gefallen). Es ist möglich, dass die Seite, auf der ein Speicherverlust aufgetreten ist, eine Art Bildbetrachter enthält - beispielsweise einen Schieberegler oder ein "Karussell".

Mit den Chrome Developer Tools können Sie Ihre Site auf Speicherlecks analysieren. Dies erfolgt durch Untersuchen der Indikatoren auf der Registerkarte Leistung. In der Regel entstehen Speicherverluste durch DOM-Fragmente, die von der Seite entfernt, aber an einige Variablen gebunden sind. Dies verhindert, dass der Garbage Collector den von den Daten belegten Speicher in unnötigen DOM-Fragmenten löscht.

7. Wenn Sie viel Computerarbeit benötigen, verwenden Sie Web-Worker

Anhand der Materialien der MDN-Ressource können Sie herausfinden, dass Webworker es Ihnen ermöglichen, Code in einem Hintergrundthread auszuführen, der vom Hauptthread der Webanwendung getrennt ist. Der Vorteil dieses Ansatzes besteht darin, dass umfangreiche Berechnungen in einem separaten Thread durchgeführt werden können. Dadurch kann der Hauptthread (normalerweise für die Wartung der Benutzeroberfläche verantwortlich) ausgeführt werden, ohne ihn zu blockieren oder zu verlangsamen.

Mit Web-Workern können Sie Berechnungen durchführen, bei denen der Prozessor intensiv genutzt wird, ohne den Stream der Benutzeroberfläche zu blockieren. Mit dieser Technologie können Sie neue Threads erstellen und ihnen Aufgaben zuweisen, was sich positiv auf die Anwendungsleistung auswirkt. Bei diesem Ansatz blockieren Aufgaben, deren Ausführung lange dauert, nicht die Ausführung anderer Aufgaben. Wenn Sie ähnliche Aufgaben im Hauptthread ausführen, werden andere Aufgaben blockiert.

8. Wenn Sie mehrmals auf das DOM-Element zugreifen, speichern Sie den Link dazu in einer Variablen

Das Abrufen eines Verweises auf ein DOM-Element ist eine langsame Operation. Wenn Sie mehrmals auf ein Element zugreifen, speichern Sie am besten einen Link in einer lokalen Variablen. Hierbei ist jedoch zu beachten, dass Sie den Link aus der Variablen entfernen müssen, wenn das Element, dessen Verknüpfung in der Variablen gespeichert ist, später aus dem DOM entfernt wird. Sie können dies beispielsweise tun, indem Sie null in eine Variable schreiben. Dadurch werden Speicherlecks vermieden.

9. Versuchen Sie, Variablen in demselben Bereich zu deklarieren, in dem sie verwendet werden.

Wenn JavaScript versucht, auf eine Variable zuzugreifen, sucht es zuerst im lokalen Bereich. Wenn es dort nicht angezeigt wird, wird die Suche in dem Bereich fortgesetzt, in den der lokale Bereich eingebettet ist. Dies geschieht, bis die globalen Variablen überprüft werden. Das Speichern von Variablen in lokalen Bereichen beschleunigt den Zugriff auf diese.

Versuchen Sie ohne besondere Notwendigkeit, das Schlüsselwort var beim Deklarieren von Variablen nicht zu verwenden. Verwenden let stattdessen die Schlüsselwörter let und const , um Variablen bzw. Konstanten zu deklarieren. Sie unterscheiden sich im Blockumfang und einigen anderen nützlichen Funktionen. Achten Sie auf die Verwendung von Variablen in Funktionen und stellen Sie sicher, dass die Variablen, auf die Sie innerhalb der Funktion zugreifen, lokal für diese sind. Beachten Sie die Probleme, die die implizite Deklaration globaler Variablen verursachen kann.

10. Versuchen Sie, keine globalen Variablen zu verwenden

Globale Variablen sind während der gesamten Laufzeit des Skripts vorhanden. Lokale Variablen werden zerstört, wenn der lokale Bereich zerstört wird. Daher sollten globale Variablen nur verwendet werden, wenn dies wirklich erforderlich ist.

11. Wenden Sie in JavaScript Code-Optimierungen an, die Sie auf Programme anwenden würden, die in anderen Sprachen geschrieben sind

• Verwenden Sie immer Algorithmen mit möglichst geringem Rechenaufwand und lösen Sie Probleme mit optimalen Datenstrukturen.
• Optimieren Sie die verwendeten Algorithmen, um mit weniger Berechnungen dieselben Ergebnisse zu erzielen.
• Vermeiden Sie rekursive Aufrufe.
• Entwerfen Sie sich wiederholende Computer als Funktionen.
• Vereinfachen Sie mathematische Berechnungen.
• Verwenden Sie Sucharrays anstelle von Switch / Case-Konstrukten.
• Bemühen Sie sich sicherzustellen, dass Bedingungen, die in bedingten Konstruktionen überprüft werden, häufiger echte Werte annehmen. Dies trägt zu einer effizienteren Nutzung der Prozessorfunktionen für die proaktive Ausführung von Anweisungen bei.
• Wenn Sie die Möglichkeit haben, bestimmte Aktionen mit bitweisen Operatoren auszuführen, führen Sie dies aus. Das Durchführen solcher Berechnungen erfordert weniger Prozessorressourcen.

12. Verwenden Sie Tools zur Untersuchung der Anwendungsleistung

Um verschiedene Aspekte von Webprojekten zu untersuchen, kann das Lighthouse-Tool empfohlen werden. Er bewertet die Anwendung anhand der folgenden Indikatoren: Leistung, Progressive Web App, Barrierefreiheit, Best Practices, SEO. Lighthouse gibt nicht nur Noten, sondern auch Empfehlungen zur Verbesserung des Projekts. Ein weiteres Tool zur Produktivitätsanalyse, Google PageSpeed , wurde entwickelt, um Entwicklern dabei zu helfen, ihre Websites zu erkunden und herauszufinden , wie sie sich verbessern können.

Sowohl Lighthouse als auch PageSpeed ​​sind keine perfekten Werkzeuge, aber ihre Verwendung hilft, Probleme zu erkennen, die sich auf den ersten Blick als unsichtbar herausstellen können.

Im Chrome-Menü finden Sie den Befehl, mit dem der Task-Manager geöffnet wird. Es werden Informationen zu Systemressourcen angezeigt, die von geöffneten Browser-Registerkarten verwendet werden. Sie können detailliertere Informationen zu den Vorgängen auf der Seite erhalten, indem Sie die Registerkarte Leistung der Chrome Developer Tools öffnen (andere Browser verfügen über ähnliche Tools). Auf dieser Registerkarte können Sie viele Indikatoren analysieren, die sich auf die Leistung der Website beziehen.


Registerkarte "Leistung" in den Chrome Developer Tools

Während der Erfassung von Informationen zur Seitenleistung mit Chrome können Sie Prozessor- und Netzwerkressourcen konfigurieren, die für Seiten verfügbar sind, sodass Sie Probleme identifizieren und beheben können.


Analyse der Leistung von Chrome-Seiten

Um die Website genauer zu analysieren, können Sie das API-Navigations-Timing verwenden. Damit können Sie verschiedene Indikatoren direkt im Anwendungscode messen.

Wenn Sie serverseitige Projekte mit JavaScript unter Verwendung von Node.js entwickeln, können Sie die NodeSource-Plattform für eine eingehende Analyse Ihrer Anwendungen verwenden. Die von den Tools dieser Plattform durchgeführten Messungen haben nur geringe Auswirkungen auf das Projekt. In der Node.js-Umgebung wie im Browser können viele Probleme auftreten - wie die gleichen Speicherlecks. Die Analyse von Projekten auf der Basis von Node.js hilft, Probleme mit ihrer Leistung zu identifizieren und zu beheben.

Zusammenfassung

Es ist wichtig, ein Gleichgewicht zwischen Codeoptimierung und Lesbarkeit aufrechtzuerhalten. Der Code wird von einem Computer interpretiert, aber die Leute müssen ihn unterstützen. Daher sollte der Code nicht nur für den Computer, sondern auch für den Menschen verständlich sein.

Darüber hinaus ist es hilfreich, sich daran zu erinnern, dass die Leistung immer berücksichtigt werden sollte, aber nicht wichtiger sein sollte, als einen fehlerfreien Betrieb des Codes sicherzustellen und die Funktionen der Anwendungen zu implementieren, die Benutzer benötigen.

Liebe Leser! Wie optimieren Sie Ihre JS-Projekte?