RadeventListener：クライアント側のフレームワークのパフォーマンスの物語

Reactの人気は中傷者がいないわけではありません。特にクライアント側のレンダリングのみに依存している場合、フレームワークのかなりのサイズ（約120キブの模倣）は、スタートアップ時間に大きな影響を与えます。クライアント側の水分補給によるサーバー側のレンダリングでさえ、パフォーマンス集約型のままです。 Reactは複雑な国家管理に優れていますが、そのリソースの要求は、より単純なアプリケーションの利点を上回ることがよくあります。これにより、強力なハードウェアでユーザーが効果的に除外できます。

Reactのパフォーマンスオーバーヘッドについての予約にもかかわらず、コンポーネントモデルとJSX構文に感謝しています。サーバー側のレンダリング（またはプアクトを使用して、私の好みの代替手段）は貴重な資産のままです。ただし、適切なクライアント側の使用法を決定することは依然として課題です。この記事では、ユーザーエクスペリエンスを向上させるためのReact Performanceの最適化に関する私の調査結果について詳しく説明しています。

コンテキスト：RSSフィードアプリ

私のRSSフィードアプリ、 bylines.fyiは、サーバーとクライアントの両方でJavaScriptを使用しています。私は本質的にクライアント側のフレームワークを嫌うことはありませんが、私の経験は2つの繰り返しの問題を強調しています。

1. フレームワークは、基礎となるWebプラットフォームを曖昧にし、それらが本当に有益であるときの深い理解を妨げる可能性があります。
2. フレームワークは、常に最適なユーザーエクスペリエンスを保証するとは限りません。

Webフレームワークのパフォーマンスに関するTim KadlecのHTTParchive研究は、これらの懸念を強化し、Reactの恒星以下のパフォーマンスを明らかにします。私の目標は、クライアント側の欠点を軽減しながら、Reactのサーバー側の利点を活用することでした。

実験：モバイルナビゲーショントグル

私のRSSアプリには、単純なモバイルナビゲーショントグルのためにクライアント側のJavaScriptが必要でした。これは、「Simple State」の典型的な例です。このような単純なタスクに対して過剰に使用されているReactコンポーネントがよく見られ、不必要なパフォーマンスのオーバーヘッドにつながります。この実験は、一見些細なことですが、フレームワークの選択がどのように拡大するかを理解するための重要なベンチマークとして機能します。ほとんどの開発者は、このようなマイナーな機能についてReactだけに依存していないことに注意することが重要ですが、結果はランタイムのパフォーマンスに対する建築的意味を示しています。

テスト条件

この実験では、4つのデバイスで3つのモバイルNAV実装を比較しました。

1. ステートフルなReactコンポーネント：サーバーレンダリングおよびクライアントhydrated。
2. ステートフルプアクトコンポーネント：サーバーレンダリングおよびクライアントhydrated。
3. ステートレスプアクト成分：サーバーレンダリング、水分補給されていません。標準のイベントリスナーを使用します。

デバイスが含まれています：

1. Nokia 2 Android電話（Chrome 83）
2. Asus X550ccラップトップ（Windows10、Chrome 83）
3. 第1世代iPhoneSE（Safari 13）
4. 第2世代iPhoneSE（Safari 13）

メトリック

次のメトリックは、実装とデバイスごとに測定されました。

1. 起動時間：フレームワークの読み込みと水分補給（反応/事前に）、またはイベントリスナーコード（EventListener）を含む。
2. 水分補給時間：起動時間のサブセット（反応/事前にのみ）。
3. モバイルNAVオープンタイム：イベント処理におけるオーバーヘッドの測定フレームワークの測定。

方法論

テストには、リモートデバッグとプロファイリング、シナリオとデバイスごとに10回の反復にわたって各メトリックのCPU時間の記録が含まれていました。ネットワークのパフォーマンスは要因ではありませんでした。

結果

データの複雑さにより、結果は最小、最大、中央値、および平均CPU時間を示す表形式で提示されます。 （詳細な表は、付随するスプレッドシートで入手できます）。重要な調査結果は次のとおりです。

• Reactの高いスタートアップと水分補給コスト：特にローエンドNokia 2で顕著です。
• PREACTのパフォーマンスの向上：反応よりも大幅に高速ですが、Nokia 2の理想的なフレーム予算を超えています。
• 優れたイベントリスナーのパフォーマンス：特に単純な相互作用のために、反応と事前に対応するよりも一貫して高速です。

ディスカッション：浅いコールスタック

パフォーマンスの違いは、フレームワークの負荷と水分補給のオーバーヘッドに由来しています。一部のパフォーマンストレードオフは開発者の利便性には避けられませんが、バランスはユーザーを犠牲にして開発者エクスペリエンスに対してあまりにも大きく傾いています。反応と事前の水分補給のコールスタックは、特に単純なタスクの重要な処理需要を強調しています。ネイティブのイベントリスナーを使用すると、シンプルな州管理のためのはるかに効率的なアプローチが提供されます。

結論と推奨事項

この分析は、Reactの批評としてではなく、フレームワークの選択とそのパフォーマンスへの影響を批判的に評価する励ましです。いくつかの戦略がパフォーマンスの問題を軽減できます：

1. 可能であれば、ステートレスコンポーネントにステートフルコンポーネントをリファクタリングします。
2. ステートレスコンポーネントのクライアント側のJavaScriptと水分補給を避けてください。
3. 単純なインタラクションのために、フレームワークに依存しないイベントリスナーを使用します。
4. 交差点オブザーバーまたはrequestIdleCallbackを使用して、ゆっくりと水和コンポーネントを使用します。
5. 事前に反応するより速い代替手段として考えてください。
6. navigator.deviceMemoryを使用して、低メモリデバイスのユーザーエクスペリエンスを適応させます。

さまざまなデバイスでパフォーマンステストを優先し、さまざまなハードウェア機能を持つユーザーに包括性を確保します。目標は、誰にとっても迅速でアクセス可能なWebエクスペリエンスである必要があります。

編集フィードバックとこの記事を公開してくれたCSS-Tricksのスタッフについては、Eric Baileyに感謝します。

以上がRadeventListener：クライアント側のフレームワークのパフォーマンスの物語の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。