微信小程序性能優化

前言

2018年7月份微信公開課上的小程序專場中「小程序性能優化」模塊中提到了小程序性能優化方面的知識，其中從啓動加載性能優化和渲染性能優化兩個方面進行了闡述，提到了平常咱們開發中如何去提升小程序的性能優化，以及小程序針對一些性能問題接下來會怎樣的改進（其中就有分包預加載和獨立分包等概念的提出）

本身本人只是一個作筆記的方式去記錄，可能會有些許粗糙，你們能夠直接去看演講的視頻，我的認爲很精彩。由於是小程序，你們能夠直接去微信小程序中搜「微信公開課」進行查看學習。

啓動加載性能優化

啓動過程機制

• 資源準備（代碼下載）
• 業務代碼注入和渲染
• 異步請求數據（部分小程序）

控制代碼包的大小

• 開啓開發者工具中的「上傳代碼時候自動壓縮」
• 及時清除無用代碼和資源文件
• 減小代碼包中的圖片等資源文件的大小和數量

分包加載

分包加載的侷限性和解決方法

• 分包預加載（即將推出的功能）
• 分包加載——獨立分包（即將推出） 能夠不依賴於珠寶，獨立下載和運行的分包。從獨立分包頁面啓動，只下載和注入分包就能夠打開頁面。

首屏加載的體驗優化建議

• 提早請求：異步請求數據不須要等待頁面的渲染完成。
• 利用緩存。利用storage API對異步請求數據進行緩存。二次啓動的時候，先利用緩存數據渲染頁面，再進行後臺更新
• 避免白屏：先展現頁面骨架和基礎內容
• 及時反饋

渲染機制的優化

小程序的渲染機制

避免不當使用setData

• 使用data在方法間共享數據（可能增長setData傳輸的數據量）——建議data中僅包括與頁面相關的數據
• 使用setData傳輸大量數據——僅僅傳輸變化的數據
• 短期被頻繁調用setData——對連續的setData進行合併
• 後臺頁面進行setData，搶佔前臺頁面的渲染資源——頁面在切入後臺後的setData調用，延遲到頁面從新展現的時候執行

總結：

• 每次setData的調用都是一次進程間的通訊過程，通訊開銷與setData的數據量正相關的
• setData會引起視圖層頁面內容的更新，這一耗時操做必定時間內會阻塞用戶交互
• setData是小程序中使用最頻繁，也是最容易引起性能問題的

避免不當使用onPageScroll

• 只在有必要的時候監聽pageScroll事件
• 避免在onPageScroll中執行復雜邏輯
• 避免在onPageScroll中頻繁調用setData
• 避免頻繁查詢節點信息（SelectQuery），部分場景建議使用節點佈局相交狀態監聽（IntersectionObserver）替代

使用自定義組件