React
Prestatie

De basis - HTML DOM versus virtuele DOM

HTML DOM is duur

Elke webpagina wordt intern weergegeven als een boom met objecten. Deze weergave wordt Document Object Model genoemd . Bovendien is het een taalneutrale interface waarmee programmeertalen (zoals JavaScript) toegang hebben tot de HTML-elementen.

Met andere woorden

De HTML DOM is een standaard voor het verkrijgen, wijzigen, toevoegen of verwijderen van HTML-elementen.

Die DOM-bewerkingen zijn echter extreem duur .

Virtual DOM is een oplossing

Het team van React kwam dus op het idee om de HTML DOM samen te vatten en zijn eigen virtuele DOM te maken om het minimale aantal bewerkingen te berekenen dat we op de HTML DOM moeten toepassen om de huidige status van onze applicatie te repliceren.

De virtuele DOM bespaart tijd tegen onnodige DOM-wijzigingen.

Hoe precies?

Op elk tijdstip heeft React de applicatiestatus weergegeven als een Virtual DOM . Wanneer de applicatiestatus verandert, zijn dit de stappen die React uitvoert om de prestaties te optimaliseren

1. Genereer een nieuwe virtuele DOM die de nieuwe status van onze applicatie weergeeft

2. Vergelijk de oude virtuele DOM (die de huidige HTML-DOM vertegenwoordigt) versus de nieuwe virtuele DOM

3. Gebaseerd op 2. vind het minimum aantal bewerkingen om de oude virtuele DOM (die de huidige HTML DOM vertegenwoordigt) te transformeren in de nieuwe virtuele DOM

• om daar meer over te weten - lees React's Diff Algorithm

4. Nadat deze bewerkingen zijn gevonden, worden ze toegewezen aan hun equivalente HTML DOM- bewerkingen

• onthoud, de virtuele DOM is slechts een abstractie van de HTML DOM en er is een isomorfe relatie tussen hen

5. Nu wordt het minimale aantal gevonden bewerkingen en overgebracht naar hun equivalente HTML DOM- bewerkingen nu rechtstreeks op de HTML DOM van de toepassing toegepast, waardoor tijd wordt bespaard om de HTML DOM onnodig te wijzigen.

Opmerking: bewerkingen die worden toegepast op de virtuele DOM zijn goedkoop, omdat de virtuele DOM een JavaScript-object is.

React's diff-algoritme

Het genereren van het minimale aantal bewerkingen om de ene boom in de andere te transformeren, heeft een complexiteit in de volgorde O (n ^ 3) waarbij n het aantal knooppunten in de boom is. React vertrouwt op twee veronderstellingen om dit probleem in een lineaire tijd op te lossen - O (n)

1. Twee componenten van dezelfde klasse zullen vergelijkbare bomen genereren en twee componenten van verschillende klassen zullen verschillende bomen genereren.

2. Het is mogelijk om een unieke sleutel te bieden voor elementen die stabiel is over verschillende renders.

Om te beslissen of twee knooppunten verschillend zijn, onderscheidt React 3 gevallen

1. Twee knooppunten zijn verschillend, als ze verschillende typen hebben.

• <div>...</div> is bijvoorbeeld anders dan <span>...</span>

2. Wanneer twee knooppunten verschillende toetsen hebben

• <div key="1">...</div> is bijvoorbeeld anders dan <div key="2">...</div>

Wat volgt is bovendien cruciaal en uiterst belangrijk om te begrijpen als u de prestaties wilt optimaliseren

Als ze [twee knooppunten] niet van hetzelfde type zijn, zal React zelfs niet proberen te matchen met wat ze weergeven. Het gaat gewoon de eerste uit de DOM verwijderen en de tweede invoegen.

Dit is waarom

Het is zeer onwaarschijnlijk dat een element een DOM gaat genereren die eruit zal zien als wat een zou genereren. In plaats van tijd te besteden aan het matchen van die twee structuren, bouwt React gewoon de boom opnieuw op.

tips & trucs

Wanneer twee knooppunten niet van hetzelfde type zijn, probeert React ze niet te matchen - het verwijdert alleen de eerste knoop van de DOM en voegt de tweede in. Dit is waarom de eerste tip zegt

1. Als je jezelf ziet afwisselen tussen twee componentenklassen met zeer vergelijkbare uitvoer, wil je misschien dezelfde klasse maken.

2. Gebruik shouldComponentUpdate om te voorkomen dat een component opnieuw wordt gegenereerd, als u weet dat het bijvoorbeeld niet zal veranderen

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

Prestatiemeting met ReactJS

Je kunt iets dat je niet kunt meten niet verbeteren . Om de prestaties van React-componenten te verbeteren, moet u deze kunnen meten. ReactJS biedt add-on tools om de prestaties te meten. Importeer de react-addons-perf module om de prestaties te meten

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

U kunt de onderstaande methoden uit de geïmporteerde Perf module gebruiken:

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

De belangrijkste die u meestal nodig heeft, is Perf.printWasted() waarmee u de verspilde tijd van uw afzonderlijke component in tabelvorm kunt weergeven

U kunt de kolom Verspilde tijd in de tabel noteren en de prestaties van de component verbeteren met behulp van het gedeelte Tips & Tricks hierboven

Raadpleeg de React Official Guide en het uitstekende artikel van Benchling Engg. op Reactprestaties