Get best of the week

Was ist die Leistung von Webanwendungen?

Bild

Einige Anwendungen werden schnell geladen, andere langsam, aber aufgrund dessen, was passiert? Ist die Seitenladegeschwindigkeit das einzige Maß für die Anwendungsleistung?

Es wäre sehr schwierig, diese und viele andere Fragen in einem Artikel zu beantworten. Also habe ich einen Katalog mit Links zusammengestellt und in Kategorien unterteilt. Aber für den Anfang - eine kleine Theorie darüber, was Leistung ist und wann Sie darüber nachdenken sollten.

Wenn Leistungsprobleme auftreten


Sie können Webanwendungen jahrelang entwickeln und haben praktisch keine Probleme mit der Anwendungsleistung.

Höchstwahrscheinlich treten jedoch Probleme in den folgenden Situationen auf:

  1. Es werden große Datenmengen angezeigt (Sie müssen große Listen oder Hunderttausende von Punkten auf der Karte rendern).
  2. Die Anwendung wird groß (Hunderte von Benutzerszenarien, Dutzende von Bildschirmen, Formularen usw.).
  3. Eine große Anzahl von Kunden aus verschiedenen Regionen (zum Beispiel mehr als 300.000 Kunden pro Tag aus der ganzen Welt).
  4. Hoher Wettbewerb auf dem Markt (sicher wird der Benutzer die Anwendung Ihres Konkurrenten bevorzugen, wenn sie schneller funktioniert).
  5. Eine mobile Version wird benötigt (Browser auf Mobilgeräten leiden immer noch unter Leistungsproblemen).

Woraus besteht die Leistung?


Weltweit können Leistungsprobleme von Webanwendungen in zwei Kategorien unterteilt werden: Datenübertragung und Laufzeit.

  • Datenübertragung bedeutet das Herunterladen aller Ressourcen, die für die Funktion der Anwendung erforderlich sind.
  • Unter Laufzeit - Anwendungsbetrieb, Rendering und Benutzereingabeverarbeitung.

Jede dieser Kategorien enthält viele Nuancen, über die wir oft nicht nachdenken, die jedoch qualitativ hochwertige Anwendungen von qualitativ minderwertigen unterscheiden.

Hier sind die beliebtesten Leistungsmetriken für Webanwendungen (alle sollten minimal sein):

Laden der Seite



Laufzeit


  • Antwortzeit für Benutzereingaben.
  • Zeit zum erneuten Zeichnen der Schnittstelle.

Obwohl TTFB und TTI beide Metriken für die Leistung beim Laden von Seiten sind, können sich auch Probleme im Zusammenhang mit der Laufzeit auf sie auswirken.

So suchen und analysieren Sie Leistungsprobleme


Das Haupt-Toolkit im Arsenal des Entwicklers sind Chrome DevTools oder ähnliche Tools wie Firebug / Firefox-Entwicklertools .
Es können separate Artikel darüber geschrieben werden, aber wir werden uns auf die wichtigsten Punkte beschränken.

Netzwerk - Mit dieser Option können Sie detailliert analysieren, welche Ressourcen auf der Seite geladen werden, von welchen Ressourcen, mit welcher Geschwindigkeit usw. Dieses Tool wird häufig verwendet, um die Geschwindigkeit beim Laden von Seiten manuell zu analysieren.

Leistung - Auf dieser Registerkarte können Sie die Aufzeichnung von Codeausführungsaufrufen, Eingabe- / Ausgabeoperationen und anderen aktivieren. Darüber hinaus kann die Aufzeichnung mit Emulation des Drosselnetzwerks und der CPU erfolgen. Überprüfen Sie beispielsweise die Anwendung auf schwachen Geräten.

Leuchtturm - Ein in Chrome DevTools integriertes Tool, das das Laden von Seiten startet, Metriken aufzeichnet, analysiert und sogar Empfehlungen zur Leistungsverbesserung gibt.

So messen / überwachen Sie die Leistung


Tools zur Überwachung der Leistung von Webanwendungen können in zwei Kategorien unterteilt werden: Tools zur Durchführung synthetischer Messungen und Tools zur Aufzeichnung von Leistungsdaten von realen Benutzern.


Darüber hinaus gibt es Tools wie den Webpack-Bundle-Analyzer , die diesen beiden Kategorien nicht zugeordnet werden können. Mit ihrer Hilfe können Sie jedoch einige Parameter messen, die sich auf die Leistung auswirken, z. B. die Größe des Bundles.

Datentransfer


TCP-Verbindung, DNS-Suche - Sie können das Laden von Seiten auch aufgrund der korrekten Konfiguration der Verbindungen zum Server beschleunigen. Insbesondere, wenn Sie DNS-Pre-Fetching oder sogar IP-Adressen anstelle von Domain-Namen verwenden.

TTFB (Zeit bis zum ersten Byte) . Die Zeit zum Abrufen des ersten Bytes ist eine wichtige Metrik. Um dies zu beschleunigen, sollten Sie versuchen, so wenig Logik wie möglich auf dem Server zu implementieren, bevor Sie index.html ausgeben.

HTTP1 vs HTTP2 - HTTP2 kann das Laden von Seiten durch Multiplexen oder Komprimieren von Headern erheblich beschleunigen. Darüber hinaus eröffnet ein neues (relativ) Protokoll eine Reihe von Funktionen, z. B. Server-Push.

Domain-Sharding. Wenn Sie viele HTTP-Header für API-Anforderungen senden müssen, jedoch nicht für statische Anforderungen, ist es besser, diese in verschiedene Domänen zu unterteilen.

CDN (Content Delivery Network) beschleunigt das Laden für geografisch verteilte Clients.

Die Ressourcenpriorisierung (Preload, Prefetch, Preconnect) ist die Beschleunigung des Seitenladens aufgrund der richtigen Strategie zum Laden von Ressourcen. Mit Browsern können Sie Prioritäten für verschiedene Arten von Ressourcen festlegen und früher herunterladen, was für das erste Rendern wichtig ist.

Statische Komprimierung: GZIP und Brotli . Brotli ist ein Komprimierungsalgorithmus, der das statische Gewicht reduziert und dementsprechend die Download-Geschwindigkeit erhöht. Und hier ist eine großartige Lösung von meinem Kollegen.

Webp vs Png & Jpg. Webp ist eine großartige Alternative zu Png. Neben dem geringeren Gewicht der Bilder ist die Qualität von Webp nicht minderwertig. Jetzt unterstützt dieses Format ungefähr 78% der Browser . Aber selbst wenn Sie 100% Unterstützung benötigen, können Sie mithilfe des Bild- Tags einen Fallback auf Png implementieren .

Laufzeit


Aufgaben, Mikrotasks . Durch die korrekte Priorisierung der Codeausführung können Sie Friese entfernen und die Reaktion auf Benutzereingaben beschleunigen.

requestIdleCallback ist eine nützliche Funktion, mit der Sie Code in Ihrer Freizeit am Ende des Frames (Frame / Tick) oder wenn der Benutzer inaktiv ist, ausführen können. Es wird helfen, die gleichen Verzögerungen und "Einfrierungen" loszuwerden.

Mit requestAnimationFrame können Sie die Animation richtig planen und die Wahrscheinlichkeit maximieren, 60 Bilder pro Sekunde zu rendern.

ES2015 vs ES5 . ES2015 bietet viele Funktionen, die produktiver sind als ES5.

Dom Manipulation. Manipulationen mit dem DOM sind teuer, Sie müssen sie sorgfältig und sinnvoll durchführen. Rufen Sie beispielsweise querySelector () nicht in einer Schleife auf, wenn dies mit einem einzelnen Aufruf möglich ist.

Blockierungsressource rendern . Das Laden einiger Ressourcen kann das Rendern blockieren. Um dies zu vermeiden, müssen Sie die Attribute Defer, Async, Preload verwenden.

60 FPS durch Zeigerereignisse: Keiner ist ein großartiger Hack, mit dem Sie 60 FPS durch Scrollen der Seite erreichen können. Es funktioniert ganz einfach: Alle Maus-Ereignishandler sind beim Scrollen deaktiviert.

Passiver Ereignis-Listener- eine Möglichkeit, die Seite auf Touchscreens reibungslos scrollen zu lassen. Kurz gesagt, der Browser verfügt über eine unvollständige Flussverarbeitung für Hörer von Berührungsereignissen. Wenn Sie beim Erstellen des Ereignishandlers den passiven Parameter festlegen, wird dem Browser klar sein, dass der Handler das Scrollen und Rendern nicht abbricht, ohne auf den Abschluss zu warten.

Virtuelles Scrollen ist eine clevere Methode, um große Listen nicht zu rendern, sondern beim Scrollen zu generieren. Ermöglicht es Ihnen, weniger Speicher zu verbrauchen und das Scrollen von Listen zu vereinfachen.

Vermeiden Sie große komplexe Layouts und Layout-Thrashing . Layout / Reflow ist eine teure Operation, bei der viele Rendering-Parameter neu berechnet werden. Um häufige Aufrufe zu vermeiden, müssen Sie das Layout korrekt erstellen und das DOM bearbeiten.

Was erzwingt Layout / Reflow - Ein Spickzettel, in dem Sie eine Liste der Funktionen und Parameter finden, mit denen Layout / Reflow verursacht wird.

Versammlung


Baumschütteln - Entfernen Sie nicht verwendeten Code aus dem Bundle und beschleunigen Sie das Laden der Seite.

Codeaufteilung - Wenn Sie den Code in Blöcke unterteilen, können Sie das erste Laden optimieren und die Möglichkeit eröffnen, Teile des Codes „träge“ herunterzuladen.

Eine Verschleierung kann die Größe des Bundles verringern und sogar ein wenig dazu beitragen, Ihren Code vor neugierigen Blicken zu verbergen.

Die Architektur


Das serverseitige Rendern ist wahrscheinlich die bekannteste Methode, um SPA beim ersten Start sofort zu rendern. Dies ist eine wichtige Voraussetzung für einige Suchmaschinen (und nicht nur).

Lazy Laden von Bildern und Videos ( + native ) - eine native Lösung, die entwickelt wurde, um die Metriken des ersten Renderings aufgrund des "faulen" Ladens von Bildern und Videos zu verbessern.

Lazy Loading Module / Routen ist ein Tool, das in allen gängigen Frameworks und Bibliotheken zu finden ist. Ermöglicht das "träge" Laden von Anwendungsfunktionen.

Durch das Zwischenspeichern von Dateien mit Servicemitarbeitern können Sie Dateien in einem Browser zwischenspeichern und nicht jedes Mal vom Server herunterladen. Möglicherweise die einzige Möglichkeit, den Offline-Modus in einer Browser-Anwendung auszuführen.

HTTP-Caching - Mit einigen HTTP-Headern können Sie die Ladegeschwindigkeit von Seiten erheblich verbessern und die Serverlast reduzieren.

More articles:


All Articles