ReactJSは、JavaScriptの速度と独自のレンダリング機能を組み合わせて、動的でパフォーマンス指向で、ユーザー入力に応答するアプリケーションを実現します。
JSレポートの状態2018
は、ReactJSがこのような短い時間で非常に人気を集めている主な理由としてパフォーマンスを挙げています。 シングルページ アプリケーション (SPA) を構築するためのオプションに関しては、React は Angular およびその他の JavaScript フレームワークおよびライブラリよりもパフォーマンス上の利点を提供します。 ReactはJavaScriptで仮想DOMを維持しているため、ドキュメントを目的の状態にするために必要な最小限の変更をすばやく判断できます。 Reactコンポーネントの状態はJavaScriptに保存されるため、DOMへのアクセスを回避できます。
小規模なアプリケーションでは、ReactJS が提供するパフォーマンスの最適化は十分です。 ただし、アプリケーションが複雑なビューを含むように進化するにつれて、仮想 DOM の維持と並列化はコストのかかる問題になる可能性があります。 大規模なアプリケーションは、巨大で、分岐され、複雑なレンダリング ツリーです。 ノードにプロップを更新するたびに、Reactはノードから、ブランチの下、最後に、仮想 DOM 比較が行われるリーフからレンダーツリーを再構成する必要があります。
しかし、ユーザーベースが大きくなるにつれて、アプリケーションは複雑性が高まり、より多くの依存関係を持ち、より多くのサードパーティプラグインを組み込む傾向があります。 パフォーマンスのボトルネックに当たる可能性は、拡大するだけです。 さまざまなサイズや種類の何百万ものWeb対応デバイス上のアプリケーションの増え続ける数とそれを掛け合わせると、潜在的なパフォーマンスの悪夢を回避することはできません。
たとえば、ブラウザで Web アプリケーションを操作する場合、ユーザーは 1 秒あたり 60 フレームを想定しており、各フレームのレンダリングに 16.7 ミリ秒しか表示されません。 アプリの処理速度が遅いときは、ユーザー イベントへの応答に時間がかかりすぎて、データの処理や新しいデータの再表示に時間がかかりすぎることがよくあります。 ほとんどの場合、Clock で複雑なデータ処理を行うのではなく、再レンダリングに時間を浪費しています。
間違いなく、最も完璧に設計され、最適化されたReactアプリでさえ、パフォーマンス監視ツールを必要とします。
プロファイラを使用したコンポーネントマウントの監視
コンポーネントの再レンダリング回数と、リソースと所要時間は、運用環境での React アプリケーションのパフォーマンスについて多くのことを言うことができます。 プロファイラコンポーネントは、コンポーネントサブツリーの「マウント」または「更新」時間を測定する組み込みのReactコンポーネントです。 コンポーネントが更新またはマウントされるたびに、プロファイラーのonRender関数にはタイムスタンプが付けられます。 プロファイラは、Reactアプリの問題を表示するアプローチ可能な方法を提供します。
import { unstable_Profiler as Profiler } from "react"
<Profiler id="Counter" onRender={callback}>
<Counter />
</Profiler>
idの小道具はレポートを識別し、onRender関数はカウンタコンポーネントがマウントまたは改訂されたときに引数に関連付けられます。
function callback(id, phase, actualTime, baseTime, startTime, commitTime) {
log("id: " + id, "phase:" + phase, "actualTime:" + actualTime, "baseTime: " + baseTime, "startTime: " + startTime, "commitTime: " + commitTime)
}
関数の引数は 、Counter コンポーネントがレンダリングされた時刻のタイムスタンプを収集します。 各パラメーターを見てみましょう。
id. プロファイラ コンポーネントに関連付けられている一意の ID。
フェーズ。 これは、「マウント」フェーズまたは「更新」フェーズのどちらでフェーズを検出します。
実際の時間. プロファイラーがコミットされた更新をレンダリングするのにかかった時間。
ベースタイム。 プロファイラ ツリー内のコンポーネントの 1 つがマウントまたは更新にかかった時間。
開始時間。 タイム スタンプ プロファイラが子孫のマウント/レンダリング時間の測定を開始します。
コミット時間。 React が更新をコミットするのにかかった時間。
React開発者ツールを使用して再レンダリングされるコンポーネントのモニタリング
開発中に、どのコンポーネントが再レンダリングされるのかを知れば、さまざまなパフォーマンスのボトルネックからアプリケーションを運用環境に保存できます。 React 開発者ツールは、コンポーネントの境界を再レンダリングする際に、色を付けて開発者にとってシンプルにします。 メインコンポーネントが再レンダリングされると、 カウンタ コンポーネントと Count コンポーネントをキャプチャするエッジが一時的にハイライトされます。
表示される色の種類は、コンポーネントが再レンダリングされる頻度や頻度によって異なり、どのコンポーネントが最も頻繁に更新されているかを簡単に識別できるため、適切に最適化できます。
|緑 – 低周波数更新
|青 – 平均周波数更新
v 赤 – 非常に頻繁な更新を示します。
React.addons.Perf を使用したパフォーマンスの問題の特定
Perf を起動するには、コンソールから Perf.start() を呼び出し、アクションを記録し 、Perf.stop() を呼び出して Perf を停止する必要があります。 次に、次のいずれかのメソッドを呼び出して、有効な測定値のセットを表示できます。
Perf.printWasted()
あなたがReact.addons.Perf で呼び出す最も有用なメソッドです。 Perf.printWasted()は、レンダツリーの縮小と仮想のDOを比較する時間を示します。 これらのコンポーネントは、Reactアプリケーションのパフォーマンスを向上させるための主要な候補として上記の項目です。
Perf.printInclusive() / Perf.printExclusive()
コンポーネントを レンダリングするために適切な時間 を返す 時間の量を返します。 レンダリングによってトリガーされるパフォーマンスの問題は、通常、上記のメソッドを使用してレンダリングしないことによって解決されるため、ほとんどの開発者はこのメソッドを非常に便利に見つけることができません: Perf.printWasted().
ただし、この方法は、ライフサイクルメソッドで大量の計算を実行しているコンポーネントを識別するのに役立ちます。 printの問題を修正した後、それはそれらの貴重なリソースを占有しているあなたの最適化されていないアプリケーションコードであることを学びます。 あるいは、標準の Chrome DevTool の JavaScript プロファイラを利用して、最も負荷の高い関数呼び出しを直接見ることもできます。
Perf.printDOM()
Perf.printDOM() は 、React ツリーのレンダリング中にトリガーされたすべての DOM 操作を示します。 あなたがかなりの時間ReactJSで遊んでいたなら、おそらくこれが最も面倒な部分だと知っています。 アプリが非常に複雑な場合に行と列の無限のリストを参照するには、正確に何が間違っていたかを検出するために永遠かかることがあります。
コンポーネントの最初のセットがレンダリングされると、将来の再レンダリングは既存のDOMノードを再利用し、新しいノードを作成しないことを期待しています- Reactの仮想DOMによって与えられ、すべてのReact開発者によって付与された最適化。
Perf.printDOM() は、独特の高価なブラウザの奇妙さを見つけたり、主要で予測不可能なDOMの変更を監視するのに便利です。
ReactJS Webアプリケーションの合成モニタリング
上記のメソッドは React アプリケーションのパフォーマンスを監視するために不可欠ですが、アプリケーションの使用中に一般的なユーザーが実行するアクションを模倣できません。 合成監視プラットフォームは
、スクリプトレコーダーと組み合わせて
、事前に記録されたスクリプトを実行および再生し、実際のブラウザでユーザートランザクションと典型的なユーザーアクションをシミュレートすることができます。 たとえば、基本的なナビゲーション、フォームの送信、ショッピング カートのトランザクション、オンライン ゲーム、スクロール速度、アニメーションなどです。
Perfは、ツリーのレンダリングや仮想DOMと実際のDOMの比較で失われた時間を監視するのに最適なツールですが、アプリケーションを使用している間にユーザーが経験する可能性のあるものには変換されません。 合成
Web アプリケーション監視
ソリューションは
、Dotcom-Monitor
が提供するソリューションと同様に、さまざまな監視テスト スクリプトを作成するための使いやすいスクリプト ツールで構成されています。 これらのスクリプトは、プライベートテスト環境で実行でき、Web アプリケーションでさまざまなパラメータを定期的にチェックします。 実際のブラウザを使用する合成監視ツールを使用すると、最も正確なパフォーマンス結果を得ることができます。
さらに、合成監視は、さまざまなデバイス、ブラウザー、および地理的な場所を使用して実行できます。 シングル ページ アプリケーションでは、最初のページ読み込み速度はエンド ユーザーのエクスペリエンスほど重要ではありません。 アプリケーションが稼働していることを確認することが重要であるだけでなく、機能も監視する必要があります。 たとえば、ユーザーが必要なアクションを実行し、サードパーティのサービスや API が原因で遅延や問題が発生している場合は、何が発生するかなどが考えられます。
Web アプリケーションの監視の目的は、問題が多数のユーザーに影響を与える前に、問題を特定するプロセスを自動化することです。 合成監視を使用すると、特定の React アプリケーションの要件に基づいてアラートを設定し、問題が発生したときにすぐに通知を受け取ることができます。 上記の他のツールとは異なり、合成監視には積極的なアプローチが必要であり、手作業でテストを実行する必要がある時間のかかるプロセスから解放されます。
ReactJSアプリケーションの監視:結論
これらのツールは開発環境で React アプリケーションを監視するのに役立ちますが、運用環境でのパフォーマンスの監視は別の大きな課題であり、より重みを持ちます。 「私のマシン上の作品」のメンタリティに屈することは、生産中のアプリケーションのパフォーマンスが危機に瀕しているときの注意深い話です。 一方、合成監視ツールは、開発者が想像した一部の決まり文句テストケースからではなく、エンドユーザーの視点からパフォーマンスレポートを提供します。 それでも、ReactJSのパフォーマンス監視をレベルアップしたい場合は、
今すぐ30日間の無料のDotcom-Monitorのトライアル
を入手してください。
