怎麼解決小程式反應速度慢的問題

目的：

解決小程式回應速度慢，使用者體驗不佳的問題。

（學習影片分享：程式設計影片）

最佳化方法如下：

1、提高頁面載入速度

在小程式這個環境下，要怎麼提高頁面載入速度呢？這個問題很大，我把問題具體一下，如何縮短從用戶點擊某個鏈接，到打開新頁面的這段時間？這裡拋一個核心關鍵點：

從頁面響應用戶點擊行為，開始跳轉，到新頁面onload事件觸發，存在一個延遲，這個延遲大概在100-300ms之間（安卓響應比ios慢些）。

這個延遲說短不短，我們可以利用這段時間，預先發起新頁面所需的網路請求。這樣一來，就節省了100-300ms（或一個網路請求的時間）。

知道有這個gap後，程式碼要如何實作呢？

說穿了，就是實現一個在A頁面預先載入B頁面資料的功能。但而這種跨頁面的調用，很容易把邏輯搞複雜，將不同頁面的邏輯耦合在一起。所以，我們希望將預先載入的邏輯隱藏在無形中，不增加任何的頁間耦合，以及開發複雜度。

以下以騰訊視訊小程式為例，講解下技術實作。

小程式首頁：

當使用者點選海報圖後，會執行下列程式碼（就一行）：

#接下來程式會載入播放頁：

播放頁主要程式碼：

可以看到，不管是外部頁面的呼叫還是實際邏輯的實作都非常簡潔。在第二個頁面中，我們擴展了Page的生命週期函數，增加了onNavigate方法。該方法在頁面即將被創建但還沒開始創建的時候執行。

老司機也許會發現這裡有點蹊蹺。在首頁點擊的時候，播放頁根本就沒有創建，物件都不存在，怎麼訪問到裡面的方法呢？

這裡就要說下微信的頁面機制。

在小程式啟動時，會把所有呼叫Page()方法的object存在一個佇列裡（如下圖）。每次頁面造訪的時候，微信會重新建立一個新的物件實例（實際上就是深拷貝）。

也就是說，在A頁面在執行點擊回應事件的時候，B頁面的實例還沒創建，這時候呼叫的onNavigate方法，實際上是Page物件的原型（小程式啟動時候創建的那個）

而接下來馬上要被創建的B頁面，又是另外一個object。所以，在onNavigate和onLoad方法中，this指針指的不是同一個對象，不能把臨時資料儲存在當前object身上。因此我們封裝了一對全域的快取方法，$put()和$take()。

為了通用性，Page上用到的公共的方法，例如$route、$put、$take都定義在了一個Page的基底類別裡面。基底類別也同時保存了所有頁面的list，這樣就可以做到根據頁面名稱呼叫特定頁面的onNavigate方法。當然，並不是每個頁面都需要實作onNavigate方法，對於沒有定義onNavigate方法的，$route函數會跳過預先載入環節，直接跳轉頁面。所以對於開發者來說，不需要關心別的頁面實現了什麼，對外看來完全透明。

2、使用者行為預測

在上面的範例中，我們實作了使用者主動點擊頁面，提前載入下一頁資料的方法。而在某些場景下，使用者的行為可以預測，我們可以在使用者還沒點擊的時候就預先載入下個頁面的資料。讓下個頁面秒開，進一步提升體驗的流暢性。

繼續以騰訊視訊小程式為例，主介面分為3個頁卡（大部分小程式都會這麼設計），透過簡單的資料分析，發現進入首頁的使用者有50%會存取第二個頁卡。所以預先載入第二個頁卡的資料可以大幅提高使用者下個點擊頁面的開啟速度。

同樣，先看看程式碼實作。首頁預先載入頻道頁的姿勢：

頻道頁的實作方法：

跟第一個範例類似，這裡定義了一個$preLoad()方法，同時為Page擴充了一個onPreload事件。頁面呼叫$preLoad()後，基底類別會自動找到該頁面對應的onPreload函數，通知頁面執行預先載入操作。跟第一個例子不同，這裡預先載入的資料會保存在storage內，因為使用者不一定會馬上存取頁面，而把資料存在全域變數會增加小程式佔用的記憶體。微信會毫不猶豫的把記憶體佔用過大的小程式給殺掉。

也許對於大部分有app開發經驗的同學來說，更普遍的做法是先讓頁面展示上次緩存的數據，再實時拉取新數據，然後刷新頁面。這個方法在小程式上也許體驗不太好，原因是小程式的效能以及頁面渲染速度都不如原生app。將一個大的data傳輸給UI層，是一個很重的操作。因此不建議採用這種方法。

3、減少預設data的大小

剛剛說到，頁面開啟一個新頁面時微信會深拷貝一個page對象，因此，應該盡量減少預設data的大小，以及減少對象內的自訂屬性。有圖有真相：

以一個100個屬性的data物件為測試案例，在iphone6上，頁面的建立時間會因此增加150ms。

4、元件化方案

微信沒有提供小程式的元件化方案（相信一定在實作中）。但開談不說組件化，寫再多程式碼也枉然。這裡示範一個簡單的組件化實作。

以騰訊影片播放頁為例，頁面定義如下：

#其中，P()函數是自訂的基底類別。這是一個非常有用的東西，可以把所有通用的邏輯都寫在基類裡面，包括pv統計，來源統計，擴展生命週期函數，實現組件化等。

函數第一個參數是頁面名稱，作為頁面的key。第二個是page對象，其中擴充了一個comps數組，裡面就是所有要載入的元件。

以播放器元件/comps/player/index.js為例：

#元件的定義跟一個普通Page物件一模一樣，有data屬性， onLoad、onShow等事件，也有頁面回應的回呼方法。 wxml模板裡定義的事件和js事件一一對應。

基底類別做的事情，就是把這些元件物件的屬性和方法複製到Page物件上（淺拷貝）。其中data屬性會merge在一起。而微信預先定義的生命週期函數（包括自己擴展的），則封裝成佇列依序執行。例如當系統呼叫onLoad方法時，其實是執行了所有元件的onLoad方法，最後再執行Page的onLoad。

以上是程式碼部分，至於wxml模板和wxss部分，就要手工import過去了。

wxml：

wxss：

5、其他

雖然小程式已經夠小巧，但啟動速度還是有那麼2-3秒，無法做到秒開。樓主嘗試對小程式的啟動時間做優化，但沒有找到太多有價值的優化點。單一頁面的初始化只需要1-2ms。也許大部分時間消耗在了微信跟伺服器端通訊的過程。

所幸，騰訊提供了一個可以自主進行伺服器效能測試的環境，使用者只需要填寫網域和簡單的幾個參數就可以獲知自己的伺服器效能狀況，目前在騰訊WeTest平台可以免費使用。

相關推薦：小程式開發教學

以上是怎麼解決小程式反應速度慢的問題的詳細內容。更多資訊請關注PHP中文網其他相關文章！