RadeventListener: une histoire de performances du cadre côté client

La popularité de React n'est pas sans ses détracteurs. La taille considérable du cadre (environ 120 kib a minifié) a un impact significatif sur les temps de démarrage, en particulier lorsqu'il se fier uniquement sur le rendu côté client. Même le rendu côté serveur avec hydratation côté client reste à forte exécution des performances. Alors que React excelle dans la gestion de l'État complexe, ses demandes de ressources l'emportent souvent sur les avantages des applications plus simples. Cela peut exclure efficacement les utilisateurs avec du matériel moins puissant.

Malgré mes réservations sur les frais généraux de performance de React, j'apprécie son modèle de composant et sa syntaxe JSX. Le rendu côté serveur (ou en utilisant Preact, mon alternative préférée) reste un atout précieux. Cependant, la détermination de l'utilisation appropriée côté client reste un défi. Cet article détaille mes résultats sur l'optimisation des performances de réaction pour une meilleure expérience utilisateur.

Le contexte: une application RSS Feed

Mon application RSS Feed, bylines.fyi , utilise JavaScript sur le serveur et le client. Bien que je n'aime pas intrinsèquement les cadres côté client, mon expérience met en évidence deux problèmes récurrents:

1. Les cadres peuvent obscurcir la plate-forme Web sous-jacente, entravant une compréhension approfondie du moment où elles sont vraiment bénéfiques.
2. Les cadres ne garantissent pas toujours des expériences d'utilisateurs optimales.

La recherche Httparchive de Tim Kadlec sur les performances du cadre Web renforce ces préoccupations, révélant les performances moins que stellaires de React. Mon objectif était de tirer parti des avantages côté serveur de React tout en atténuant ses inconvénients côté client.

L'expérience: bascule de navigation mobile

Mon application RSS avait besoin de JavaScript côté client pour une simple bascule de navigation mobile - un exemple classique de «l'état simple». Je vois souvent des composants React surutilisés pour des tâches aussi simples, conduisant à des frais généraux inutiles. Cette expérience, bien qu'apparemment triviale, sert de référence cruciale pour comprendre comment les choix de cadre évoluent. Il est important de noter que la plupart des développeurs ne compteraient pas uniquement sur React pour une fonctionnalité aussi mineure, mais les résultats illustrent les implications architecturales pour les performances d'exécution.

Conditions de test

L'expérience a comparé trois implémentations de navigation mobile sur quatre appareils:

1. Composant React Stateful: Server rendu et hydraté du client.
2. Composant préalable avec état: le serveur rendu et hydraté du client.
3. Composant de préact sans état: serveur rendu, non hydraté; en utilisant des auditeurs d'événements standard.

Appareils inclus:

1. Téléphone Android Nokia 2 (Chrome 83)
2. Ordinateur portable ASUS X550CC (Windows 10, Chrome 83)
3. IPhone de 1ère génération (Safari 13)
4. IPhone SE de 2e génération (Safari 13)

Métrique

Les mesures suivantes ont été mesurées pour chaque implémentation et appareil:

1. Temps de démarrage: y compris le chargement et l'hydratation du cadre (React / Preact), ou simplement le code d'écoute d'événements (EventListener).
2. Temps d'hydratation: sous-ensemble du temps de démarrage (réact / préact uniquement).
3. Mobile Nav Temps d'ouverture: Mesurer les frais généraux du cadre dans la gestion des événements.

Méthodologie

Les tests impliquaient le débogage et le profilage à distance, enregistrant le temps de processeur pour chaque métrique sur dix itérations par scénario et par appareil. Les performances du réseau n'étaient pas un facteur.

Résultats

En raison de la complexité des données, les résultats sont présentés au format tabulaire montrant les temps de processeur minimum, maximum, médian et moyen. (Des tables détaillées sont disponibles dans la feuille de calcul qui l'accompagne). Les principales conclusions comprennent:

• Les coûts élevés de startup et d'hydratation de React: particulièrement visible sur le Nokia 2 bas de gamme.
• Les performances améliorées de Preact: nettement plus rapidement que réagi, mais dépassant toujours les budgets de trame idéaux sur le Nokia 2.
• Performance supérieure de l'écouteur d'événements: toujours plus rapidement que la réaction et le préact, en particulier pour les interactions simples.

Discussion: piles d'appels superficiels

Les différences de performance découlent des frais généraux de la charge et de l'hydratation du cadre. Alors que certains compromis de performance sont inévitables pour la commodité des développeurs, l'équilibre s'incline souvent trop pour l'expérience des développeurs au détriment de l'utilisateur. Les piles d'appels pour l'hydratation React et Preact mettent en évidence les demandes de traitement significatives, en particulier pour les tâches simples. L'utilisation des auditeurs d'événements natives offre une approche beaucoup plus efficace pour la gestion simple de l'État.

Conclusion et recommandations

Cette analyse n'est pas conçue comme une critique de réaction, mais plutôt comme des encouragements pour évaluer de manière critique les choix de cadre et leur impact sur les performances. Plusieurs stratégies peuvent atténuer les problèmes de performance:

1. Refactor Composants avec état des composants apatrides dans la mesure du possible.
2. Évitez JavaScript et l'hydratation côté client pour les composants apatrides.
3. Utilisez des écouteurs d'événements indépendants du cadre pour des interactions simples.
4. Hydrater paresseusement les composants à l'aide d'observateurs d'intersection ou requestIdleCallback .
5. Considérez le préact comme une alternative plus rapide à réagir.
6. Adaptez l'expérience utilisateur pour les appareils basse mémoire à l'aide de navigator.deviceMemory .

Prioriser les tests de performances sur une gamme d'appareils, en assurant l'inclusivité pour les utilisateurs avec des capacités matérielles variables. L'objectif devrait être une expérience Web rapide et accessible pour tout le monde.

Un merci spécial à Eric Bailey pour les commentaires éditoriaux et le personnel de CSS-Tricks pour avoir publié cet article.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!