RadeventListener: Eine Geschichte der kundenseitigen Framework-Leistung

Reacts Popularität ist nicht ohne Kritiker. Die beträchtliche Größe des Rahmens (ca. 120 KIB Minified) wirkt sich erheblich auf die Startzeiten aus, insbesondere wenn sie sich ausschließlich auf das Kunden-Rendering verlassen. Auch das serverseitige Rendering mit clientseitiger Hydratation bleibt leistungsintensiv. Während React im komplexen Staatsmanagement hervorragend ist, überwiegen seine Ressourcenanforderungen häufig die Vorteile in einfacheren Anwendungen. Dies kann Benutzer mit weniger leistungsstarker Hardware effektiv ausschließen.

Trotz meiner Vorbehalte über Reacts Leistungsaufwand schätze ich das Komponentierungsmodell und die JSX -Syntax. Das serverseitige Rendering (oder die Verwendung von Preact, meine bevorzugte Alternative) bleibt ein wertvolles Gut. Die Ermittlung der entsprechenden kundenseitigen Nutzung bleibt jedoch eine Herausforderung. Dieser Artikel beschreibt meine Ergebnisse zur Optimierung der React -Leistung für eine bessere Benutzererfahrung.

Der Kontext: eine RSS -Feed -App

Meine RSS -Feed -App bylines.fyi verwendet JavaScript sowohl auf dem Server als auch auf dem Client. Obwohl ich nicht von Kunden auf der Seite nicht mag, unterstreicht meine Erfahrung zwei wiederkehrende Probleme:

1. Frameworks können die zugrunde liegende Webplattform verdecken und ein tiefes Verständnis dessen behindern, wann sie wirklich vorteilhaft sind.
2. Frameworks garantieren nicht immer optimale Benutzererfahrungen.

Die HTTParchive-Forschung von Tim Kadlec zur Leistung des Web-Frameworks verstärkt diese Bedenken und zeigt die weniger als herausragende Leistung von React. Mein Ziel war es, die serverseitigen Vorteile von React zu nutzen und gleichzeitig seine clientseitigen Nachteile zu mildern.

Das Experiment: Mobile Navigation umschaltet

Meine RSS-App benötigte clientseitige JavaScript für einen einfachen mobilen Navigationschalter-ein klassisches Beispiel für "einfacher Zustand". Ich sehe oft React -Komponenten, die für so einfache Aufgaben überbeansprucht werden, was zu unnötigem Leistungsaufwand führt. Dieses Experiment dient zwar trivial, dient aber als entscheidender Maßstab für das Verständnis, wie Rahmenauswahl skaliert wird. Es ist wichtig zu beachten, dass die meisten Entwickler nicht nur auf React für ein so kleines Merkmal angewiesen sind, aber die Ergebnisse veranschaulichen architektonische Auswirkungen auf die Laufzeitleistung.

Testbedingungen

Das Experiment verglichen drei mobile NAV -Implementierungen auf vier Geräten:

1. Stateful React-Komponente: servergerender und clienthydratisiert.
2. Stateful Preact Component: servergerender und clienthydratisiert.
3. Vorstandsgrüne Vorwirkungskomponente: servergerender, nicht hydratisiert; Verwenden von Standard -Event -Hörern.

Geräte enthalten:

1. Nokia 2 Android Phone (Chrome 83)
2. ASUS X550CC Laptop (Windows 10, Chrome 83)
3. IPhone SE der 1. Generation (Safari 13)
4. IPhone SE der 2. Generation (Safari 13)

Metriken

Die folgenden Metriken wurden für jede Implementierung und jedes Gerät gemessen:

1. Startzeit: einschließlich Framework -Belastung und Hydratation (React/Preact) oder einfach Event -Listener -Code (EventListener).
2. Hydratationszeit: Eine Teilmenge der Startzeit (nur React/Preact).
3. Mobile Nav Open Time: Messung des Framework -Overheads bei der Ereignisbehandlung.

Methodik

Das Testen beinhaltete das Debugging und Profiling von Remote, die CPU -Zeit für jede Metrik in zehn Iterationen pro Szenario und Gerät aufzeichnete. Die Netzwerkleistung war kein Faktor.

Ergebnisse

Aufgrund der Komplexität der Daten werden die Ergebnisse im tabellarischen Format dargestellt, das minimale, maximale, mediane und durchschnittliche CPU -Zeiten zeigt. (Detaillierte Tabellen sind in der dazugehörigen Tabelle erhältlich). Zu den wichtigsten Ergebnissen gehören:

• Die hohen Startup- und Hydratationskosten von React: Besonders beim Nokia 2.
• Die verbesserte Leistung von Preact: deutlich schneller als reagieren, aber immer noch die idealen Rahmenbudgets auf dem Nokia 2 überschreitet.
• Überlegene Ereignis -Hörer -Leistung: konsequent schneller als React und Preact, insbesondere für einfache Wechselwirkungen.

Diskussion: flache Anrufstapel

Die Leistungsunterschiede ergeben sich aus dem Overhead der Rahmenbelastung und der Flüssigkeitszufuhr. Während einige Leistungsabschreibungen für Entwicklerkomfort unvermeidlich sind, neigt sich das Gleichgewicht häufig zu stark in Richtung Entwicklererfahrung auf Kosten des Benutzers. Die Call -Stapel für React und Preact Hydratation unterstreichen die erheblichen Verarbeitungsanforderungen, insbesondere für einfache Aufgaben. Die Verwendung von nativen Event -Hörern bietet einen viel effizienteren Ansatz für das einfache Staatsmanagement.

Schlussfolgerung und Empfehlungen

Diese Analyse ist nicht als React -Kritik gedacht, sondern als Ermutigung, die Rahmenauswahl und deren Leistungsauswirkungen kritisch zu bewerten. Mehrere Strategien können Leistungsprobleme mildern:

1. Refactor staatliche Komponenten zu Staatlosen Komponenten, sofern möglich.
2. Vermeiden Sie JavaScript und Hydratation für clientseitig für Staatelo-Komponenten.
3. Verwenden Sie rahmenunabhängige Ereignishörer für einfache Interaktionen.
4. Faul hydratische Komponenten mit Intersection Observer oder requestIdleCallback .
5. Betrachten Sie Preact als eine schnellere Alternative zum Reaktieren.
6. Passen Sie die Benutzererfahrung für Geräte mit niedrigem Memory mit navigator.deviceMemory an.

Priorisieren Sie die Leistungstests auf einer Reihe von Geräten, um die Inklusivität für Benutzer mit unterschiedlichen Hardwarefunktionen sicherzustellen. Das Ziel sollte ein schnelles und zugängliches Web -Erlebnis für alle sein.

Besonderer Dank geht an Eric Bailey für das redaktionelle Feedback und die CSS-Tricks-Mitarbeiter für die Veröffentlichung dieses Artikels.

Das obige ist der detaillierte Inhalt vonRadeventListener: Eine Geschichte der kundenseitigen Framework-Leistung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!