React
Performance

Les bases - DOM DOM vs DOM virtuel

HTML DOM est cher

Chaque page Web est représentée en interne en tant qu’arbre d’objets. Cette représentation est appelée modèle d'objet de document . En outre, il s'agit d'une interface indépendante du langage qui permet aux langages de programmation (tels que JavaScript) d'accéder aux éléments HTML.

En d'autres termes

Le HTML DOM est un standard pour obtenir, modifier, ajouter ou supprimer des éléments HTML.

Cependant, ces opérations DOM sont extrêmement coûteuses .

Virtual DOM est une solution

L'équipe de React a donc eu l'idée d'abstraire le DOM HTML et de créer son propre DOM virtuel afin de calculer le nombre minimum d'opérations à appliquer sur le DOM HTML pour répliquer l'état actuel de notre application.

Le DOM virtuel permet de gagner du temps grâce aux modifications inutiles du DOM.

De quelle façon précisément?

À chaque instant, React a l'état de l'application représenté sous la forme d'un Virtual DOM . Chaque fois que l'état de l'application change, voici les étapes que React effectue pour optimiser les performances.

1. Générer un nouveau DOM virtuel qui représente le nouvel état de notre application

2. Comparer l'ancien DOM virtuel (qui représente le DOM HTML actuel) au nouveau DOM virtuel

3. Basé sur 2. trouver le nombre minimum d'opérations pour transformer l'ancien DOM virtuel (qui représente le DOM HTML actuel) dans le nouveau DOM virtuel

• pour en savoir plus à ce sujet - lisez l'algorithme Diff de React

4. Une fois ces opérations trouvées, elles sont mappées dans leurs opérations DOM HTML équivalentes

• rappelez-vous, le DOM virtuel est seulement une abstraction du DOM HTML et il existe une relation isomorphe entre eux

5. Maintenant, le nombre minimum d'opérations qui ont été trouvées et transférées vers leurs opérations HTML équivalentes est maintenant appliqué directement sur le DOM HTML de l'application, ce qui permet de gagner du temps en modifiant inutilement le DOM HTML .

Remarque: les opérations appliquées sur le DOM virtuel sont peu coûteuses, car le DOM virtuel est un objet JavaScript.

Algorithme diff de React

La génération du nombre minimum d'opérations pour transformer un arbre en un autre a une complexité de l'ordre de O (n ^ 3) où n est le nombre de nœuds dans l'arbre. React repose sur deux hypothèses pour résoudre ce problème dans un temps linéaire - O (n)

1. Deux composants de la même classe généreront des arbres similaires et deux composants de classes différentes généreront des arbres différents.

2. Il est possible de fournir une clé unique pour les éléments stables sur différents rendus.

Pour décider si deux nœuds sont différents, React différencie 3 cas

1. Deux nœuds sont différents s'ils ont des types différents.

• Par exemple, <div>...</div> est différent de <span>...</span>

2. Chaque fois que deux nœuds ont des clés différentes

• Par exemple, <div key="1">...</div> est différent de <div key="2">...</div>

De plus, ce qui suit est crucial et extrêmement important pour comprendre si vous souhaitez optimiser les performances.

S'ils [deux nœuds] ne sont pas du même type, React ne va même pas essayer de faire correspondre ce qu'ils rendent. Il va juste supprimer le premier du DOM et insérer le second.

Voici pourquoi

Il est très peu probable qu'un élément génère un DOM qui ressemblerait à ce que générerait un élément. Au lieu de passer du temps à essayer de faire correspondre ces deux structures, React ne fait que reconstruire l’arbre à partir de zéro.

Conseils & Astuces

Lorsque deux nœuds ne sont pas du même type, React ne tente pas de les faire correspondre - il supprime simplement le premier nœud du DOM et insère le second. C'est pourquoi la première astuce dit

1. Si vous vous voyez alterner entre deux classes de composants avec une sortie très similaire, vous pouvez en faire la même classe.

2. Utilisez shouldComponentUpdate pour empêcher le composant de réexécuter, si vous savez qu'il ne va pas changer, par exemple

shouldComponentUpdate: function(nextProps, nextState) {
  return nextProps.id !== this.props.id; 
}

Mesure de performance avec ReactJS

Vous ne pouvez pas améliorer quelque chose que vous ne pouvez pas mesurer . Pour améliorer les performances des composants React, vous devriez pouvoir le mesurer. ReactJS fournit des outils addon pour mesurer la performance. Importer le module react-addons-perf pour mesurer les performances

import Perf from 'react-addons-perf' // ES6
var Perf = require('react-addons-perf') // ES5 with npm
var Perf = React.addons.Perf; // ES5 with react-with-addons.js

Vous pouvez utiliser les méthodes ci-dessous à partir du module Perf importé:

• Perf.printInclusive ()
• Perf.printExclusive ()
• Perf.printWasted ()
• Perf.printOperations ()
• Perf.printDOM ()

Perf.printWasted() est la plus importante dont vous aurez besoin la plupart du temps. Perf.printWasted() vous donne la représentation sous forme de tableau du temps perdu de votre composant individuel.

Vous pouvez noter la colonne Temps perdu dans le tableau et améliorer les performances du composant en utilisant la section Conseils et astuces ci-dessus.

Reportez-vous au guide officiel React et à l'excellent article de Benchling Engg. sur la performance de réaction