React
Prestazione

Nozioni di base - HTML DOM vs Virtual DOM

HTML DOM è costoso

Ogni pagina Web è rappresentata internamente come un albero di oggetti. Questa rappresentazione è chiamata Modello oggetto documento . Inoltre, è un'interfaccia linguistica che consente ai linguaggi di programmazione (come JavaScript) di accedere agli elementi HTML.

In altre parole

HTML DOM è uno standard per come ottenere, modificare, aggiungere o eliminare elementi HTML.

Tuttavia, queste operazioni DOM sono estremamente costose .

DOM virtuale è una soluzione

Quindi il team di React ha avuto l'idea di astrarre il DOM HTML e creare il proprio Virtual DOM per calcolare il numero minimo di operazioni che è necessario applicare sul DOM HTML per replicare lo stato attuale della nostra applicazione.

Il Virtual DOM risparmia tempo da modifiche DOM non necessarie.

Come esattamente?

In ogni momento, React ha lo stato dell'applicazione rappresentato come un Virtual DOM . Ogni volta che lo stato dell'applicazione cambia, questi sono i passaggi che React esegue per ottimizzare le prestazioni

1. Genera un nuovo DOM virtuale che rappresenta il nuovo stato della nostra applicazione

2. Confronta il vecchio Virtual DOM (che rappresenta il DOM HTML attuale) rispetto al nuovo Virtual DOM

3. Basato su 2. trova il numero minimo di operazioni per trasformare il vecchio Virtual DOM (che rappresenta il DOM HTML attuale) nel nuovo Virtual DOM

• per saperne di più su questo - leggi React's Diff Algorithm

4. Dopo che tali operazioni sono state trovate, vengono mappate nelle loro equivalenti operazioni DOM HTML

• Ricorda, il Virtual DOM è solo un'astrazione del DOM HTML e c'è una relazione isomorfa tra di loro

5. Ora il numero minimo di operazioni che sono state trovate e trasferite alle loro equivalenti operazioni DOM HTML sono ora applicate direttamente sul DOM HTML dell'applicazione, che consente di risparmiare tempo dalla modifica del DOM HTML inutilmente.

Nota: le operazioni applicate sul DOM virtuale sono economiche, poiché il DOM virtuale è un oggetto JavaScript.

React's diff algoritm

La generazione del numero minimo di operazioni per trasformare un albero in un altro ha una complessità nell'ordine di O (n ^ 3) dove n è il numero di nodi nell'albero. React si basa su due presupposti per risolvere questo problema in un tempo lineare - O (n)

1. Due componenti della stessa classe genereranno alberi simili e due componenti di classi diverse genereranno alberi diversi.

2. È possibile fornire una chiave univoca per elementi che è stabile tra diversi rendering.

Per decidere se due nodi sono diversi, React differenzia 3 casi

1. Due nodi sono diversi, se hanno tipi diversi.

• ad esempio, <div>...</div> è diverso da <span>...</span>

2. Ogni volta che due nodi hanno chiavi diverse

• ad esempio, <div key="1">...</div> è diverso da <div key="2">...</div>

Inoltre, ciò che segue è fondamentale ed estremamente importante per capire se si desidera ottimizzare le prestazioni

Se [i due nodi] non sono dello stesso tipo, React non tenterà nemmeno di far corrispondere ciò che rendono. Rimuove solo il primo dal DOM e inserisce il secondo.

Ecco perché

È molto improbabile che un elemento generi un DOM che assomiglierà a ciò che genererebbe. Invece di perdere tempo a cercare di abbinare queste due strutture, React ricostruisce l'albero da zero.

Consigli e trucchi

Quando due nodi non sono dello stesso tipo, React non prova ad abbinarli: rimuove solo il primo nodo dal DOM e inserisce il secondo. Ecco perché dice il primo suggerimento

1. Se ti vedi alternando tra due classi di componenti con un output molto simile, potresti voler fare la stessa classe.

2. Utilizzare shouldComponentUpdate per impedire al componente di eseguire il rerender, se si sa che non cambierà, ad esempio

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

Misura delle prestazioni con ReactJS

Non puoi migliorare qualcosa che non puoi misurare . Per migliorare le prestazioni dei componenti React, dovresti essere in grado di misurarlo. ReactJS fornisce strumenti addon per misurare le prestazioni. Importa il modulo react-addons-perf per misurare le prestazioni

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

Puoi utilizzare i seguenti metodi dal modulo Perf importato:

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

Il più importante di cui avrai bisogno la maggior parte del tempo è Perf.printWasted() che ti offre la rappresentazione tabellare del tempo sprecato del tuo singolo componente

Puoi notare la colonna del tempo sprecato nella tabella e migliorare le prestazioni del componente utilizzando la sezione Suggerimenti e trucchi sopra

Fai riferimento alla Guida ufficiale di React e all'eccellente articolo di Benchling Engg. su React Performance