好用的前端頁面性能檢測工具—sitespeed.io

引言

最近在作HTTP2技術相關調研，想確認一下HTTP2在什麼情境下性能會比HTTP1.x有顯著提高，當我把http2的本地環境（nginx+PHP）部署完成後進行相關測試時，我遇到了如下問題：

（1）平時使用的都是在線分析工具，如google的PageSpeed Insights和GTmetrix，這些工具沒法提供線下測試環境；

（2）本身經過chrome dev-tool的Perfomance進行分析，須要手動刷新，並手動記錄，須要大量的重複工做，尤爲是要控制變量測試的狀況；

（3）經過代碼打log，即經過performance.timing中記錄的TimeEvent時刻計算頁面性能指標，指標的完整性和圖形化展現仍須要工做量；

（4）可否在真機上測試，如今都是在PC上模擬。

因而就想着可否有一個工具可以調起瀏覽器，利用瀏覽器debug面板中的各類數據（請求、事件等）爲用戶提供頁面性能分析結果，最好能圖形化或表格展現。檢索了一下，發現了 sitespeed.io這個開源工具，基本符合個人預期，這裏跟大夥分享一下這個工具。 

 sitespeed.io相關介紹

sitespeed.io的產出

介紹sitespeed.io以前，先看看sitespeed.io的產出。

安裝sitespeed.io以後，若是要分析一下百度PC首頁性能，執行如下命令：

 

sitespeed.io  -n 5 -v https://www.baidu.com

該命令將會在chrome瀏覽器下調起URL爲https://www.baidu.com 5次，產出了一個分析文件夾，文件夾下載請戳這裏：

 

打開index.html文件後，咱們能夠看到關於頁面性能的相關總結。

 

頁面性能總結

 

頁面相關意見

 

咱們能夠看到該工具圍繞：頁面性能（Performance）、Web最佳實踐（Web Best Practice）和可用性（Accessibility）三個核心指標進行打分，每一個核心指標考覈的內容能夠在help.html文件中查找。頁面中的其餘指標，如文件壓縮、文件大小、請求數、緩存時間、請求狀態碼、首次渲染時間、前端渲染用時、頁面加載用時、DNS解析時長等，這些指標都有詳細的統計，並且不一樣等級用相應的顏色表示，基本知足個人訴求。

sitespeed.io的工做原理

sitespeed.io是一個開源工具，旨在檢測和提升web頁面的性能。它擁有一套插件，如Coach、Broswertime、Chrome-HAR等，幫助sitespeed蒐集瀏覽器debug狀態下的數據，並基於網站最佳實踐給出相應的打分和意見，最後把數據可視化展現。

sitespeed.io評價網頁的主要依據是：瀏覽器的網絡請求和TimeLine中的Time Event。

Browsertime插件會使用Selenium NodeJS操控瀏覽器，讓瀏覽器加載指定的頁面，並執行配置的JS代碼，採集Timeline中各個Time Event觸發的時間數據，同時藉助Chrome-HAR插件把頁面中HTTP請求過程存儲在.har文件中，爲了便於分析，sitespeed.io利用PageXray插件將.har文件轉換成JSON文件；而後Coach插件根據相應的指標進行打分，並提出改進意見。總的來講，sitespeed.io的工做原理以下圖所示。

sitespeed.io工做原理圖

因爲接觸sitespeed.io的時間比較短，目前積累比較少，此次僅作個簡單的分享，但願更多前端的小夥伴可以接觸並使用該工具，寫出高性能的頁面。