前端性能測試工具

• Chrome Devtools

• 優點：

• 支援移動端H5在PC端遠端調試，能夠對具體的移動端裝置進行測試
• 內建了page speed
• 提供network面闆，展示瀑布流視圖，各種資源清晰羅列，還提供縮略圖，友善檢視圖檔的大小、尺寸和備援或缺失。
• 可模拟網速、設定device分辨率來測試實際的弱網環境顯示效果
• 提供timeline面闆，展示記憶體、CPU變化，FPS等性能資料等

• 缺點

• 錄制後分析的一種靜态分析方法，不同于fiddle等抓包工具提供實時的抓包、修改等功能

• webpagetest

• 工具連結：​​https://www.webpagetest.org/​​
• 優點：

• 提供了首屏時間、首位元組時間、全界面加載時間工具，并提供對應的時間點截圖
• 不僅提供瀑布流視圖，還提供連接配接視圖，清晰展示了并發請求的HTTP連接配接以及請求資源
• 提供優化建議checklist，詳細标出各個資源是否可優化，如：壓縮、緩存、釋出cdn，設定Gzip等
• 提供測試過程中的視訊示範

• 缺點：

• 并不是專門為移動端H5測試所設計的
• 關注H5前端頁面本身的性能，沒有關注浏覽器引起的記憶體、CPU變化，FPS等

• PageSpeed Insights

• 工具連結：​​http://www.googlespeed.cn​​
• 優點：

• 直覺的測試結果展示，并提供優化建議
• 可以分别測試移動端和PC端的結果
• 提供了網頁速度和使用者體驗兩類的測試結果，包括字型清晰、視窗大小等使用者體驗結果

• 缺點：

• 隻有結果，沒有詳細的資源資料統計
• 沒有提供各個HTTP和request和reponse的詳細資料

具體分析H5的頁面情況時，3中工具可以結合一起使用

1.作者：Syw

2.本文版權歸作者所有，歡迎轉載，但未經作者同意必須保留此段聲明，且在文章頁面明顯位置給出原文連接配接，否則保留追究法律責任的權利。