提高微信小程序的應(yīng)用速度
2021-10-22 10:01:58

?

?

一、是什么

小程序啟動會常常遇到如下圖場景：

?

?

這是因?yàn)?，小程序首次啟動前，微信會在小程序啟動前為小程序?zhǔn)備好通用的運(yùn)行環(huán)境，如運(yùn)行中的線程和一些基礎(chǔ)庫的初始化

然后才開始進(jìn)入啟動狀態(tài)，展示一個固定的啟動界面，界面內(nèi)包含小程序的圖標(biāo)、名稱和加載提示圖標(biāo)。此時，微信會在背后完成幾項(xiàng)工作：

• 下載小程序代碼包
• 加載小程序代碼包
• 初始化小程序首頁

下載到的小程序代碼包不是小程序的源代碼，而是編譯、壓縮、打包之后的代碼包

整體流程如下圖：

?

?

二、手段

圍繞上圖小程序的啟動流程， 我們可以從加載、渲染兩個緯度進(jìn)行切入：

加載

提升體驗(yàn)最直接的方法是控制小程序包的大小，常見手段有如下：

• 代碼包的體積壓縮可以通過勾選開發(fā)者工具中“上傳代碼時，壓縮代碼”選項(xiàng)

• 及時清理無用的代碼和資源文件

• 減少資源包中的圖片等資源的數(shù)量和大?。ɡ碚撋铣诵con，其他圖片資源從網(wǎng)絡(luò)下載），圖片資源壓縮率有限

并且可以采取分包加載的操作，將用戶訪問率高的頁面放在主包里，將訪問率低的頁面放入子包里，按需加載

當(dāng)用戶點(diǎn)擊到子包的目錄時，還是有一個代碼包下載的過程，這會感覺到明顯的卡頓，所以子包也不建議拆的太大，當(dāng)然我們可以采用子包預(yù)加載技術(shù)，并不需要等到用戶點(diǎn)擊到子包頁面后在下載子包

?

?

渲染

關(guān)于微信小程序首屏渲染優(yōu)化的手段如下：

• 請求可以在頁面onLoad就加載，不需要等頁面ready后在異步請求數(shù)據(jù)
• 盡量減少不必要的https請求，可使用 getStorageSync() 及 setStorageSync() 方法將數(shù)據(jù)存儲在本地
• 可以在前置頁面將一些有用的字段帶到當(dāng)前頁，進(jìn)行首次渲染（列表頁的某些數(shù)據(jù)--> 詳情頁），沒有數(shù)據(jù)的模塊可以進(jìn)行骨架屏的占位

在微信小程序中，提高頁面的多次渲染效率主要在于正確使用setData：

• 不要過于頻繁調(diào)用setData，應(yīng)考慮將多次setData合并成一次setData調(diào)用
• 數(shù)據(jù)通信的性能與數(shù)據(jù)量正相關(guān)，因而如果有一些數(shù)據(jù)字段不在界面中展示且數(shù)據(jù)結(jié)構(gòu)比較復(fù)雜或包含長字符串，則不應(yīng)使用setData來設(shè)置這些數(shù)據(jù)
• 與界面渲染無關(guān)的數(shù)據(jù)最好不要設(shè)置在data中，可以考慮設(shè)置在page對象的其他字段下

除此之外，對于一些獨(dú)立的模塊我們盡可能抽離出來，這是因?yàn)樽远x組件的更新并不會影響頁面上其他元素的更新

各個組件也將具有各自獨(dú)立的邏輯空間。每個組件都分別擁有自己的獨(dú)立的數(shù)據(jù)、setData調(diào)用

三、總結(jié)

「小程序啟動加載性能」：

• 控制代碼包的大小
• 分包加載
• 首屏體驗(yàn)（預(yù)請求，利用緩存，避免白屏，及時反饋

「小程序渲染性能」：

• 避免不當(dāng)?shù)氖褂胹etData
• 使用自定義組件

參考文獻(xiàn)

• https://juejin.cn/post/6969779451177484296