一、是什么

小程序啟動(dòng)會(huì )常常遇到如下圖場(chǎng)景：

這是因為，小程序首次啟動(dòng)前，微信會(huì )在小程序啟動(dòng)前為小程序準備好通用的運行環(huán)境，如運行中的線(xiàn)程和一些基礎庫的初始化

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

• 下載小程序代碼包
• 加載小程序代碼包
• 初始化小程序首頁(yè)

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

整體流程如下圖：

二、手段

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

加載

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

• 代碼包的體積壓縮可以通過(guò)勾選開(kāi)發(fā)者工具中“上傳代碼時(shí)，壓縮代碼”選項

• 及時(shí)清理無(wú)用的代碼和資源文件

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

并且可以采取分包加載的操作，將用戶(hù)訪(fǎng)問(wèn)率高的頁(yè)面放在主包里，將訪(fǎng)問(wèn)率低的頁(yè)面放入子包里，按需加載

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

渲染

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

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

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

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

除此之外，對于一些獨立的模塊我們盡可能抽離出來(lái)，這是因為自定義組件的更新并不會(huì )影響頁(yè)面上其他元素的更新

各個(gè)組件也將具有各自獨立的邏輯空間。每個(gè)組件都分別擁有自己的獨立的數據、setData調用

三、總結

「小程序啟動(dòng)加載性能」：

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

「小程序渲染性能」：

• 避免不當的使用setData
• 使用自定義組件