【騰訊 TMQ】從 0 到 1：打造移動端 H5 性能測試平臺

時間 2019-11-16

原文原文鏈接

騰訊雲技術社區-掘金主頁持續爲你們呈現雲計算技術文章，歡迎你們關注！javascript

做者：陳誠css

如何打造一個移動端H5性能平臺？聽起來是否有點高大上，不知道如何下手。沒關係張，咱們來手把手教你們打造本身的移動端H5性能測試平臺。html

【H5前端性能平臺能夠作什麼--功能篇】

之前咱們要測試移動端H5性能，一般會用到遠程鏈接+抓包分析，工具諸如：fiddler，Charles。或者是一些在線測試工具：Page Speed、PCAP Web Performance Analyzer、WebPagetest。這些工具要麼測試執行過程複雜，要麼測試報告複雜，亦或者也看不出測試結果是好是壞。前端

因此咱們但願移動端H5性能自動化平臺可以：java

一、針對移動設備：從移動設備瀏覽器出發，測試H5前端性能，不是PC端的，不是PC端的，不是PC端的，重要事情說三遍。linux

二、測試流程簡單化：一鍵化測試，輸入URL，輸出測試報告，不要遠程調試，不要分析數據。android

三、測試結果可視化：展現H5測試過程當中的http請求瀑布流，資源統計，各類時間類硬指標。git

四、給出測試建議：不要只有測試數據，我但願有建設性的測試意見。程序員

【怎麼樣的方案才能知足上述的功能點--方案篇】

總體思路：用戶界面中輸入被測H5的URL地址，發送給服務器，服務器收到URL地址後，像移動設備發送測試任務，移動設備執行測試任務，並返回測試數據，服務器解析原始測試數據，生成報表（包含可視化的數據和被測結果的建議），返回給用戶。就已經知足了上面咱們對系統的預期。github

流程就是這麼簡單，可是每一步具體的方案咱們還要一一來敲定。

01.用戶交互系統如何實現

這裏的交互就是一個web系統，不管你是採用java SSH，仍是.NET,亦或者Django等等，咱們認爲只要是你會搭建的web站點都是能夠的。

02.服務器如何給移動設備發送測試任務

移動設備須要接受服務器的任務，因此咱們須要有一個app能夠支持任務的管理和測試數據的採集。這裏的移動設備經過USB數據線鏈接在服務器上，因此，使用am命令就能夠輕鬆操控app。

03.請移動設備如何獲取性能數據

在移動設備上如何獲取H5性能數據，這一步是纔是整個系統的重點。

這裏數據分爲3種：http請求類數據、時間類數據、H5性能優化建議。

http請求類數據

方案一「遠程調試」

遠程調試的思路和PC上F12調試一個網頁本質是同樣的。把調試工具對PC瀏覽器的調試轉移到對移動端設備瀏覽器調試上。

方案二「phantomjs抓包」

phantomjs 是基於Javascript驅動的命令行webkit引擎，簡單的說是一個無界面的瀏覽器。經過執行netsniff.js腳本，能夠方便的獲取URL的http請求對用的HAR包（HTTP Archive是一個用來儲存HTTP請求/響應信息的通用文件格式，基於jason，HTTP監測工具以這種通用的格式導出所收集的數據，這些數據能夠被其餘支持HAR的HTTP分析工具所使用，來分析網站的性能。包括各種資源：包括圖片，js，css等的加載狀況，請求和響應時間，請求返回碼等http協議的信息）。這個辦法的好處是獲取的http請求準確，且方便快捷，可是缺點是統計到的請求數據包括請求時間均是在PC上運行的時間，不能表明移動端真實的請求數據。

方案三「移動端抓包」

經過抓包工具對瀏覽器打開網頁的過程進行抓包，能夠真實且事實的獲取H5展現過程當中的數據包。剛好在PCAP Web Performance Analyzer項目中有提到 pcap2har開源工具，能夠將pcap包轉化爲har文件，因此爲了獲得pcap包，咱們選擇tcpdump抓包工具對H5打開的全過程進行抓包。

因此，測試移動端H5性能的最好方案爲方案三，監聽移動設備http請求，生成pcap包，轉化爲har後，解析har文件後蒐集H5前端性能數據。

時間類數據

方案一「js與安卓交互，插樁獲取時間數據」
如何獲取網頁加載過程當中的各種時間（白屏時間，首資源時間，dom加載時間等），首先能想到的是監聽window對象事件，如onload，在合適的地方進行js插樁，蒐集相關的時間數據難度不大。如使用WebChromeClient中的：

方案二「webview自帶回調函數獲取」
在webview使用中，咱們能夠條用豐富的回調函數，在各種事件到達時觸發。但是使用webview中的：

由於webview中的回調函數很少，可以統計的時間指標有限，全部最終方案爲上述兩種方案的結合，既有webview回調，也有js插樁統計得到的時間

H5性能優化建議

優化建議是對整個測試結果的一個反饋，也須要結合上述測試的結果，並對結果作一箇中肯的評估，因此，這裏也對三類數據分別做了優化的建議：

（1）http資源類優化建議：資源數量大、請求數過多、緩存等；

（2）H5加載過程：各種時間指標；

（3）H5代碼優化：js&css壓縮，屏幕適配等、重繪等。複製代碼

方案一「yslow SDK接入」

YSlow（why slow）是雅虎基於網站優化規則推出的工具，幫助你分析並優化網站性能。雅虎在23個方面給網站提出優化建議，包括儘量的減小HTTP的請求數、使用 Gzip 壓縮、將CSS 樣式放在頁面的上方、將腳本移動到底部、減小DNS查詢等十幾條規則，YSlow會根據這些規則分析你的網站，並給出評分。在linux下YSlow也有一套SDK，能夠幫助開發者獲得建議和分數。但這套方案徹底是PC上的web性能工具，要適應移動場景，仍是有些勉強。

方案二「抓取數據手工分析」

鑑於YSlow在移動端性能分析的短板，這裏能夠直接增長移動端性能規則，結合已有的雅虎「23條軍規」，使得測試建議更加豐富和務實。已有的YSlow規則如：資源是否壓縮，http請求數量是否過多等，針對移動設備添加的規則如：是否針對手機屏幕作適配等。

【如何才能實現這一套--實現篇】

肯定了上述方案，咱們纔敢說咱們可以搭建一套H5前端自動化性能測試平臺。首先來規劃整個平臺的時序圖（工做流）

如圖流程涉及到的技術點爲：

（1）如何對H5頁面打開過程抓包

（2）如何解析pcap文件

（3）如何繪製http請求瀑布流

（4）如何經過js插樁獲取時間類指標

（5）如何配置H5優化建議規則

重點來了，這裏咱們一一說明，如何作實現這些技術點。

01.如何對H5頁面打開過程抓包

在上部分提到，咱們使用TCPDUMP抓取移動設備HTTP請求數據。具體流程以下：

移動設備具備root權限
下載tcpdump www.strazzere.com/android/tcp…
adb push c: \tcpdump /data/local/tcpdump
adb shell chmod 777 /data/local/tcpdump
adb shell, su得到root權限
cd /data/local
./tcpdump -i any -p -s 0 -w /sdcard/capture.pcap
adb pull /sdcard/capture.pcap d:/

固然，這只是tcpdump抓包的過程，實際上，啓動抓包和獲取pcap文件咱們放在了webview容器的一個線程中進行。

02.如何解析pcap文件

pcap包是tcpdump直接獲取的網絡包結果，能夠經過winshark等工具來分析，可是考慮到咱們須要的僅僅是http請求信息，也但願自動化分析，因此經過pcap2har直接將pcap包轉化爲har文件可以過濾掉非http請求的記錄。

開源工具pcap2har（github.com/andrewf/pca…

說了這麼久的har，那麼har到底長什麼樣？

HAR數據結構：

一個HAR文件就是一個JSON對象，以下：

這個對象包含了一個數組，數組中每一個元素的內容就是一個HTTP請求的相應信息。用startedDateTime來排序的話能夠加快數據導出的速度。HAR分析工具要確保此數組是按照startedDateTime排序的。一個entry包含了一次請求的起始時間，請求耗時，緩存等豐富信息，咱們所需的數據所有是從entry中提取的。

更多詳細HAR結構能夠參考《HAR(HTTP Archive)規範》

03.如何繪製http請求瀑布流

有了HAR文件，如何才能生成上圖這樣的瀑布流呢？筆者有幸發現了HarViewer這個工具，導入har文件，自動生成瀑布流，而且點開任意一條請求，能夠看到該請求的詳細數據。

04.如何經過js插樁獲取時間類指標

獲取時間類指標如上所述，關鍵技術是js和webview交互，不一樣的時間數據，不一樣的js腳本，咱們分別來談。

白屏時間：用戶首次看到網頁有內容的時間，即第一次渲染流程完成時間。可是在傳統的採集方式裏，是在HTML的head標籤結尾裏記錄時間戳，來計算白屏時間。在這個時刻，瀏覽器開始解析body標籤內的內容。而現代瀏覽器不會等待CSS樹和DOM樹（整個body標籤解析完成）構建完成纔開始繪製，而是立刻開始顯示中間結果。因此常常在低網速的環境中，觀察到頁面由上至下緩慢顯示完，或者先顯示文本內容後再重繪成帶有格式的頁面內容。
在android中咱們經過使用webview.WebChromeClient的onReceivedTitle事件來近似得到白屏時間。

首資源時間：指從網頁開始加載到返回第一個資源的時間。這個資源能夠是html，圖片，js，css。首資源時間能夠反映http請求到返回整個過程時間，一般首資源大小不會很大，因此首資源時間能夠反映當前網絡情況。

如何獲取首資源時間呢？咱們能夠根據Har包，提取第一個entries的完成時間。完成時間的計算公式：

其中：startTime爲entries中的startedDataTime；time爲當次請求耗時。

DOMContentLoaded時間：指的是Dom樹構建完成時間，此時加載完頁面，解析完全部標籤（不包括執行CSS和JS）。在WebChromeClient的onReceivedTitle事件被觸發時注入咱們的js代碼，而後經過WebChromeClient的onJsPrompt事件來獲取DOMContentLoaded時間。

load時間：指的是load事件觸發時間，必須等到網頁中全部內容所有加載完畢以後才被執行。若是一個網頁中有大量的圖片的話，則就會出現這種狀況：網頁文檔已經呈現出來，但因爲網頁數據尚未徹底加載完畢，致使load事件不可以即時被觸發。Load時間的獲取和dom樹加載時間獲取方式一致。

全部資源加載時間：指的是打開網頁後，全部資源請求響應且下載成功的時間，和load時間有什麼區別呢？一般web會將各類資源標籤放到body當中，整個html解析完成，資源加載完成，觸發load事件。可是，移動端H5頁面的不少資源並非在H5連接指向的html中顯式的出現如<img>這種標籤，而是經過在js執行大量邏輯下判斷是否加載某個資源，此時出如今load事件後還有資源陸續加載的狀況，以下一個H5加載過程正是上述狀況。