WeChat ミニ プログラムがバックグラウンドで大量の冗長データを返す問題をどのように解決するか

この記事の内容は、WeChat アプレットがバックグラウンドで大量の冗長データを返す問題をどのように解決するかについてです。必要な友人が参考になれば幸いです。

プラットフォーム インターフェイスは配列を返します。配列には N 個のオブジェクトがあり、各オブジェクトには数十または数百のデータが含まれています。最も興味深いのは、各オブジェクトに必要なデータは 2 つだけであることです。種類:

datas:[
 {
 id:1000,
 name: "帅哥"，
 title: '...',
 b: '...',
 d: 0,
 f:0,
 ....
 },
 {
 id:1001,
 name: "美女"，
 title: '...',
 b: '...',
 d: 0,
 f:0,
 ....
 },
 ...
]

実際、必要なのはIDと名前だけで、それを解決するためのバックエンドを見つけることができます...忘れてください、でも私は儒学者になるために生まれました、穏やかでエレガント、私には勝てません戦い、私が勝てるなら、ただ戦えば終わりだ彼らに変えてもらいましょう！

過剰なデータ量、ネットワークリクエストに大きな影響を与えますか?正直なところ、数メガバイトの写真ではありませんが、データが返される速度の遅延は感じられません。

しかし、データが多すぎると、
ミニ プログラムのレンダリング インターフェイスに影響が出るのでしょうか?

答えは「はい」です。

一般的には、wxmlでデータをループして、item.idとitem.nameを取り出します。他のデータは関係ないように見えますが、公式ドキュメントのsetData関連情報を見ると、次のような文章がありますsetData小規模なプログラム開発 最も頻繁に使用されるインターフェイスは、パフォーマンス上の問題を引き起こす可能性が最も高いインターフェイスでもあります。よくある間違った使用法を紹介する前に、setData の背後にある動作原理を簡単に紹介しましょう。
動作原理
現在、アプレットのビュー層はレンダリングキャリアとして WebView を使用し、ロジック層は実行環境として独立した JavascriptCore を使用します。アーキテクチャ的には、WebView と JavaScriptCore は独立したモジュールであり、直接データを共有するチャネルはありません。現在、ビュー層とロジック層の間のデータ伝送は、実際には両者が提供するevaluateJavascriptを通じて実装されています。つまり、ユーザーが送信したデータを文字列に変換して渡す必要があり、同時に変換されたデータ内容を JS スクリプトにつなぎ合わせて実行することで、両側の独立した環境に渡す必要があります。 JSスクリプト。

evaluateJavascript の実行は多くの側面の影響を受けるため、ビュー層に到着するデータはリアルタイムではありません。

実際、setData 内のすべてのデータは文字列に変換され、文字列の郵便料金が JS スクリプトに変換され、ページは JS スクリプトに従ってページをレンダリングします。
それでは、できる限り少ないデータを送信することができるのですが、この時にこの大量のデータ列をバックグラウンドで返すのはこれに反するので、新しくtempDataを作成して必要なデータを取り出して、 WeChat アプレットのページ レンダリング速度により、WeChat アプレットの操作効率が向上し、WeChat アプレットのユーザー エクスペリエンスが最適化されます。 次のように書くことができます:

[mw_shl_code=applescript,true] var tempData = []
for(var i = 0; i < datas.length; i++) {
var tempObj = {}
tempObj.id = datas[i].id
tempObj.name = datas[i].name
tempData.push(tempObj)
}
console.log(tempData)
[/mw_shl_code]

または高階関数map()を使用します:

let tempDatas = datas.map(function(data){
 return {
 id: data.id,
 name: data.name 
 } 
 })
console.log(tempDatas)

このとき、setData({})を使用してレンダリング効率を向上させることができます

同時に、 2 つの setData テクニック

1. 次のようなオブジェクトがあります

obj:{a:"a",b:"b",c:"c"},

この時点でページにレンダリングされており、次にオブジェクトを変更します:

1) 通常のアプローチ

。

let obj = this.data.objobj.b = "我是后来修改的"this.setData({ obj: obj})

2) しかし、より最適化されたアプローチは

this.setData({ 'obj.b': "我是后来修改的"})

です。2 行のコードを節約するだけでなく、ページのレンダリング効率も向上します。2. 実際、これは 1 と似ています。つまり、オブジェクトは必要なときに配列 Array になります。配列内のデータの1つを変更するには、上記のメソッドを参照できます

this.setData({ 'array[1]': "我是后来修改的"})

配列を変更したい場合 複数のデータを変更する場合は、ループを書いてから配列を変更します。このとき、それは認識できません。次の形式で記述する必要があります

for(var i = 0;i < 5;i++) { 
 this.setData({ [`array[${i}]`]:"我是后来修改的" 
}) }

関連する推奨事項:

WeChat アプレットでの書式設定時間のコード実装

以上がWeChat ミニ プログラムがバックグラウンドで大量の冗長データを返す問題をどのように解決するかの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。