WeChatアプレットリクエストの前処理方法の詳細な説明

質問

一部のページでは、onload でデータを要求してからビューをレンダリングするため、ミニプログラムのページがジャンプする前にデータ要求ステップを先に進めることができれば、より早くデータを要求できます。最適化の効果は、ページ ジャンプに必要な時間によって異なります。

必要

ジャンプ時間を最大限に活用し、事前にインターフェース データを要求しながら、古いプロジェクトを変更するコストを最小限に抑えるには、要求の前処理方法が必要です。現在私が担当している小規模なプログラム プロジェクトでは、インターフェース データを要求するために axios を使用しているため、ここでは axios での post の変換アイデアの例のみを示します。ここで、リクエスト時に事前に要求する必要があるインターフェースをキャッシュし、2 番目のリクエストが行われたときに最初のリクエストの promise を返すように post メソッドを書き直して、新しいリクエストを開始する必要がないようにします。

具体的な手順

1. postメソッドを変更する

http ファイル

let instance = axios.create({ // axios リクエストインスタンスを作成する // 一部のコードを省略});

let { post } = instance; // 元の投稿メソッドを保存する let cache = {}; // キャッシュを要求する instance.post = function(...list) {

 [url, data = {}] = リストにします。

 if (cache[url]) { // 事前にリクエストされたプロミスを返す
 pre = cache[url]とします。
 キャッシュ[url]を削除します。
 戻り値:
 }

 if (data.pre) { //pre を事前リクエストとして使用して、事前リクエストかどうかを判断します delete data.pre;
 キャッシュ[url] = post(...リスト)
 cache[url]を返します。
 }

 return post(...list); //通常のリクエスト}

2. 使用

ジャンプ前のページ、つまり前のページ

// 一部のコードを省略します...

// これは次のページのインターフェースから要求されるデータです。wx.navigateTo がジャンプする前に事前に要求して保存します。
$http.post('/act/activities/lucky:search', { activityId: 12 , pre: true })

wx.nextTick(() => { //wx.nextTickを使用すると、上記のリクエストを最初に送信してからジャンプすることができますwx.navigateTo({
 url: `${TYPE_TO_ROUTE_MAP[templateType]}?id=${activity.activityId}`
 });
})

// 一部のコードを省略します...

効果

プリロードを使用しない

プリロードの使用

赤いボックスの幅の差は、インターフェース データを事前に要求するのに必要な時間を示しており、約 100 ミリ秒です。以下の静的リソース アドレスはインターフェイス データから取得されるため、輻輳後のリソースの読み込み時間を約 100 ミリ秒短縮することに相当します。

要約する

• 原理としては、アプレットジャンプの時間を利用して事前にデータをリクエストするため、パフォーマンスの低い携帯電話ではより有利になります。開発者ツールでは約 100 ミリ秒の節約になるようですが、次の 2 つの制限があります。
• ページが読み込まれ、事前に要求されたインターフェースデータ内のデータが必要です
• 前のページで事前リクエストを開始し、ジャンプ時にnextTick処理を実行する必要がある

結果として、この最適化の利点は、プロジェクト全体にとっては実際にはあまり役に立ちません。

WeChatミニプログラムリクエスト事前配置に関するこの記事はこれで終わりです。より関連性の高いミニプログラムリクエスト事前配置コンテンツについては、123WORDPRESS.COMで以前の記事を検索するか、以下の関連記事を引き続き閲覧してください。皆様が今後も123WORDPRESS.COMを応援してくれることを願っています。