React リクエストメカニズムを最適化するためのアイデア | JD Cloud テクニカルチーム

データロードのメカニズムに関して言えば、避けられないトピックの 1 つはフロントエンドのパフォーマンスです。実際、多くの e コマースポータルのホームページでは、リクエストを最も早い時点でロードできるようにするなど、垂直方向のカスタマイズと最適化が行われます。ページ、または前のページのプリロードなど。React18 のリリースにより、リクエストメカニズムについて常に議論され、フォローアップで明確な方向性が与えられました。

ページ内に 3 つのコンポーネント C1、C2、および C3 が順番にネストされており、各コンポーネントに対応するリクエスト F1、F2、および F3 がある場合、通常、ほとんどの人はデータフローの取得を達成するために useeffect 変数と状態変数を使用します。これは、次のことを意味します。これは、コンポーネントがロードされるときにリクエストを開始する必要があり、すべてのデータ取得がコンポーネントのライフサイクルで発生することを意味します。以下の図に示すように、このデータ取得メソッドをウォーターフォールレンダリングと呼ぶことができますが、次の問題があります。この方法では、コンポーネント間のデータ取得が順番に行われるため、実際には相互にブロックし合うことになり、コンポーネントの階層が深くネストされている場合、ページの読み込みに特に時間がかかります。

レンダリングしてから取得.png

このコンポーネント間のデータ取得の連続ブロックを防ぐために、コンポーネントがロードされる前に Promise.all を使用してすべてのリクエストデータを取得し、コンポーネントのロード時にすべてのデータが取得されるようにする別の方法があります。この方法では、コンポーネントの読み込み順序がお互いのデータフロー取得をブロックするという問題は解決されますが、リクエストが完了するまでページが空白になるという新たな問題も発生します。

最初にリクエストしてから render.png

リクエストしてからレンダリングする 2 番目の方法に基づいて、Suspense を使用してリクエストとレンダリングを並列化することもできます。Suspense を使用すると、コンポーネントがレンダリング前に特定の操作が終了するのを「待機」できます。また、この方法を実際のプロジェクトで使用する場合は、C1、C2、C3の対応するリクエストをどこに記述するかについても考慮する必要があり、コンポーネント内に記述した場合、やはり読み込みが遅くなります。分割されている場合は、ファイル分割やコード分割などのエンジニアリング上の問題を考慮する必要があります。

リクエスト中にレンダリングする.png

上記の 3 つの方法を注意深く分析した結果、それぞれに独自の長所と短所があることがわかりました。同時に、上記のスキームに基づいて、リクエストの最適化のアイデアも提供します。まず、リクエストされた JS を個別に分割し、ファイルリクエストを入力します。 .js、HTML ヘッダー内最初に request.js を導入し、async 属性を使用してスクリプトを並行して実行できるようにします (以下のコードに示すように)。これにより、リクエストを最初から発行できるようになります。後続の React コードによってパッケージ化された js ファイルの実行をブロックすることはできません。これはかなりのリクエストであり、レンダリングコードは並行して実行されます。

// html头部引入request.js
<script async src="/js/request.js"></script>

リクエストを送信した後、返されたデータを React コンポーネントに注入する必要がありますが、この部分はどのように注入するのでしょうか? 簡単なコード例は次のとおりです。

// request.js 中请求部分 evt是发布订阅模式的一个实例
window.InitData = {
    data: null,
    on: (msg, fn) => evt.on(msg, e => fn(e)),
    emit: (msg, data) => evt.emit(msg, data),
};

fetch().then(rs => {
    InitData.data = rs;
    InitData.emit("init_data", rs);
    return rs;
});

// index.js react代码逻辑

…….

useEffect(() => {
	if (InitData.data !== null) {
	    // 这里已经获取到了请求的返回值
		doSomething();
	} else {
		InitData.on("init_data", (data) => {			
		    // 利用发布订阅模式获取到数据
			doSomething();
		});
	}
}, []);

…….

一般的なアイデアは、まず HTML で個別にパッケージ化されたリクエストファイルをロードし、async 属性を追加してスクリプトを並列実行し、返されたデータをウィンドウにマウントするか、パブリッシュ/サブスクライブモードを使用してデータを React コンポーネントに挿入することです。これは実際には、リクエスト中のレンダリングモードに似ており、事前リクエストを使用して読み込み時間を短縮します。フォローアップでは、データ要求メカニズムを工学的な方法で解決したいと考えています。

今後、開発はリクエストしながらレンダリングするモードに傾くのは間違いなく、React の公式 Web サイトでは、データの取得など、将来的にはより多くのシナリオを可能にする予定もあります。 React18 をリリースしました。最近のオープンソースリミックスを含むサーバーサイドレンダリングでは、アプリケーションの読み込みを高速化するためにリクエストメカニズムも最適化されています。興味のあるパートナーも一緒に話し合ったり、練習したりすることを歓迎します。 Suspense 处理更

著者: JD Retail Liang Fengfeng

出典: JD Cloud 開発者コミュニティ

React リクエスト メカニズムを最適化するためのアイデア | JD Cloud テクニカル チーム

おすすめ

React リクエストメカニズムを最適化するためのアイデア | JD Cloud テクニカルチーム