成人白浆超碰人人人人,成人做受黄大片,成人h动漫精品一区二区

ミニプログラムの実行プロセス

最適化項目

最后

ホームページ

WeChat アプレット

ミニプログラム開発

ミニプログラムを最適化する方法を段階的に説明しましょう。（実踐まとめ）

青燈夜游

Dec 30, 2021 am 10:28 AM

小さなプログラムを最適化するにはどうすればよいですか?この記事では、ミニプログラムの最適化の実踐をまとめ、ミニプログラムの最適化項目について説明します。

ミニプログラムを最適化する方法を段階的に説明しましょう。（実踐まとめ）

ミニプログラムの実行プロセス

まず、ミニプログラムの動作原理を整理しましょう。休むことなく木を切ります。

百聞は一見に如かず:

ミニプログラムを最適化する方法を段階的に説明しましょう。（実踐まとめ）

畫像の內容を注意深く理解することをお勧めします。小さなプログラムに対する強力な理論的サポートがあります。開発と最適化の方向性。

最適化項目

1. 下請けの適正利用

WeChat miniのポイントプログラム高速起動が特徴ですが、この機能に関して公式はパッケージサイズを2Mまでと制限しています。

下請けはミニプログラムの最適化にとって最優(yōu)先事項であり、これによりミニプログラムの起動速度とページを開く速度を効果的に向上させることができます。

パッケージは[本體パッケージ][通常下請け][獨立下請け]に分かれています。

[メインパッケージ] には、スタートアップページまたは TabBar ページのみを配置する必要があります。

[通常のサブパッケージ] TabBar ページ以外のページを配置するため、ページ數やモジュール數に応じて複數のサブパッケージを分割し、サイズを小さくすることを推奨します。ユーザーが対応するサブパッケージページに入ると、このパッケージは必要な場合にのみダウンロードされるため、パッケージのオンデマンド読み込みも可能になり、リソースの無駄が回避されます。通常のサブパッケージ內のページからミニプログラムを起動する場合、最初にメインパッケージをダウンロードし、次にサブパッケージをダウンロードする必要があります。

[獨立サブパッケージ] 獨立性の高いページをいくつか配置し、獨立サブパッケージ內のページからミニプログラムを起動すると、獨立サブパッケージのみがダウンロードされるため、起動が大幅に改善されます。ミニプログラムの速度ユーザーが、対応するパッケージをダウンロードするために戻る前に、TabBar ページまたは他の通常のサブパッケージページに移動するとき。

獨立したサブパッケージにはコンポーネントやログインなどのグローバルなものを含めることはできず、他のパッケージからリソースを導入するとエラーが発生します。

著者は、外注する前にページと機能を整理することを推奨しています。外注の制限は、パッケージのサイズが 2M を超えることではなく、ビジネスと機能に応じて柔軟に分割する必要があります?，F在の通常のネットワーク狀況では、2M サブパッケージと 500KB サブパッケージのダウンロードに特に大きな違いは感じられないかもしれませんが、ネットワークが弱い環(huán)境では、この 2 つの違いは大きく異なります。そうしないと、ユーザーが空白の畫面を表示する時間に大きなギャップが生じます（個人的な経験です。これは胸が張り裂けるようなものであると言えます）。

たとえば、TabBar ページから直接アクセスでき、頻度が高い二次ページをサブパッケージに配置し、その後にその他のページを配置します。より深いページまたは、それほど重要ではないページをパッケージに分割するか、注文ビジネスモジュール全體のページをパッケージに分割します。

パッケージが分割された以上、當然ながら【サブパッケージの事前ダウンロード】は必須となります。

公式サイトのルールに従って設定することができ、ユーザーが特定のページに入ると、事前にパッケージがダウンロードされます。

2. オンデマンドでの注入

アプレットがパッケージをダウンロードした後、パッケージのすべての

JS## が開きます。 #Merge インジェクション、一部の未訪問のページおよび未使用のカスタムコンポーネントも実行環(huán)境にインジェクションされます。注入時間とメモリ使用量に影響します。私たちが望んでいるのは、パッケージのダウンロードが完了したときに、これから開こうとしているページのコードのみが挿入されることです。

これは、ミニプログラムの開始や下請けページへのジャンプがホワイトスクリーンタイムに影響を與えるポイントでもあります。

{
    "lazyCodeLoading" : "requiredComponents"
}

3. setData# # のいくつかの呼び出し原則を明確にする#ミニプログラムは WeChat クライアント上で実行されます。つまり、wxml

、

wxs、wxss はすべてクライアント上で実行され、オペレーティングシステム環(huán)境レンダリングスレッドとロジックスレッドの 2 つのスレッドに分割されます。レンダリング層はレンダリングに WebView を使用し、ロジック層は JSCore を使用して JS コードを実行します。 wxml と wxss はレンダリングスレッドで動作し、wxs は論理スレッドで動作します。 2 つのスレッド間で通信するにはどうすればよいでしょうか?

#転送ステーションとしてクライアントを介して通信

レンダリング層はイベントをトリガーし、クライアントに応答します。ロジック層は setData を渡し、データをクライアントに送信します。両側のデータは文字列に変換されて送信されます。クライアントは個別に応答し、応答はリアルタイムではありません。これは、ロジック層で
setData

モデルは図に示すとおりです。

ネイティブミニプログラムを最適化する方法を段階的に説明しましょう。（実踐まとめ）はクライアントです。

回到問題，setData在邏輯層調用，讓渲染層快速響應取決于邏輯層到客戶端的數據傳輸效率，而這個傳輸效率又取決于你傳輸數據的大小，所以在調用setData的時候應該盡可能減少數據傳輸大小。

Native會將wxml轉換成 js對象，然后和setData傳進來的對象做差異化對比，將差異化渲染到視圖上。

綜上原理，我們調用setData應該遵循幾個原則：

盡可能減小需要 setData 數據的大小，JSON.stringify后不超過 256KB。
避免將不需要渲染的數據（不在wxml中綁定的數據）傳入setData，減少差異對比耗時。
避免過于頻繁調用setData，會導致邏輯層業(yè)務繁忙，一直在處理setData的傳輸隊列，而導致抽不開身去處理渲染層的響應，從而導致渲染阻塞，頁面出現卡頓，甚至setData無效。如果可以的話，可以采用節(jié)流等方式進行優(yōu)化。
盡可能將多個需要更新的數據合并為一次setData，減少通信過程。
避免后臺頁面觸發(fā)setData，也會占用Js線程，有可能會造成阻塞，導致真正需要setData的數據沒有響應

減小setData的數據大小通常在列表場景中，通常只更新需要更新的下標：

const needRefresh = `list[${index}]`
// 寫法一
setData({
    [needRefresh]: &#39;新值&#39;
})

// 寫法二
setData({
    [`list[${index}]`]: &#39;新值&#39;
})

// 寫法三
setData({
    &#39;list[0]&#39;: &#39;新值&#39;
})

// 寫法四
const needRefresh = `list[${index}].disabled`
setData({
    [needRefresh]: &#39;新值&#39;
})

// 寫法5 更新對象
setData({
    &#39;personal.name&#39;:&#39;xxx&#39;
})

如果有變量，就需要放在[]內。

4. 控制圖片大小比例

圖片太大會增加下載時間和內存的消耗，并且為了用戶體驗，應該控制圖片的高寬比例，防止圖片變形或者被裁切（這個問題可以根據image的mode屬性進行調整）。

一個合格的圖片應該滿足以下兩點：

圖片寬高乘積 <= 實際顯示寬高乘積 * (設備像素比 ^ 2)。
顯示的高/寬與原圖的高/寬不超過 15%。

由于這些圖片都出自 UI，所以在這一條優(yōu)化上你需要做的是：拿著這兩條指標去跟 UI battle。

good lucky ～

以上第一條就是和設備的【dpr】相關，移動端開發(fā)一定要理解【dpr】，這里就不多贅述了。

我們應該合理的采用圖片資源，例如在【dpr】為 2 的設備上，一個 60x60 的元素區(qū)域顯示的圖片為了兼顧清晰度與資源大小，圖片大小不應該超過 120x120，同理，【dpr】為 3 設備，圖片應該不超過 180x180。

我們小程序的資源都放在cdn上，可以利用cdn的圖片云處理功能對資源請求進行控制，我司用的七牛云和又拍云，如下：

// 七牛云
`${_src}?imageMogr2/thumbnail/!${scaleRatio}p`

// 又拍云
`${_src}!/scale/${scaleRatio}`

更多云處理功能可以挪步官網：七牛云（https://developer.qiniu.com/dora/8255/the-zoom）和又拍云（https://help.upyun.com/knowledge-base/image/）

我們在小程序內自定義了圖片組件 cus-image , 該組件會根據【dpr】對圖片進行云處理。并提供了 ratio 屬性靈活調整圖片大?。ㄒ驗檫\營方上傳的圖片可能在不同尺寸的元素區(qū)域內引用，所以需要開發(fā)人員靈活控制）。

5. 避免短時間內發(fā)起太多請求

小程序中wx.request、wx.uploadFile、wx.downloadFile的發(fā)起的網絡請求短時間內最大并發(fā)限制是 10 個，超過 10 個就會導致請求阻塞。而圖片請求的并發(fā)最大數量為6。

那短時間怎么去界定呢？

【網絡請求】耗時超過 300ms 的請求并發(fā)數不超過 10 個（一般不會出現這個問題，如果有這個問題那可能該考慮拆分頁面、拆分業(yè)務或者合并接口了。）
【圖片請求】同域名耗時超過 100ms 的圖片請求并發(fā)數不超過 6 個

例如：300ms內發(fā)送了12個請求，其中10個請求在300ms內就請求完成了，只有2個請求超過300ms，這樣是沒有問題的。

【解決方案】

在接口請求上我們應該盡可能的減少請求數量。
圖片可以設置懶加載lazy-load。
圖標可以使用雪碧圖。
將圖片資源拆分在多個域名下。
自定義一個分片處理函數，將請求拆分成數個階段發(fā)出。

function interelTasks(task,wait){
    this.data.timer = setInterval(()=>{
        task()
    }, wait)
}

async function task(promiseList = []){
    const result = await promise.all(promiseList)
    // do something
}