H5 前端性能測試實踐

H5 頁面發版靈活，輕量，又具備跨平臺的特性，在業務上有不少應用場景。可是同時對比 App，H5 的性能表現老是要遜色一籌，好比頁面打開每每會出現白屏，滑動列表等交互場景下也不如 Native 頁面流暢。針對這些白屏、卡慢之類的問題，咱們測試該從哪些方面去展開測試分析和數據對比呢？接下來筆者分享一些 H5 前端測試實踐的經驗，拋磚引玉，但願你們一塊兒談論，一塊兒挖掘更多有價值的課題。

1、開篇：H5 頁面加載過程淺析

以下圖所示，是精選平臺打開 H5 頁面的幾個過程截圖。

圖一到圖四能夠簡單分類，圖一是 App 負責作的事情，主要是初始化 Webview 上下文；後面三張圖則是一個H5頁面加載的過程。其中，App 這個階段的耗時，主要是 Native 代碼的耗時，這裏先不展開討論，咱們重點放在後面幾個階段。第四個圖是用戶直觀看到的第一屏頁面，咱們一般稱爲首屏。

1）加載網絡請求

這個過程主要是 Webview 拿到 H5 頁面 url 以後，調用 loadUrl 方法，開始去網絡上請求第一個資源文件。這個階段主要包含 dns 解析、創建網絡連接、數據傳輸的耗時。

2）html 解析

Webview 拿到 html 返回後，須要從上至下解析 html 中的標籤和內容，識別外鏈資源、計算頁面框架的佈局，並渲染繪製出來。在這個過程當中會構建出負責頁面結構的 DOM Tree 和負責頁面佈局展現的 Render Tree，以下圖所示：

3）外鏈資源加載

這部分主要是從網絡上加載外鏈的 css、圖片和 js 等，再從新填充到 html 中。以後從新進行一次 layout 佈局計算和頁面渲染繪製，此時看到的纔是有完整內容的頁面。以下圖所示，頁面須要等圖片和 css 加載出來後才能展現，js 也是外鏈資源，不過通常來講，只要放在 html 底部加載，就不會阻塞頁面的渲染和展現。

2、實例分析：白屏問題

前面咱們已經瞭解了 H5 頁面加載過程，接下來若是遇到白屏，咱們天然會問，怎麼才能知道頁面當前處在哪一個階段，每一個階段耗時多長，以及總體首屏加載的耗時呢？

首先看下經過 PC Chrome 模擬 H5 頁面的狀況。Chrome Devtool 提供的 Performance 工具，能夠錄製頁面從第一個請求到加載完成的全部事件，經過這種方式能夠很詳細的看到各階段作的事情和具體的耗時。

其中兩個最關鍵的首屏耗時指標：**domContentLoaded（首屏頁面可見）和onLoad（首屏加載完成）**的耗時，除了圖示的方法，還能夠經過在 console 裏打印全局變量window.performance.timing，拿到時間戳並計算獲得。

但實際咱們要的是移動設備的真機數據，這個才能真實反應頁面性能和用戶體驗。想要獲取 H5 真機耗時，一種方式是 js 代碼進行上報；另外一種是對於 Android 設備，能夠用 remote-debug 的方式遠程調試真機頁面。只須要保證 webview 調試開關打開 & 與 PC USB 鏈接且開啓 USB 調試，就能夠在 PC Chrome 訪問 chrome://inspect 來獲取調試對象。以後參考 PC Chrome 模擬 H5 的方法便可拿到數據。

對於傳統頁面而言，實際分析發現大部分耗時仍是在移動網絡請求這部分，因此最直接有效的方式就是對頁面進行直出改造，也就是改變先加載 html、再加載 css 等數據的狀況，先在後端（好比 nodejs）並行加載首屏依賴的全部 css、js 和後臺接口數據，拼裝好一個完成的最終要呈現的 html 再回給前端，達到秒開的效果。

3、實例分析：卡慢問題

有時候用戶在頁面交互的過程當中會遇到卡慢，好比上下滑動列表、左右切換或者輪播等。這個過程無非也是執行 js、請求資源、計算新的頁面佈局並渲染繪製這幾件事。經過 Performance 分析就會發現，卡慢其實並不全是不少人認爲的「移送設備性能就是差」，有時候實際上是假性卡頓。

好比下面這個就是熱區太小的問題：

真卡的狀況，每每腳本報錯佔了很大比重，直觀表現就是頁面是卡死，而不是變慢。其餘的諸如內存問題，一般表現是頁面愈來愈卡，由於使用時間越長，資源消耗越大。好比頁面使用了比較複雜的 canvas 動畫、比較耗性能的 iframe 元素，或者直播流媒體，這種狀況下容易出現內存泄漏。

下面這個就是 dom 節點引起的內存泄漏,不使用的 commentList 列表沒有釋放，越積越多到長度幾萬個的時候開始卡頓。

4、總結：H5 前端性能測試方案

固然，前端性能不只僅表如今白屏、卡頓問題，也有多是手機過分發熱等等。從用戶核心體驗出發，咱們認爲，H5 前端性能最重要的參考標準就是：要以最輕量的方式，給用戶最好的體驗。從這個方向出發，咱們積累了一些測試經驗，其中最重要的必過項是首屏速度（不只提高用戶體驗，還能夠提高業務的轉化率），其次流暢度、流量和 CPU 等，某些場景下也是須要重點考量的點。