Leute wie ich, die um Hochleistungsseiten kämpfen, verbringen oft viel Zeit damit. Jetzt werde ich das Problem der langsamen Webressourcen, deren Benutzeroberfläche in React geschrieben ist, ein für alle Mal lösen. Ich schlage nämlich vor, dass jeder, der dies liest, React heute nicht mehr verwenden sollte.
Der Autor des Materials, dessen Übersetzung wir heute veröffentlichen, scherzt natürlich. Hier werden wir darüber sprechen, wie die Leistung von React-Anwendungen optimiert werden kann. Bevor Sie beginnen, sollten Sie sich überlegen, warum eine Website-Optimierung im Allgemeinen erforderlich ist. Vielleicht können wir sagen, dass dies erforderlich ist, damit die Site von mehr Personen als vor der Optimierung verwendet werden kann.
Einführung
Wie optimiere ich die Seite? Wie können Sie die Vorteile der Optimierung für Website-Benutzer bewerten? Und warum müssen Sie über solche Indikatoren nachdenken?
Wir werden versuchen, diese Fragen zu beantworten, indem wir uns den einfachsten Weg ansehen, um React-Anwendungen zu erstellen - mit dem CRA-
Tool (Create-React
-App ). Ein neues Projekt, das mit diesem Tool erstellt wurde, weist die folgenden Abhängigkeiten auf:
- Die
react , mit der Sie mit React-Komponenten arbeiten können: 2,5 KB. - Die
react-dom Bibliothek, mit der Komponenten auf der Seite angezeigt und in Strukturen umgewandelt werden können, die zum Einfügen in den DOM-Baum geeignet sind: 30,7 KB. - Eine kleine Menge Code, die die Vorlage der ersten Komponente enthält: ca. 3 KB.
Diese Daten werden für Reaktion 16.6.3 erhalten.
Um herauszufinden, wie lange es
dauert, eine neue CRA-Anwendung auf Ihr Moto G4-Telefon herunterzuladen, können Sie den
WebPageTest- Dienst verwenden.
Ladezeit der Website auf Moto G4 über verschiedene NetzwerkeDiese Anwendung, eine Variante von "Hello, World", wird auf Firebase-Hosting gehostet. Es wird untersucht, wie sie über drei Arten von Verbindungen in den Chrome-Browser geladen wird:
- 4G (9 Mbit / s)
- 3G (1,6 Mbit / s)
- Langsame 3G-Verbindung (400 Kbit / s)
Hier müssen Sie Netzwerkverzögerungen berücksichtigen.
Warum habe ich das Moto G4 für das Experiment verwendet? Dies ist ein einfaches, kostengünstiges Telefon, ähnlich den Telefonen, die in Form von Basisgeräten von vielen Menschen in Entwicklungsländern verwendet werden. In einem 4G-Netzwerk wurde die Anwendung in 2 Sekunden geladen. In einem langsamen 3G-Netzwerk dauerte es mehr als 4 Sekunden, bis eine Seite online ging.
Obwohl diese Metriken sehr interessant sind, sind sie nicht besonders nützlich, wenn Sie nicht wissen, wer Ihre Benutzer sind. Was Sie als "langsam" definieren, kann sich völlig von dem unterscheiden, was ich oder jemand anderes als "langsam" ansieht. Und Ihre Wahrnehmung des „schnellen“ Ladens der Site kann durch das von Ihnen verwendete Gerät und die Netzwerkverbindung verzerrt sein. Wenn Sie in diesem Experiment einen Desktop-Computer einbeziehen, der über eine Kabelverbindung mit dem Internet verbunden ist, können Sie sehen, wie groß der Unterschied zwischen dem „schnellen“ und dem „langsamen“ Laden einer Site sein kann.
Ladezeit der Site auf dem Desktop-Computer und dem Moto G4Um die Leistung von React-Anwendungen zu verbessern, deren Konstruktion die React-Bibliothek verwendet, wie sie "out of the box" heißt, werden Verbesserungen des React DOM beschrieben, die darauf abzielen, einige Dinge zu vereinfachen. Das Ereignissystem enthält daher viele Polyfills, die für viele neue Browser nicht benötigt werden, und das Entwicklungsteam erwägt Optionen, um sie nach Möglichkeit zu entfernen oder zu vereinfachen. Sie können es
hier sehen .
Kann ich die aktuelle Leistung der Website messen?
Eine typische React-Anwendung kann viele Komponenten und Bibliotheken von Drittanbietern enthalten. Dies bedeutet, dass die Leistung der Anwendung "Hello, World" keine besonders wertvollen Informationen darüber liefert, wie echte Anwendungen geladen werden. Gibt es eine Möglichkeit herauszufinden, wie hoch die Leistung der meisten Websites ist, die mit einer Technologie (wie React) erstellt wurden?
Die
HTTP-Archivressource kann uns bei der Beantwortung dieser Frage helfen. Dies ist eine Open Source-Plattform, die sich darauf konzentriert, zu beobachten, wie das Web aufgebaut ist. Dazu werden monatlich Millionen von Websites gecrawlt, mithilfe von WebPageTest analysiert und Informationen über sie aufgezeichnet. Diese Informationen umfassen die Anzahl der Abfragen, Metriken zum Laden von Daten, die Größe der übertragenen Daten und andere Indikatoren.
Hier ist ein weiteres interessantes Tool - eine Erweiterung für Chrome namens
Library-Detector-for-Chrome . Hier können Sie herausfinden, welche JavaScript-Bibliotheken auf der Seite verwendet werden. Es wurde kürzlich als Seitenprüfungswerkzeug in Lighthouse aufgenommen. Dies legt nahe, dass die Informationen, die diese Erweiterung bereitstellt, für viele Sites abgerufen werden können, deren Informationen im HTTP-Archiv gespeichert sind. Dies kann denjenigen helfen, die die Testergebnisse von Tausenden von Websites analysieren möchten, die eine bestimmte JavaScript-Bibliothek verwenden (der Mechanismus zur Bestimmung von React ist
hier ).
Das vollständige HTTP-Archiv-Dataset ist öffentlich verfügbar und kann auf
BigQuery abgerufen werden . Nachdem wir 140.000 Websites mit React untersucht hatten, um sie in eine künstlich simulierte mobile Umgebung zu
2019_01_01 (Datensatz
2019_01_01 ), konnten wir Folgendes herausfinden:
- Der Median des Indikators für die erste aussagekräftige Farbe (erste signifikante Anzeige, Zeit zum Zeichnen wichtiger Elemente) betrug 6,9 s.
- Der Median des Indikators Zeit bis zur Interaktivität (Zeit bis zur Interaktivität, Ladezeit der Interaktionselemente) betrug 19,7 s.
Sie können diese Daten selbst untersuchen.
Es dauert fast 20 Sekunden, bis der Benutzer mit der Site interagiert. Und dies geschieht im Allgemeinen sozusagen hier und jetzt, obwohl es unplausibel aussehen mag. Dies kann an großen Standorten beobachtet werden, wenn mit ihnen von schwachen Geräten auf langsamen Kommunikationsleitungen aus gearbeitet wird. Darüber hinaus möchte ich jetzt einige Gründe nennen, warum diese Daten mit einer gewissen Skepsis betrachtet werden sollten.
- Es gibt viele Faktoren, die die Leistung der Website beeinflussen. Darunter - die Menge des an den Benutzer gesendeten JavaScript-Codes, die Anzahl der auf der Seite angezeigten Bilder und anderen Materialien usw. Die Leistung von reaktionsbasierten Websites wird fälschlicherweise mit der Leistung einer Seite mit der Bezeichnung "Hallo Welt" verglichen, wenn andere Faktoren nicht berücksichtigt werden.
- Wenn Sie versuchen, die Daten abzurufen, indem Sie den Namen einer anderen Bibliothek in der React-Anforderung ersetzen, erhalten Sie sehr ähnliche Zahlen.
Um genaue Daten darüber zu erhalten, welche Leistung realistisch vorhandene Websites unter Verwendung einer bestimmten Bibliothek demonstrieren, muss viel Arbeit geleistet werden.
Wachstum von JavaScript-Code
Das häufigste Problem moderner Websites, die nicht an eine bestimmte Bibliothek gebunden sind, hängt mit der Menge an JavaScript-Code zusammen, die ein Client normalerweise beim Surfen laden muss. Das HTTP-Archiv hat dies bereits gut dokumentiert. Kurz gesagt, so sehen die Medianwerte von JavaScript-Volumes aus, die in verschiedenen Jahren von Websites heruntergeladen wurden:
- 74,7 KB - mobile Webseiten, 15. Dezember 2011.
- 384,4 KB - mobile Webseiten, 15. Dezember 2018.
Es ist zu beachten, dass diese Daten nach der Verarbeitung von Millionen von Seiten erhalten wurden. Es gibt wahrscheinlich Tausende von atypischen Stellen, die diesen Indikator verzerren. Dies ist eine tragfähige Idee. Daher werden wir versuchen herauszufinden, wie dieser Indikator für die ersten 10.000 Websites aus dem Alexa-Ranking aussieht:
- 381,5 KB - mobile Webseiten, 15. Dezember 2018 (hier ist die Anfrage ).
All dies lässt den Schluss zu, dass heutzutage Websites erstellt werden, die mehr JS-Code enthalten als Websites, die vor einigen Jahren erstellt wurden. Dies ist eine wichtige Beobachtung. Die Websites sind größer geworden, sie sind interaktiver und komplexer geworden, und das Volumen des JS-Codes dieser Websites wächst von Jahr zu Jahr. Sie haben wahrscheinlich bereits davon gehört, aber je mehr JavaScript-Code Sie an den Browser senden, desto länger dauert das Parsen, Kompilieren und Ausführen. Dies verlangsamt infolgedessen die Site.
Es ist wichtig zu beachten, dass jede Site einzigartig ist, ebenso wie die Benutzerbasis jeder Site. Viele Entwickler, deren Websites mehr als 300 KB JS-Code enthalten, sehen sich nicht der Tatsache gegenüber, dass die meisten ihrer Benutzer unter Leistungsproblemen leiden, und dies ist völlig normal. Wenn Sie jedoch befürchten, dass es für Ihre Benutzer schwierig sein könnte, Ihre React-Site anzuzeigen, um die tatsächliche Situation zu beurteilen, beginnen Sie am besten mit der Profilerstellung.
Seitenprofilerstellung und -analyse
Das Profilieren und Analysieren von React-Anwendungen kann aus zwei Perspektiven betrachtet werden:
- Zunächst geht es darum, die Leistung von Komponenten zu bewerten. Dies wirkt sich darauf aus, wie Benutzer mit der Site interagieren. Wenn beispielsweise eine Liste durch Klicken auf eine Schaltfläche angezeigt wird, sollte dies schnell erfolgen. Wenn jedoch während dieses Vorgangs Hunderte von Komponenten neu gerendert werden, obwohl dies nicht erforderlich ist, wird dieser Vorgang als langsam empfunden.
- Zweitens sprechen wir darüber, wie schnell die Anwendung in einen funktionsfähigen Zustand versetzt wird. Das heißt, wie viel Zeit nach dem Start des Ladens der Site der Benutzer mit ihm interagieren kann. Die Menge an Code, die beim Laden der ersten Seite der Site an den Benutzer gesendet wird, ist ein Beispiel für einen Faktor, der beeinflusst, wie schnell der Benutzer mit der Anwendung arbeiten kann.
Leistungsbewertung und Komponentenoptimierung
Versuchen wir, in einem Satz die Bedeutung des React-Abstimmungsalgorithmus oder die Essenz des sogenannten „virtuellen DOM“ auszudrücken. Es sieht folgendermaßen aus: "React unternimmt Schritte, um zwischen dem neuen DOM-Baum und dem alten Baum zu unterscheiden, um zu verstehen, was genau in der Benutzeroberfläche aktualisiert werden sollte, wenn sich die Daten in der Komponente ändern." Dies führt zu einer viel geringeren Belastung des Systems als das erneute Rendern der gesamten Anwendung bei jeder Änderung des Status oder der Eigenschaften (
hier können Sie den Unterschied zwischen O (n
3 ) und O (n) nachlesen).
Hier ist ein Artikel von Dan Abramov, in dem Sie Erklärungen zur Versöhnung finden.
Selbst wenn man berücksichtigt, dass diese Optimierungen in die internen Mechanismen von React integriert sind, kann es immer zu Problemen kommen, wenn die Komponenten in der Anwendung wiederholt gerendert werden, wenn dies nicht der Fall sein sollte. In kleinen Anwendungen ist dies möglicherweise nicht erkennbar, kann jedoch die Leistung von Anwendungen, die Hunderte von Komponenten auf ihren Seiten anzeigen, ernsthaft beeinträchtigen.
Das unnötige erneute Rendern von Komponenten erfolgt aus vielen Gründen. Beispielsweise sind Funktionen, die in Komponenten funktionieren, möglicherweise nicht so effektiv wie sie möglicherweise sind, oder es wird möglicherweise eine ganze Liste von Komponenten neu gezeichnet, wenn nur ein neues Element zu dieser Liste hinzugefügt wird. Es gibt Tools, mit denen Sie herausfinden können, welche Komponentenbäume zu lange gerendert wurden. Unter diesen kann Folgendes festgestellt werden:
- Das Chrome Developer Tools-Dashboard.
- React Developer Tool Profiler.
▍ Leistungsanalyse mit dem Leistungsfenster der Chrome Developer Tools
React verwendet
die User Timing API , um die Zeit zu messen, die in jedem Schritt des Lebenszyklus der Komponente benötigt wird. Leistungsinformationen für React-Anwendungen können mithilfe der Chrome Developer Tools erfasst und analysiert werden. Auf diese Weise können Sie nachvollziehen, wie effektiv die Komponenten verbunden, auf der Seite angezeigt und während der Benutzerinteraktion mit der Seite oder beim erneuten Laden getrennt werden.
Analyse der KomponentenleistungHier finden Sie gutes Material zu diesem Thema, das sich mit der Untersuchung der Leistung von Anwendungen befasst, die mit React 16 mithilfe der Chrome-Entwicklertools geschrieben wurden.
Die User Timing API wird nur während der Entwicklung verwendet. Es ist in der Produktion ausgeschaltet. Unter solchen Bedingungen können schnellere Implementierungen solcher Mechanismen verwendet werden, ohne die Leistung ernsthaft zu beeinträchtigen. Die Notwendigkeit solcher Mechanismen wurde zu einem der Gründe für die Entwicklung des neueren API-Profilers.
▍Analyse der Leistung mit dem Profiler aus den React-Entwicklertools
Mit der Veröffentlichung der React
react-dom 16.5-Bibliothek in den React-Entwicklertools kann ein neues Panel namens Profiler verwendet werden. Hier können Sie die Leistung des Komponenten-Renderings analysieren. Dies erfolgt über die Profiler-API, die Informationen zur Ausführungszeit von Vorgängen für alle Komponenten sammelt, die neu gerendert werden.
Das Profiler-Bedienfeld ist eine eigenständige Registerkarte in den React-Entwicklertools. Wie im Leistungsfenster der Chrome Developer Tools-Symbolleiste können Sie hier Informationen zu Benutzeraktionen und zum erneuten Laden von Seiten aufzeichnen, um Daten zur Analyse der Komponentenleistung zu erfassen.
Nach Abschluss der Datenerfassung wird das sogenannte „feurige Diagramm“ angezeigt, das die zum Rendern der Komponenten auf der Seite erforderliche Zeit anzeigt.
Flaming Profiler-ZeitplanHier können Sie zwischen verschiedenen Commits oder Status wechseln, wenn DOM-Knoten hinzugefügt, gelöscht oder aktualisiert wurden. Auf diese Weise erhalten Sie weitere Informationen darüber, wie viel Zeit für verschiedene Vorgänge mit Komponenten aufgewendet wird.
Commit-Informationen im Profiler anzeigenDie hier dargestellten Screenshots stellen die Daten dar, die als Ergebnis der Aufzeichnung von Benutzeraktionen in einer einfachen Anwendung erhalten wurden. Die Anwendung lädt eine Liste der angesagten GitHub-Repositorys herunter, wenn auf eine Schaltfläche geklickt wird. Wie Sie sehen können, gibt es hier nur zwei Commits:
- Eine ist für die Ladeanzeige, die beim Laden der Artikelliste angezeigt wird.
- Ein anderes stellt den Moment dar, in dem der Aufruf der API abgeschlossen ist und die Liste im DOM angezeigt wird.
Die Abbildung auf der rechten Seite zeigt nützliche Metadaten, die Festschreibungsinformationen oder Komponentendaten wie Eigenschaften und Status enthalten.
MetadatenWenn Sie mit dem React-Profiler arbeiten, können Sie auch andere Daten anzeigen, die durch verschiedene Diagramme dargestellt werden. Weitere Informationen zum React-Profiler finden Sie in
diesem Beitrag im React-Blog.
Um unser Beispiel ein wenig zu komplizieren, betrachten Sie eine ähnliche Situation, aber jetzt werden wir viele API-Aufrufe ausführen, um Trend-Repositorys in verschiedenen Programmiersprachen (wie Golang, JavaScript usw.) herunterzuladen. Wie zu erwarten ist, stehen uns mit diesem Ansatz mehr Commits zur Verfügung.
Erhöhen der Anzahl der Commits, während das Arbeitsschema mit der Anwendung verkompliziert wirdSpätere Commits zeichnen sich durch längere Zeitpläne aus, sie haben mehr gelbe Farbe. Dies bedeutet, dass die Zeit, die alle Komponenten benötigen, um das Rendering abzuschließen, mit zunehmender Größe der Liste der Elemente auf der Seite zunimmt. Dies liegt an der Tatsache, dass jede Komponente in der Liste bei jedem neuen Aufruf der API erneut gerendert wird. Dies hilft, ein Problem zu identifizieren, das leicht gelöst werden kann. Die Lösung besteht darin, dass die Elemente in der Liste nicht erneut gerendert werden müssen, wenn neue Elemente zur Liste hinzugefügt werden.
▍ Minimierung unnötiger Rendering-Vorgänge für Komponenten
Es gibt viele Möglichkeiten, unnötige Vorgänge zum erneuten Rendern von React-Komponenten zu beseitigen oder zumindest die Anzahl solcher Vorgänge zu minimieren. Betrachten wir einige davon.
Hier und
da - ein paar nützliche Videos, in denen die Verwendung des React-Profilers zum Auffinden von Engpässen in Anwendungen erläutert wird.
Leistungsbewertung und Anwendungsoptimierung
Neben der Analyse von DOM-Mutationen und Komponenten-Rendering-Operationen gibt es noch andere Phänomene auf höherer Ebene, die es wert sind, untersucht zu werden. Für eine umfassende Bewertung der Site-Leistung können Sie
Lighthouse verwenden .
Es gibt drei Möglichkeiten, eine Webseite mit Lighthouse zu testen:
- Verwenden der Node.js.-Befehlszeilenschnittstelle
- Verwenden der Chrome- Erweiterung .
- Verwenden Sie die Audits-Symbolleiste der Chrome Developer Tools.
So sieht Lighthouse im Audits-Bereich aus.
Leuchtturm im Audits-BereichLighthouse benötigt normalerweise nicht viel Zeit, um alle benötigten Daten von der Seite zu sammeln und viele Überprüfungen dieser Daten durchzuführen. Nach Abschluss dieser Vorgänge zeigt Lighthouse einen Bericht mit zusammenfassenden Informationen an.
Um zu verstehen, dass beim Laden einer Seite in den Browser zu viel JavaScript-Code geladen werden muss, und um zu dem Schluss zu kommen, dass die Menge dieses Codes reduziert werden sollte, müssen Sie die folgenden Sätze aus dem Bericht beachten:
- Beseitigen Sie Render-blockierende Ressourcen
- Die Startzeit von JavaScript ist zu hoch
- Vermeiden Sie enorme Netzwerknutzlasten
Wenn Lighthouse diese Probleme meldet, weil die Seite ein zu großes JS-Bundle verwendet, sollten Sie das Bundle als erstes in Betracht ziehen, um das Problem zu beheben. Tatsache ist, dass wir keinen Grund haben, diese Gelegenheit nicht zu nutzen, wenn der Code in Fragmente unterteilt werden kann, von denen einige nur für die Arbeit mit bestimmten Seiten der Website benötigt werden.
▍ JS-Bündeltrennung
Eine Möglichkeit, den Code in Teile aufzuteilen, besteht in der Verwendung dynamischer Importe:
import('lodash.sortby') .then(module => module.default) .then(module => doSomethingCool(module))
Die Importsyntax mag wie ein Funktionsaufruf aussehen, aber Sie können jedes Modul mithilfe des Versprechungsmechanismus asynchron importieren. In diesem Beispiel wird die
sortby Methode zuerst aus der
lodash Bibliothek importiert und anschließend die
doSomethingCool() -Methode
doSomethingCool() .
In diesem Beispiel geschieht Folgendes:
- Der Benutzer klickt auf eine Schaltfläche, um die drei Zahlen zu sortieren.
- Importierte
lodash.sortby . - Die Methode
doSomethingCool() wird doSomethingCool() , die die Zahlen sortiert und im neuen DOM-Knoten anzeigt.
Dies ist ein äußerst einfaches, künstliches Beispiel, denn wenn jemand Zahlen auf einer Webseite sortieren muss, verwendet er wahrscheinlich nur die Methode
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" }
Verschiedenes
, . , , . — . Warum ist das so? , , .
▍Atomic CSS
CSS- (Atomic CSS) , . , , :
<button class="bg-blue">Click Me</button>
padding :
<button class="bg-blue pa2">Click Me</button>
Usw.
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> ); }
:
, . , ,
recompose .
React Conf, .
, , JavaScript- .
, React , 1.5 ( ). , - , , , , , , , .
Zusammenfassung
, React-. , , :
- , :
- Performance Chrome.
- React.
- , ,
shouldComponentUpdate() . - , ,
PureComponent . React.memo .- Redux (,
reselect ). - (,
react-window ).
- Lighthouse.
- , :
- —
React.lazy . - —
loadable-components . - - , .
Workbox . - — (
renderToNodeStream renderToStaticNodeStream ). - ?
react-snap . - , CSS-in-JS.
- , .
React A11y react-axe . - - , , , .
, React, , :
« » . -, .
Liebe Leser! React-?
