Analyse et optimisation des applications React

Des gens comme moi qui luttent pour des sites très performants y passent souvent beaucoup de temps. Alors maintenant, je vais résoudre une fois pour toutes le problème des ressources Web à faible vitesse dont l'interface est écrite dans React. À savoir, je suggère que tous ceux qui lisent ceci devraient cesser d'utiliser React aujourd'hui.



L'auteur du matériel, dont nous publions aujourd'hui la traduction, bien sûr, des blagues. Ici, nous parlerons de la façon d'optimiser les performances des applications React. Soit dit en passant, avant de commencer, réfléchissons à la raison pour laquelle l'optimisation du site Web est généralement nécessaire. Peut-être pouvons-nous dire qu'il est nécessaire pour que le site soit utilisé par plus de personnes qu'avant l'optimisation.

Présentation

Comment optimiser le site? Comment pouvez-vous évaluer les avantages de l'optimisation pour les utilisateurs du site? Et pourquoi devez-vous penser à de tels indicateurs?

Nous allons essayer de répondre à ces questions en examinant la manière la plus simple de créer des applications React - en utilisant l' outil create-react-app (CRA). Un nouveau projet créé à l'aide de cet outil a les dépendances suivantes:

• La bibliothèque principale de React, qui vous permet de travailler avec des composants React: 2,5 Kb.
• La bibliothèque react-dom , qui permet d'afficher les composants sur la page, en les transformant en structures adaptées à l'insertion dans l'arborescence DOM: 30,7 Kb.
• Une petite quantité de code, qui inclut le modèle du premier composant: environ 3 Ko.

Ces données sont obtenues pour React 16.6.3.

Pour savoir combien de temps il faudra pour télécharger une nouvelle application CRA sur votre téléphone Moto G4, vous pouvez utiliser le service WebPageTest .


Temps de chargement du site Web sur Moto G4 en utilisant différents réseaux

Cette application, une variante de «Hello, World», est hébergée sur l'hébergement Firebase, elle est à l'étude en cours de chargement dans le navigateur Chrome à l'aide de trois types de connexions:

• 4G (9 Mbps)
• 3G (1,6 Mbps)
• Connexion 3G lente (400 Kbps)

Ici, vous devez prendre en compte les retards du réseau.

Pourquoi ai-je utilisé le Moto G4 pour l'expérience? Il s'agit d'un simple téléphone bon marché, similaire à ces téléphones qui, sous la forme d'appareils de base, sont utilisés par de nombreuses personnes dans les pays en développement. Sur un réseau 4G, l'application s'est chargée en 2 secondes. Dans un réseau 3G lent, il a fallu plus de 4 secondes pour qu'une page soit mise en ligne.

Bien que ces statistiques soient assez intéressantes, elles ne sont pas particulièrement utiles si vous ne savez pas qui sont vos utilisateurs. Ce que vous définissez comme «lent» peut être complètement différent de ce que moi ou quelqu'un d'autre considère comme «lent». Et votre perception du chargement «rapide» du site peut être déformée par l'appareil et la connexion réseau que vous utilisez. Si vous incluez un ordinateur de bureau connecté à Internet via une connexion filaire dans cette expérience, vous pouvez voir à quel point la différence peut être grande entre le chargement «rapide» et «lent» d'un site.


Temps de chargement du site sur ordinateur de bureau et Moto G4

Afin d'améliorer les performances des applications React, dont la construction utilise la bibliothèque React, comme on dit, «prêt à l'emploi», les améliorations React DOM sont décrites dans le but de simplifier certaines choses. Ainsi, le système d'événements contient de nombreux polyfills, qui, pour de nombreux nouveaux navigateurs, ne sont pas nécessaires, et l'équipe de développement envisage des options pour les supprimer ou les simplifier, si possible. Vous pouvez le regarder ici .

Puis-je mesurer le niveau actuel de performance d'un site Web?

Une application React typique peut contenir de nombreux composants et bibliothèques tiers. Cela signifie que les performances de l'application "Hello, World" ne nous fournissent pas d'informations particulièrement précieuses sur le chargement des applications réelles. Existe-t-il un moyen de connaître les performances de la plupart des sites construits à l'aide de certaines technologies (comme React)?

La ressource HTTP Archive peut nous aider à répondre à cette question. Il s'agit d'une plateforme open source qui se concentre sur l'observation de la construction du Web. Cela se fait par l'exploration mensuelle de millions de sites, leur analyse à l'aide de WebPageTest et l'enregistrement des informations les concernant. Ces informations incluent le nombre de requêtes, les mesures concernant le chargement des données, la taille des données transmises et d'autres indicateurs.

Voici un autre outil intéressant - une extension pour Chrome appelée Library-Detector-for-Chrome . Il vous permet de déterminer quelles bibliothèques JavaScript sont utilisées sur la page. Il a récemment été inclus comme outil d'audit de page dans Lighthouse. Cela suggère que les informations fournies par cette extension peuvent être obtenues pour de nombreux sites dont les informations sont stockées dans l'archive HTTP. Cela peut aider ceux qui souhaitent analyser les résultats des tests de milliers de sites qui utilisent une bibliothèque JavaScript spécifique (le mécanisme pour déterminer React est ici ).

L'ensemble de données complet de l'archive HTTP est accessible au public et peut être trouvé sur BigQuery . Après avoir recherché 140 000 sites à l'aide de React pour les charger dans un environnement mobile artificiellement simulé (jeu de données 2019_01_01 ), nous avons réussi à découvrir les éléments suivants:

• La médiane de l'indicateur de la première peinture significative (premier affichage significatif, temps de dessin des éléments importants) était de 6,9 ​​s.
• La médiane de l'indicateur Time to Interactive (temps d'interactivité, temps de chargement des éléments d'interaction) était de 19,7 s.

Vous pouvez explorer ces données vous-même.

Il faut près de 20 secondes à l'utilisateur pour commencer à interagir avec le site. Et cela, en général, se produit, pour ainsi dire, ici et maintenant, même si cela peut sembler invraisemblable. Cela peut être vu sur de grands sites lorsque vous travaillez avec eux à partir d'appareils faibles sur des lignes de communication lentes. En outre, je voudrais maintenant exprimer plusieurs raisons pour lesquelles ces données doivent être considérées avec un certain scepticisme.

• De nombreux facteurs influencent les performances du site. Parmi eux - la quantité de code JavaScript envoyé à l'utilisateur, le nombre d'images et d'autres matériaux affichés sur la page, etc. Il ne comparera pas correctement les performances de tous les sites React avec les performances d'une page intitulée «Bonjour, World» si d'autres facteurs ne sont pas pris en compte.
• Si vous essayez d'obtenir les données en remplaçant le nom d'une autre bibliothèque dans la demande React, vous obtiendrez des numéros très similaires.

Afin d'obtenir des données précises sur le type de performances des sites existants de manière réaliste utilisant une certaine bibliothèque, il faut faire beaucoup de travail.

Croissance du code JavaScript

Le problème commun des sites Web modernes, non liés à une bibliothèque spécifique, est lié à la quantité de code JavaScript qu'un client doit généralement charger lors de la navigation. L'archive HTTP en a déjà un bon compte. En bref, voici à quoi ressemblent les valeurs médianes des volumes JavaScript téléchargés à partir de sites Web au cours des différentes années:

• 74,7 Ko - pages Web mobiles, 15 décembre 2011.
• 384,4 Ko - pages Web mobiles, 15 décembre 2018.

Il convient de garder à l'esprit que ces données ont été obtenues après le traitement de millions de pages. Il existe probablement des milliers de sites atypiques qui faussent cet indicateur. C'est une idée viable. Par conséquent, nous essaierons de savoir à quoi ressemble cet indicateur pour les 10000 premiers sites du classement Alexa:

• 381,5 Ko - pages Web mobiles, 15 décembre 2018 (voici la demande ).

Tout cela nous permet de conclure que de nos jours, des sites Web sont créés qui incluent plus de code JS que les sites qui ont été créés il y a plusieurs années. Ceci est une observation importante. Les sites sont devenus plus grands, ils sont devenus plus interactifs et plus complexes, et le volume de code JS de ces sites augmente progressivement chaque année. Vous en avez probablement déjà entendu parler, mais plus vous envoyez de code JavaScript au navigateur, plus il faut de temps pour l'analyser, le compiler et l'exécuter. En conséquence, cela ralentit le site.

Il est important de noter que chaque site est unique, ainsi que la base d'utilisateurs de chaque site. De nombreux développeurs, dont les sites contiennent plus de 300 Ko de code JS, ne sont pas confrontés au fait que la plupart de leurs utilisateurs souffrent de problèmes de performances, ce qui est tout à fait normal. Cependant, si vous craignez qu'il soit difficile pour vos utilisateurs de visualiser votre site React, afin d'évaluer la situation réelle, il est préférable de commencer par le profilage.

Profilage et analyse de pages

Le profilage et l'analyse des applications React peuvent être envisagés sous deux angles:

• Il s'agit tout d'abord d'évaluer les performances des composants. Cela affecte la façon dont les utilisateurs interagissent avec le site. Par exemple, si une liste est affichée en cliquant sur un bouton, cela doit être fait rapidement, mais si des centaines de composants sont restitués pendant cette opération, même si cela n'est pas nécessaire, cette opération sera perçue comme lente.
• Deuxièmement, nous parlons de la rapidité avec laquelle la demande est mise en condition de travail. Autrement dit, combien de temps après le début du chargement du site, l'utilisateur pourra interagir avec lui. La quantité de code envoyée à l'utilisateur lors du chargement de la première page du site est un exemple de facteur affectant la rapidité avec laquelle l'utilisateur peut commencer à travailler avec l'application.

Évaluation des performances et optimisation des composants

Essayons d'exprimer en une phrase la signification de l'algorithme de réconciliation React, ou l'essence de ce qu'on appelle le «DOM virtuel». Il ressemblera à ceci: "React prend des mesures pour faire la distinction entre la nouvelle arborescence DOM et l'ancienne afin de comprendre ce qui doit être mis à jour exactement dans l'interface utilisateur lorsque les données du composant changent." Cela crée une charge beaucoup moins importante sur le système que le rendu complet de l'application pour chaque changement d'état ou de propriétés ( ici, vous pouvez lire la différence entre O (n ³ ) et O (n)). Voici un article de Dan Abramov, où vous pouvez trouver des explications sur la réconciliation.

Même en tenant compte du fait que ces optimisations sont intégrées dans les mécanismes internes de React, on peut toujours rencontrer un problème lorsque les composants de l'application sont rendus de manière répétée alors que cela ne devrait pas se produire. Dans les petites applications, cela peut ne pas être visible, mais cela peut sérieusement affecter les performances des applications qui affichent des centaines de composants sur leurs pages.

Un nouveau rendu inutile des composants est effectué pour de nombreuses raisons. Par exemple, les fonctions qui fonctionnent à l'intérieur des composants peuvent ne pas être aussi efficaces qu'elles pourraient l'être, ou peut-être qu'une liste entière de composants est redessinée lorsqu'un seul nouvel élément est ajouté à cette liste. Il existe des outils que vous pouvez utiliser pour découvrir les arborescences de composants qui sont restituées depuis trop longtemps. Parmi eux, on peut noter:

• Tableau de bord des outils de développement Chrome.
• React Developer Tool Profiler.

▍ Analyse des performances à l'aide du panneau de performances des outils de développement Chrome

React utilise l'API User Timing pour mesurer le temps pris à chaque étape du cycle de vie du composant. Les informations sur les performances des applications React peuvent être collectées et analysées à l'aide des outils de développement Chrome. Cela vous permet de comprendre l'efficacité avec laquelle les composants sont connectés, affichés sur la page et déconnectés lors de l'interaction de l'utilisateur avec la page ou lors du rechargement.


Analyse des performances des composants

Voici du bon matériel sur ce sujet, dédié à la recherche des performances des applications écrites à l'aide de React 16 à l'aide des outils de développement Chrome.

L'API de synchronisation utilisateur n'est utilisée que pendant le développement. Il, en production, est éteint. Dans de telles conditions, des implémentations plus rapides de ces mécanismes peuvent être utilisées, sans avoir un impact sérieux sur les performances. C'est la nécessité de tels mécanismes qui est devenue l'une des raisons du développement du plus récent API Profiler.

▍Analyse des performances à l'aide du profileur des outils de développement React

Avec la sortie de la bibliothèque react-dom 16.5 dans les outils de développement React, un nouveau panneau appelé Profiler peut être utilisé. Il vous permet d'analyser les performances du rendu des composants. Cela se fait à l'aide de l'API Profiler, qui collecte des informations sur le temps d'exécution des opérations pour tous les composants qui sont restitués.

Le panneau Profiler est un onglet autonome des outils de développement React. Ici, comme avec le panneau Performances de la barre d'outils Chrome Developer Tools, vous pouvez enregistrer des informations sur les actions des utilisateurs et les rechargements de page afin de collecter des données pour analyser les performances des composants.


Collecte de données avec React Developer Tools

Une fois la collecte des données terminée, le soi-disant «graphique ardent» s'affiche, indiquant le temps nécessaire pour rendre les composants sur la page.


Calendrier du profileur enflammé

Ici, vous pouvez basculer entre différents validations ou états lorsque des nœuds DOM ont été ajoutés, supprimés ou mis à jour. Cela vous permet d'obtenir plus d'informations sur le temps passé sur diverses opérations avec des composants.


Afficher les informations de validation dans le profileur

Les captures d'écran présentées ici représentent les données obtenues à la suite de l'enregistrement des actions de l'utilisateur effectuées dans une application simple. L'application télécharge une liste des référentiels GitHub tendances lorsqu'un bouton est cliqué. Comme vous pouvez le voir, il n'y a que deux commits ici:

• L'un est pour l'indicateur de chargement, qui s'affiche pendant le chargement de la liste des articles.
• Un autre représente le moment où l'appel à l'API est terminé et la liste est affichée dans le DOM.

La figure de droite montre des métadonnées utiles qui incluent des informations de validation ou des données de composants, telles que les propriétés et l'état.


Métadonnées

Lorsque vous travaillez avec le profileur React, vous pouvez également afficher d'autres données représentées par divers graphiques. Vous pouvez en savoir plus sur le profileur React dans cet article sur le blog React.

Afin de compliquer un peu notre exemple, considérons une situation similaire, mais nous allons maintenant effectuer de nombreux appels d'API pour télécharger des référentiels de tendances dans différents langages de programmation (comme Golang, JavaScript, etc.). Comme vous pouvez vous y attendre, avec cette approche, nous avons plus d'engagements à notre disposition.


Augmenter le nombre de validations tout en compliquant le schéma de travail avec l'application

Les validations ultérieures se distinguent par des horaires plus longs, elles ont une couleur plus jaune. Cela signifie que le temps nécessaire à tous les composants pour terminer le rendu augmente à mesure que la taille de la liste des éléments sur la page augmente. Cela est dû au fait que chaque composant de la liste subit un nouveau rendu à chaque nouvel appel à l'API. Cela permet d'identifier un problème qui peut être assez facilement résolu. La solution est que les éléments de la liste n'ont pas besoin d'être rendus à nouveau lorsque de nouveaux éléments sont ajoutés à la liste.

▍ Minimiser les opérations de restitution de composants inutiles

Il existe de nombreuses façons de se débarrasser des opérations inutiles pour le rendu des composants React, ou du moins de minimiser le nombre de ces opérations. Examinons certains d'entre eux.

• Vous pouvez utiliser la méthode de cycle de vie des composants de shouldComponentUpdate () :
  
  

   shouldComponentUpdate(nextProps, nextState) { // true        } 

• Vous pouvez utiliser PureComponent pour construire des composants basés sur une classe:
  
  

   import React, { PureComponent } from 'react'; class AvatarComponent extends PureComponent { } 

• Pour les composants fonctionnels, vous pouvez utiliser le mémo :
  
  

   import React, { memo } from 'react'; const AvatarComponent = memo(props => { }); 

• Vous pouvez mémoriser les sélecteurs Redux (par exemple, en utilisant resélectionner ).
• Vous pouvez optimiser la sortie de listes très longues en utilisant la virtualisation (par exemple, en utilisant react-window ).

Ici et là - quelques vidéos utiles qui discutent de l'utilisation du profileur React pour trouver des goulots d'étranglement dans les applications.

Évaluation des performances et optimisation des applications

En plus d'analyser les mutations DOM et les opérations de restitution des composants, il existe d'autres phénomènes de niveau supérieur qui méritent d'être explorés. Pour une évaluation complète des performances du site, vous pouvez utiliser Lighthouse .

Il existe trois façons de tester une page Web à l'aide de Lighthouse:

• Utilisation de l'interface de ligne de commande Node.js.
• Utilisation de l'extension Chrome.
• Utilisez la barre d'outils Audits des outils de développement Chrome.

Voici à quoi ressemble Lighthouse dans le panneau Audits.


Phare sur le panneau Audits

Lighthouse ne nécessite généralement pas beaucoup de temps pour collecter toutes les données dont il a besoin sur la page et pour effectuer de nombreuses vérifications de ces données. Une fois ces opérations terminées, Lighthouse affiche un rapport contenant des informations résumées.

Afin de comprendre que le chargement d'une page dans le navigateur implique de charger trop de code JavaScript, et pour conclure que la quantité de ce code doit être réduite, vous devez faire attention aux phrases suivantes du rapport:

• Élimine les ressources bloquant le rendu
• Le temps de démarrage de JavaScript est trop long
• Évitez les énormes charges utiles du réseau

Si Lighthouse signale ces problèmes parce que la page utilise un bundle JS trop volumineux, la toute première chose à considérer comme moyen de résoudre le problème est de fractionner le bundle. Le fait est que si le code peut être divisé en fragments, dont certains ne sont nécessaires que pour travailler avec certaines pages du site, nous n'avons aucune raison de ne pas saisir cette opportunité.

▍ Séparation des faisceaux JS

Une façon de diviser le code en parties consiste à utiliser les importations dynamiques:

   import('lodash.sortby')   .then(module => module.default)   .then(module => doSomethingCool(module)) 

La syntaxe d'importation peut ressembler à un appel de fonction, mais elle vous permet d'importer n'importe quel module de manière asynchrone à l'aide du mécanisme de promesses. Dans cet exemple, la méthode sortby est d'abord importée de la bibliothèque lodash , puis la méthode doSomethingCool() est doSomethingCool() .


Demande de tri des numéros

Dans cet exemple, les événements suivants se produisent:

1. L'utilisateur clique sur un bouton pour trier les trois nombres.
2. lodash.sortby importé.
3. La méthode doSomethingCool() est doSomethingCool() , qui trie les nombres et les affiche dans le nouveau nœud DOM.

Il s'agit d'un exemple artificiel extrêmement simple, car si quelqu'un a besoin de trier des nombres sur une page Web, il utilisera probablement la méthode Array.prototype.sort() . , , .

, JavaScript TC39. Chrome Safari , Webpack , Rollup Parcel .
React, , . — React.lazy :

 import React, { lazy } from 'react'; const AvatarComponent = lazy(() => import('./AvatarComponent')); 

, , , . Suspense , , «» . React.lazy , , , :

 import React, { lazy, Suspense } from 'react'; import LoadingComponent from './LoadingComponent'; const AvatarComponent = lazy(() => import('./AvatarComponent')); const PageComponent = () => ( <Suspense fallback={LoadingComponent}>   <SomeComponent /> </Suspense> ) 

Suspense . React-, , , , React, loadable-components .

 import React from 'react'; import loadable from '@loadable/component' import LoadingComponent from './LoadingComponent'; const AvatarComponent = loadable(() => import('./AvatarComponent'), {   LoadingComponent: () => LoadingComponent }); 

LoadingComponent loadable-component .

, , loadable-components , - .

, . , , . React , React Suspense .

▍ , ?

, react-loadable-visibility , loadable-components -API Intersection Observer. , .

 import React from 'react'; import loadableVisibility from 'react-loadable-visibility/loadable-components' const AvatarComponent = loadableVisibility(() => import('./AvatarComponent'), { LoadingComponent: Loading, }) 

▍ ,

- — -, . - , , . , , , -, -, , .





Workbox — , -, . CRA 2.0 , , src/index.js . - .

   import React from 'react'; //... //   ,          //    ,     // unregister()  register().    ,     - //    . //     : http://bit.ly/CRA-PWA serviceWorker.unregister(); 

- Workbox .

▍

- HTML-, , , . , , , , , JS-, .

, , DOM-, , , (, hydrate() React). , , , , .

React 16, . renderToString() HTML-, renderToNodeStream() Readable- Node.

HTML- , . , , .

React , , , renderToStaticNodeStream .

▍ ,

- , , , , - , , . , , .

, , , . HTML- , .

, react-snap , Puppeteer .

, .

▍ , CSS-in-JS

React-, , CSS-in-JS- emotion styled-components . , , , , , . CSS-in-JS , , , . , , JavaScript- , , . , , , .


, ( )

- , . emotion styled-components . Readable- Node. Glamor , .

, .


Preact-, ( )

, CSS-in-JS — , , , , , astroturf . , , , , .

▍

«», , . , , .

, Lighthouse. , React-, React A11y .

, react-axe , , JSX-.

▍

? -, , ? , ?

, - . «» . , — , .

create-react-app -:

 { "short_name": "React App", "name": "Create React App Sample", "icons": [   {     "src": "favicon.ico",     "sizes": "64x64 32x32 24x24 16x16",     "type": "image/x-icon"   } ], "start_url": ".", "display": "standalone", "theme_color": "#000000", "background_color": "#ffffff" } 

, . , , . — . Pourquoi en est-il ainsi? , , .

▍Atomic CSS

CSS- (Atomic CSS) , . , , :

 <button class="bg-blue">Click Me</button> 

padding :

 <button class="bg-blue pa2">Click Me</button> 

Et ainsi de suite. class DOM, , , CSS-, . , . Tachyons .

. tachyon-components API, API styled-components :

 import styled from 'tachyons-components' const Button = styled('button')` bg-blue pa2 ` <Button>Click Me</Button> 

, , CSS- «» , CSS-, , .

▍

, , . — :

 import { useState } from 'react'; function AvatarComponent() { const [name, setName] = useState('Houssein'); return (   <React.Fragment>     <div>       <p>This is a picture of {name}</p>       <img align="center" src="avatar.png" />     </div>     <button onClick={() => setName('a banana')}>       Fix name     </button>   </React.Fragment> ); } 

:

• , ( useState ).
• , ( useEffect ).
• .

, . , , recompose .

React Conf, .

, , JavaScript- . , React , 1.5 ( ). , - , , , , , , , .

Résumé

, React-. , , :

1. , :
   
   
   • Performance Chrome.
   • React.
2. 
   
   
   • , , shouldComponentUpdate() .
   • , , PureComponent .
   • React.memo .
   • Redux (, reselect ).
   • (, react-window ).
3. Lighthouse.
4. , :
   
   
   • — React.lazy .
   • — loadable-components .
   • - , . Workbox .
   • — ( renderToNodeStream renderToStaticNodeStream ).
   • ? react-snap .
   • , CSS-in-JS.
   • , . React A11y react-axe .
   • - , , , .

, React, , :

• API, , .
• , , , .

« » . -, .

Chers lecteurs! React-?