小程式首屏載入過慢的效能最佳化策略

一. 問題描述

01. 問題現象
小程式初次開啟首屏載入很慢，已經超出使用者等待時長。

02. 理想載入
理想狀態載入不超過5s，資料渲染不出現卡頓現象。

二. 載入機制

首屏的載入速度除了和網路有關係，和小程式自身啟動機制也有關係，首先要了解小程式的啟動機制，小程式的啟動分為冷啟動和熱啟動。

01. 冷啟動

簡介：如果使用者首次開啟，或小程式銷燬後被使用者再次開啟，此時小程式需要重新載入啟動，即冷啟動。

觸發場景：

新使用者第一個進入小程式

使用者已經進入過小程式，但是小程式被銷燬，銷燬的原因有，小程式被刪除，小程式在後臺等待時間過長，自動銷燬了。

02. 熱啟動
簡介：如果使用者已經開啟過某小程式，然後在一定時間內再次開啟該小程式，此時小程式並未被銷燬，只是從後臺狀態進入前臺狀態，這個過程就是熱啟動。

觸發場景：

使用者開啟了小程式，在小程式沒有被銷燬時再次開啟小程式，此時小程式還能儲存使用者上一次的操作狀態。

首屏載入慢大部分原因是冷啟動時載入的資料過多，需要依賴過多的服務端的介面資料等。

三. 檢查

對於程式設計師來說，遇到問題應該解決問題。首先要要幾個基礎檢查：

01. 檢查圖片

檢查圖片包括：
1. 圖片是否過大
檢查圖片屬性，如果圖片載入過大，就利用工具壓縮圖片。此時要考慮如果圖片畫素要求很高，壓縮要注意不能失真，其次壓縮要注意等比例，留意是否不小心剪裁了圖片大小等。
2. 圖片懶載入
如果首頁要載入的有很多列表或者圖片展示，此時要注意圖片載入時長，如果超過一定時間，懶載入是個不錯的辦法。
3. 圖片是否可以用cdn託管
對於icon小圖示可以放在小程式專案image資料夾裡，但是如果圖片佔用資源，放在cdn託管既可以縮小程式碼包的大小還可以提升載入效率。

02. 檢查首屏介面耗時

一個介面一個介面的排查，在network中檢視載入的時間，逐個排查原因，所有請求最好在1s內返回結果。

03. 檢查有無錯誤日誌

在JS中如果在同步任務中，一個錯誤的發生會造成後面整段程式碼都不執行。
此時應該排查下是否有異常錯誤，避免出現首屏一直處於載入的狀態。必要的時候try catch處理。

04. 檢查介面是否使用定時器
定時器一般設定為全域性變數，或者定時器和倒數計時相關功能繫結，用定時器一定要記得及時回收。

05. 檢查基礎版本庫

如果首頁使用裡自定義組建，不同頒佈要注意基礎庫要一致。可能不同基礎庫有些功能的支援條件不一致，要做相容處理。

四. 最佳化策略

01. 分包載入
開發者透過在 app.json subpackages 欄位宣告專案分包結構

{
  "pages":[
    "pages/index",
    "pages/logs"
  ],
  "subpackages": [
    {
      "root": "packageA",
      "pages": [
        "pages/cat",
        "pages/dog"
      ]
    }, {
      "root": "packageB",
      "name": "pack2",
      "pages": [
        "pages/apple",
        "pages/banana"
      ]
    }
  ]
}

分包之後優先載入主tab，二級介面可以理解為按需載入。
分包要注意，主包不能使用二級介面的樣式或者js等，因為主包在載入時分包是不載入的。

02. 利用快取
當小程式被銷燬需要重新渲染介面時，此時冷啟動會再次請求介面載入資料，可以利用小程式提供了快取方法wx.setStorage、wx.getStorage將資料儲存在本地。

03. 不使用空白屏
所謂空白屏就是當請求介面的資料沒有被返回時，整個介面被hidden的，此時給使用者的感覺就是白屏。
推薦做法：當資料沒有被渲染時展示頁面的基本骨架，利用toast提示載入進度，給使用者反饋出載入的進度，會延長使用者的等待時間。把優先順序高的內容做優先展示，縮短白屏時間；

04. 首頁架構調整
調整頁面展示順序等，儘量讓首屏簡潔化。資料展示的儘量精簡化。

05. 渲染最佳化
避免首頁多次setData，未繫結的變數或者和介面無關的變數都不要在setData中體現，這樣的情況大多出現在一個變數可能在初版的時候使用，下一個版本更改需求，有些變數不需要渲染介面裡，但是程式設計師並有及時刪除。

06. 程式碼最佳化
第一：在樣式上，檢查wxss的使用率，這個很重要又經常被忽視，經常發生在不同版本迭代中，需求和樣式是經常被改動的，下一個版本更改沒有及時刪除掉不用的樣式，可能有些程式設計師心裡是想著有可能下次被用到，但是記得專案是有git託管的，可以藉助git查詢之前的程式碼記錄，所以不是此版本的css大膽的刪除吧。
第二：在js上，一個js可能到上千行了，這個原因可能和業務邏輯有關，也可能是你寫了太多的函式，沒有用函式的封裝處理。呼叫介面，沒有用Promise封裝或者其他封裝辦法。