一、是什麼
小程式啟動會常常遇到如下圖場景：
這是因為，小程式首次啟動前，微信會在小程式啟動前為小程式準備好通用的執行環境，如執行中的執行緒和一些基礎庫的初始化
然後才開始進入啟動狀態，展示一個固定的啟動介面，介面內包含小程式的圖示、名稱和載入提示圖示。此時，微信會在背後完成幾項工作：
- 下載小程式程式碼包
- 載入小程式程式碼包
- 初始化小程式首頁
下載到的小程式程式碼包不是小程式的原始碼，而是編譯、壓縮、打包之後的程式碼包
整體流程如下圖：
二、手段
圍繞上圖小程式的啟動流程， 我們可以從載入、渲染兩個緯度進行切入：
載入
提升體驗最直接的方法是控制小程式包的大小，常見手段有如下：
-
程式碼包的體積壓縮可以通過勾選開發者工具中“上傳程式碼時，壓縮程式碼”選項
-
及時清理無用的程式碼和資原始檔
-
減少資源包中的圖片等資源的數量和大小（理論上除了小icon，其他圖片資源從網路下載），圖片資源壓縮率有限
並且可以採取分包載入的操作，將使用者訪問率高的頁面放在主包裡，將訪問率低的頁面放入子包裡，按需載入
當使用者點選到子包的目錄時，還是有一個程式碼包下載的過程，這會感覺到明顯的卡頓，所以子包也不建議拆的太大，當然我們可以採用子包預載入技術，並不需要等到使用者點選到子包頁面後在下載子包
渲染
關於微信小程式首屏渲染優化的手段如下：
- 請求可以在頁面onLoad就載入，不需要等頁面ready後在非同步請求資料
- 儘量減少不必要的https請求，可使用 getStorageSync() 及 setStorageSync() 方法將資料儲存在本地
- 可以在前置頁面將一些有用的欄位帶到當前頁，進行首次渲染（列表頁的某些資料--> 詳情頁），沒有資料的模組可以進行骨架屏的佔位
在微信小程式中，提高頁面的多次渲染效率主要在於正確使用setData：
- 不要過於頻繁呼叫setData，應考慮將多次setData合併成一次setData呼叫
- 資料通訊的效能與資料量正相關，因而如果有一些資料欄位不在介面中展示且資料結構比較複雜或包含長字串，則不應使用
setData來設定這些資料 - 與介面渲染無關的資料最好不要設定在data中，可以考慮設定在page物件的其他欄位下
除此之外，對於一些獨立的模組我們儘可能抽離出來，這是因為自定義元件的更新並不會影響頁面上其他元素的更新
各個元件也將具有各自獨立的邏輯空間。每個元件都分別擁有自己的獨立的資料、setData呼叫
三、總結
「小程式啟動載入效能」：
- 控制程式碼包的大小
- 分包載入
- 首屏體驗（預請求，利用快取，避免白屏，及時反饋
「小程式渲染效能」：
- 避免不當的使用setData
- 使用自定義元件
參考文獻
- https://juejin.cn/post/6969779451177484296