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