10 JavaScript-Tipps und Tricks zur Leistungsoptimierung

JavaScript ist für die Webentwicklung unerlässlich. Die Sprache steht hinter den meisten Interaktivitäten und Animationen, die Sie auf Websites sehen werden. Aber JavaScript kann auch dazu führen, dass eine Website langsamer wird, wenn der Code schlecht geschrieben ist. Ineffizienzen können sowohl zu schlechten Ladezeiten als auch zu einer langsamen Rendergeschwindigkeit führen.

Wenden Sie die folgenden Vorgehensweisen an, um die Geschwindigkeit und Leistung Ihrer Website zu verbessern.

1. Variablen lokal definieren

Als Programmierer müssen Sie es wissen wie scoping funktioniert. Es gibt zwei Arten von Variablen in JavaScript: lokale Variablen und globale Variablen.

Lokale Variablen sind innerhalb eines Funktionsbausteins deklarierte Variablen. Der Gültigkeitsbereich bleibt nur innerhalb der Funktion, in der sie deklariert sind. Globale Variablen sind Variablen, auf die im gesamten Skript zugegriffen werden kann. Bei globalen Variablen bleibt der Gültigkeitsbereich im gesamten Programm bestehen.

Immer wenn Sie versuchen, auf eine Variable zuzugreifen, führt der Browser eine sogenannte Bereichssuche durch. Es prüft den nächstgelegenen Gültigkeitsbereich für die Variable und sucht weiter nach oben, bis es die Variable findet. Je mehr Bereichskette Sie also in Ihrem Programm haben, desto länger dauert es, auf Variablen zuzugreifen, die über den aktuellen Bereich hinausgehen.

Aus diesem Grund ist es am besten, Ihre Variablen immer näher am Ausführungskontext zu definieren. Verwenden Sie globale Variablen nur in seltenen Fällen; wenn Sie beispielsweise Daten speichern möchten, die im gesamten Skript verwendet werden. Dadurch wird die Anzahl der Bereiche in Ihrem Programm reduziert und die Leistung verbessert.

2. Laden Sie JavaScript asynchron

JavaScript ist eine Singlethread-Programmiersprache. Dies bedeutet, dass eine einmal ausgeführte Funktion bis zum Ende ausgeführt werden muss, bevor eine andere Funktion ausgeführt werden kann. Diese Architektur kann zu Situationen führen, in denen Code den Thread blockieren und die App einfrieren kann.

Damit der Thread gut funktioniert, sollten Sie bestimmte zeitraubende Aufgaben asynchron ausführen. Wenn eine Aufgabe asynchron ausgeführt wird, beansprucht sie nicht die gesamte Verarbeitungsleistung des Threads. Stattdessen tritt die Funktion einer Ereigniswarteschlange bei, wo sie nach der Ausführung aller anderen Codes ausgelöst wird.

API-Aufrufe eignen sich perfekt für das asynchrone Muster, da ihre Auflösung einige Zeit in Anspruch nimmt. Anstatt also den Thread aufzuhalten, würden Sie eine Promise-basierte Bibliothek wie die Abruf-API verwenden, um die Daten asynchron abzurufen. Auf diese Weise kann anderer Code ausgeführt werden, während der Browser Daten von der API abruft.

Verstehen Sie die Feinheiten der asynchronen Programmierung und verbessern Sie die Leistung Ihrer Anwendung.

3. Vermeiden Sie unnötige Schleifen

Verwendung von Schleifen in JavaScript kann teuer werden, wenn man nicht aufpasst. Das Durchlaufen einer Sammlung von Elementen kann den Browser stark belasten.

Während Sie Schleifen in Ihrem Code definitiv nicht vermeiden können, müssen Sie so wenig Arbeit wie möglich darin tun. Sie können andere Techniken verwenden, die die Notwendigkeit vermeiden, die Sammlung zu durchlaufen.

Beispielsweise können Sie die Länge eines Arrays in einer anderen Variablen speichern, anstatt sie bei jeder Iteration der Schleife zu lesen. Wenn Sie aus einer Schleife bekommen, was Sie wollen, brechen Sie sofort aus ihr aus.

4. JavaScript-Code minimieren

Die Minifizierung ist eine effektive Methode zur Optimierung von JavaScript-Code. Ein Minimierer wandelt Ihren rohen Quellcode in eine kleinere Produktionsdatei um. Sie entfernen Kommentare, kürzen unnötige Syntax und kürzen lange Variablennamen. Sie entfernen auch ungenutzten Code und optimieren vorhandene Funktionen, um weniger Zeilen zu beanspruchen.

Beispiele für Minimierer sind Google Closure Compiler, UglifyJS und Microsoft AJAX-Minifier. Sie können Ihren Code auch manuell minimieren, indem Sie ihn untersuchen und nach Möglichkeiten suchen, ihn zu optimieren. Zum Beispiel können Sie Vereinfachen Sie die if-Anweisungen in Ihrem Code.

5. Komprimieren Sie große Dateien mit Gzip

Die meisten Kunden Verwenden Sie Gzip zum Komprimieren und Dekomprimieren große JavaScript-Dateien. Wenn ein Browser eine Ressource anfordert, kann der Server sie komprimieren, um eine kleinere Datei in der Antwort zurückzugeben. Wenn der Client die Datei empfängt, dekomprimiert er sie. Insgesamt spart dieser Ansatz Bandbreite und reduziert die Latenz, wodurch die Anwendungsleistung verbessert wird.

6. Minimieren Sie den DOM-Zugriff

Der Zugriff auf das DOM kann die Leistung Ihrer Anwendung beeinträchtigen, da der Browser bei jedem DOM-Update aktualisiert werden muss. Es ist am besten, den DOM-Zugriff auf die geringstmögliche Häufigkeit zu beschränken. Eine Möglichkeit, dies zu tun, besteht darin, Verweise auf Browserobjekte zu speichern.

Sie können auch eine Bibliothek wie React verwenden, die Änderungen am virtuellen DOM vornimmt, bevor sie an das reale DOM übertragen werden. Infolgedessen aktualisiert der Browser die Teile der Anwendung, die aktualisiert werden müssen, anstatt die gesamte Seite zu aktualisieren.

7. Verzögern Sie unnötiges Laden von JavaScript

Während es wichtig ist, dass Ihre Seite rechtzeitig geladen wird, müssen nicht alle Funktionen beim anfänglichen Laden funktionieren. Angenommen, Sie haben eine anklickbare Schaltfläche und ein Registerkartenmenü, die auf JavaScript-Code verweisen. Sie können beide verschieben, bis die Seite geladen ist.

Diese Methode setzt Rechenleistung frei, sodass Sie die erforderlichen Seitenelemente rechtzeitig rendern können. Sie verzögern das Kompilieren von Code, der die anfängliche Anzeige der Seite enthalten könnte. Sobald die Seite fertig geladen ist, können Sie mit dem Laden der Funktionalitäten beginnen. Auf diese Weise kann der Benutzer eine schnelle Ladezeit genießen und rechtzeitig mit der Interaktion mit den Elementen beginnen.

Sie können auch die kleinste Menge an CSS und JavaScript in Ihr Head-Element einfügen, damit es sofort geladen wird. Sekundärcode kann dann in separaten .css- und .js-Dateien gespeichert werden. Diese Technik erfordert ein anständiges Wissen wie das DOM funktioniert.

8. Verwenden Sie ein CDN, um JavaScript zu laden

Die Verwendung eines Content-Delivery-Netzwerks hilft, die Ladezeit von Seiten zu verkürzen, ist aber nicht immer effektiv. Wenn Sie beispielsweise ein CDN ohne lokalen Server im Land eines Besuchers wählen, wird dieser nicht davon profitieren.

Um dieses Problem zu lösen, können Sie Tools verwenden, um mehrere CDNs zu vergleichen und zu entscheiden, welches die beste Leistung für Ihren Anwendungsfall bietet. Um zu erfahren, welches CDN für Ihre Bibliothek am besten geeignet ist, sehen Sie sich die an cdnjs Webseite.

9. Entfernen Sie Speicherlecks

Speicherlecks können sich negativ auf die Leistung einer Anwendung auswirken. Leaks treten auf, wenn die geladene Seite immer mehr Speicher beansprucht.

Ein Beispiel für ein Speicherleck ist, wenn Ihr Browser nach einer langen Sitzung mit der Anwendung langsamer wird.

Sie können die Chrome Developer Tools verwenden, um Speicherlecks in Ihrer Anwendung zu erkennen. Das Tool zeichnet die Zeitleiste auf der Registerkarte Leistung auf. Viele Speicherlecks entstehen durch das Entfernen von DOM-Elementen. Der Garbage Collector gibt Speicher erst frei, wenn alle Variablen, die auf diese Elemente verweisen, außerhalb des Gültigkeitsbereichs liegen.

Tools wie Lighthouse, Google PageSpeed ​​Insights und Chrome können Ihnen helfen, Probleme zu erkennen. Lighthouse prüft auf Zugänglichkeits-, Leistungs- und SEO-Probleme. Google PageSpeed ​​kann Ihnen dabei helfen, JavaScript zu optimieren, um die Leistung Ihrer Anwendung zu verbessern.

Der Chrome-Browser bietet eine Entwicklertools-Funktion, die Sie umschalten können, indem Sie bei Ihrem Schlüsselwort auf F12 klicken. Sie können die Leistungsanalyse verwenden, um das Netzwerk ein- und auszuschalten und den CPU-Verbrauch zu überprüfen. Es überprüft auch andere Metriken, um Probleme aufzudecken, die Ihre Website betreffen.

Als Webentwickler werden Sie viel in Ihrem Webbrowser arbeiten. Die meisten Browser verfügen über eine Reihe von Entwicklertools, die Ihnen bei der Behebung von Website-Problemen helfen. Die Google Chrome Developer Tools-Funktion hat viele Funktionen, die Ihnen helfen.