提高微信小程式的應用速度

語言: CN / TW / HK

一、是什麼

小程式啟動會常常遇到如下圖場景:

這是因為,小程式首次啟動前,微信會在小程式啟動前為小程式準備好通用的執行環境,如執行中的執行緒和一些基礎庫的初始化

然後才開始進入啟動狀態,展示一個固定的啟動介面,介面內包含小程式的圖示、名稱和載入提示圖示。此時,微信會在背後完成幾項工作:

  • 下載小程式程式碼包
  • 載入小程式程式碼包
  • 初始化小程式首頁

下載到的小程式程式碼包不是小程式的原始碼,而是編譯、壓縮、打包之後的程式碼包

整體流程如下圖:

二、手段

圍繞上圖小程式的啟動流程, 我們可以從載入、渲染兩個緯度進行切入:

載入

提升體驗最直接的方法是控制小程式包的大小,常見手段有如下:

  • 程式碼包的體積壓縮可以通過勾選開發者工具中“上傳程式碼時,壓縮程式碼”選項

  • 及時清理無用的程式碼和資原始檔

  • 減少資源包中的圖片等資源的數量和大小(理論上除了小icon,其他圖片資源從網路下載),圖片資源壓縮率有限

並且可以採取分包載入的操作,將使用者訪問率高的頁面放在主包裡,將訪問率低的頁面放入子包裡,按需載入

當用戶點選到子包的目錄時,還是有一個程式碼包下載的過程,這會感覺到明顯的卡頓,所以子包也不建議拆的太大,當然我們可以採用子包預載入技術,並不需要等到使用者點選到子包頁面後在下載子包

渲染

關於微信小程式首屏渲染優化的手段如下:

  • 請求可以在頁面onLoad就載入,不需要等頁面ready後在非同步請求資料
  • 儘量減少不必要的https請求,可使用 getStorageSync() 及 setStorageSync() 方法將資料儲存在本地
  • 可以在前置頁面將一些有用的欄位帶到當前頁,進行首次渲染(列表頁的某些資料--> 詳情頁),沒有資料的模組可以進行骨架屏的佔位

在微信小程式中,提高頁面的多次渲染效率主要在於正確使用 setData

setData

除此之外,對於一些獨立的模組我們儘可能抽離出來,這是因為自定義元件的更新並不會影響頁面上其他元素的更新

各個元件也將具有各自獨立的邏輯空間。每個元件都分別擁有自己的獨立的資料、 setData 呼叫

三、總結

「小程式啟動載入效能」:

  • 控制程式碼包的大小
  • 分包載入
  • 首屏體驗(預請求,利用快取,避免白屏,及時反饋

「小程式渲染效能」:

  • 避免不當的使用setData
  • 使用自定義元件

參考文獻

  • https://juejin.cn/post/6969779451177484296