前言
2018年7月份微信公開課上的小程式專場中“小程式效能優化”模組中提到了小程式效能優化方面的知識，其中從啟動載入效能優化和渲染效能優化兩個方面進行了闡述，提到了日常我們開發中如何去提高小程式的效能優化，以及小程式針對一些效能問題接下來會怎樣的改進（其中就有分包預載入和獨立分包等概念的提出）
自己本人只是一個做筆記的方式去記錄，可能會有些許粗糙，大家可以直接去看演講的視訊，個人認為很精彩。因為是小程式，大家可以直接去微信小程式中搜“微信公開課”進行檢視學習。
啟動載入效能優化
啟動過程機制
- 資源準備（程式碼下載）
- 業務程式碼注入和渲染
- 非同步請求資料（部分小程式）
控制程式碼包的大小
- 開啟開發者工具中的“上傳程式碼時候自動壓縮”
- 及時清除無用程式碼和資原始檔
- 減少程式碼包中的圖片等資原始檔的大小和數量
分包載入
分包載入的侷限性和解決方法
- 分包預載入（即將推出的功能）
- 分包載入——獨立分包（即將推出） 可以不依賴於珠寶，獨立下載和執行的分包。從獨立分包頁面啟動，只下載和注入分包就可以開啟頁面。
首屏載入的體驗優化建議
- 提前請求：非同步請求資料不需要等待頁面的渲染完成。
- 利用快取。利用storage API對非同步請求資料進行快取。二次啟動的時候，先利用快取資料渲染頁面，再進行後臺更新
- 避免白屏：先展示頁面骨架和基礎內容
- 及時反饋
渲染機制的優化
小程式的渲染機制
避免不當使用setData
- 使用data在方法間共享資料（可能增加setData傳輸的資料量）——建議data中僅包括與頁面相關的資料
- 使用setData傳輸大量資料——僅僅傳輸變化的資料
- 短時間被頻繁呼叫setData——對連續的setData進行合併
- 後臺頁面進行setData，搶佔前臺頁面的渲染資源——頁面在切入後臺後的setData呼叫，延遲到頁面重新展示的時候執行
總結：
- 每次setData的呼叫都是一次程式間的通訊過程，通訊開銷與setData的資料量正相關的
- setData會引發檢視層頁面內容的更新，這一耗時操作一定時間內會阻塞使用者互動
- setData是小程式中使用最頻繁，也是最容易引發效能問題的
避免不當使用onPageScroll
- 只在有必要的時候監聽pageScroll事件
- 避免在onPageScroll中執行復雜邏輯
- 避免在onPageScroll中頻繁呼叫setData
- 避免頻繁查詢節點資訊（SelectQuery），部分場景建議使用節點佈局相交狀態監聽（IntersectionObserver）替代
使用自定義元件