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