執行個體分析：html5前端效能的測試（圖文）

本篇文章給大家帶來的內容是關於執行個體分析：html5前端效能的測試（圖文），有一定的參考價值，有需要的朋友可以參考一下，希望對你有所協助。

H5 頁面發版靈活，輕量，又具有跨平台的特性，在業務上有很多應用情境。但是同時對比 App，H5 的效能表現總是要遜色一籌，比如頁面開啟往往會出現白屏，滑動列表等互動情境下也不如 Native 頁面流暢。針對這些白屏、卡慢之類的問題，我們測試該從哪些方面去展開測試分析和資料對比呢？接下來筆者分享一些 H5 前端測試實踐的經驗，拋磚引玉，希望大家一起談論，一起挖掘更多有價值的課題。

一、開篇：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 底部載入，就不會阻塞頁面的渲染和展示。

二、執行個體分析：白屏問題

前面我們已經瞭解了 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 再回給前端，達到秒開的效果。

三、執行個體分析：卡慢問題

有時候使用者在頁面互動的過程中會遇到卡慢，比如上下滑動列表、左右切換或者輪播等。這個過程無非也是執行 js、請求資源、計算新的頁面配置並渲染繪製這幾件事。通過 Performance 分析就會發現，卡慢其實並不全是很多人認為的“移送裝置效能就是差”，有時候其實是假性卡頓。

比如下面這個就是熱區過小的問題：

真卡的情況，往往指令碼報錯佔了很大比重，直觀表現就是頁面是卡死，而不是變慢。其他的諸如記憶體問題，通常表現是頁面越來越卡，因為使用時間越長，資源消耗越大。比如頁面使用了比較複雜的 canvas 動畫、比較耗效能的 iframe 元素，或者直播流媒體，這種情況下容易出現記憶體流失。

下面這個就是 dom-節點引發的記憶體流失,不使用的 commentList 列表沒有釋放，越積越多到長度幾萬個的時候開始卡頓。

四、總結：H5 前端效能測試方案

當然，前端效能不僅僅表現在白屏、卡頓問題，也有可能是手機過度發熱等等。從使用者核心體驗出發，我們認為，H5 前端效能最重要的參考標準就是：要以最輕量的方式，給使用者最好的體驗。從這個方向出發，我們積累了一些測試經驗，其中最重要的必過項是首屏速度（不僅提升使用者體驗，還可以提升業務的轉化率），其次流暢度、流量和 CPU 等，某些情境下也是需要重點考量的點。