H5性能測試學習

工欲善其事，必先利其器，在作H5前端性能測試以前，選擇合適的工具能讓咱們的測試工做事半功倍。本文要提到的工具備兩類：

一類是抓包工具，如Fiddler、Charles等。這類工具不只能夠抓包，還能夠對包進行修改，動態展現瀑布流，對web進行調試。在咱們作H5前端性能測試的時候，我的以爲只要不修改包，不對H5調試，就能夠放棄使用這類工具，不是工具很差，而是大材小用。

還有一類，這裏重點提到的是如Page Speed、PCAP Web Performance Analyzer、WebPagetest這類平臺型工具。咱們能夠快捷的測試出H5前端性能中數據，視圖，並給出必定程度的優化建議。

 

 

（*以上爲我的看法，若有疏漏和錯誤，請及時指正）

以手機管家端午節運營活動H5爲例，附上上述工具測試結果頁，固然這裏僅僅是結果的羅列。具體的分析仍是須要測試人員來作，衡量是否符合當前運營需求。

WebPagetest

 

 

 

Page Speed：

 

 

 

PCAP Web Performance Analyzer：

 

 

 

Chrome DevTools：

 

 

 

常見問題舉例：

一樣以手機管家端午節運營活動H5爲例：（完成整個加載性能測試耗時只需20分鐘左右）

一、HTTP請求過多

 

圖爲PCAP Web Performance Analyzer解析pcap包的結果，圖中咱們能夠看出，21個http請求中，有7個是統計點發出的請求。這裏能夠考慮統計點合併上報和首屏時減小上報統計點。

 

二、圖片空白部分太多

 

這裏須要用到的圖片僅僅是做爲右上角分享，可是在咱們請求的圖片確實整張完整的圖。
能夠考慮請求小的切圖，經過CSS控制圖片顯示位置。

 

 

三、圖片尺寸

 

下面一張背景圖，咱們能夠看到尺寸是1080X1919，而後當前市面上Android主流機型主要爲 480x800, 480x854, 540x960, 720x1280, 800x1280 。因此，爲每個移動設備都提供一張1080X1919的圖片實在沒有必要。

 

 

四、沒有使用的資源

 

下面這一幅圖，在chrome DevTools中看到請求響應並下載成功，可是在實際的H5活動中並無使用過。

 

 

五、返回碼非200

 

 

• 非200的返回碼意味着本次請求沒有實質性的收穫，如上圖所示的兩次非200請求返回值：

• 404：上圖請求圖片時出現404：一方面，可能圖片自己在H5中就不展現，因此這裏直接去掉多餘的鏈接就行了。另外一方面，可能H5中須要該圖片，而剛好訪問結果爲404，那此時就定位了一個bug 的存在。

• 302：請求音樂時出現302重定向：從圖中能夠明顯看出兩次請求後才獲取到背景音樂，從用戶側可能會感知是音樂加載速度慢。

六、未使用CDN，未設置cache

 

若是該運營活動是全國性的，且用戶量很大，那麼很是有可能網絡「邊緣」的用戶沒有辦法正常訪問該H5活動。

 

 

七、資源未壓縮

這裏詳細列出了各個沒有壓縮的圖片資源。這裏要建議的圖片的壓縮，如上圖測試結果，壓縮後能夠減小16K的圖片資源大小。還能夠考慮是否採用圖片地圖來減小http請求。