【轉】兩款 Web 前端性能測試工具

前段時間接手了一個 web 前端性能優化的任務，一時間不知道從什麼地方入手，查了很多資料，發現其實仍是蠻簡單的，簡單來講說。

一.前端性能測試是什麼?

前端性能測試對象主要包括：

HTML、CSS、JS、AJAX 等前端技術開發的 Web 頁面

影響用戶瀏覽網頁速度的因素主要有：

服務端數據返回、網絡傳輸、頁面渲染等

前端性能測試目的：

計算出包含頁面渲染、網絡傳輸以及服務器端解析等綜合因素在內的加載時間指標，對該頁面性能進行評估分析，找出影響性能的主要因素和瓶頸，並在此基礎上，給出必定的優化建議和解決方案，從而提高用戶體驗

前端性能優化主要工具：

頁面結構分析工具： YSlow/PageSpeed

經過網頁 JS/CSS/Image 數及請求數量、請求類型、緩存等方面的靜態分析 ，多用於本地開發或者本地測試

真實用戶瀏覽頁面分析：OneAPM Browser Insight

經過真實瀏覽器訪問頁面，收集頁面的 w3c 標準信息，ajax，網絡等數據等終端分析，多用於內網多終端系統檢測和 web 網站檢測

二.靜態分析——Yslow（業界俗稱：雅虎評估網站性能的23條軍規）

經過給瀏覽器安裝 Yslow 插件並開啓後，在控制面板裏就會給你評分提示，和改進建議。

YSlow 的 Grade (等級視圖)

Yslow 給出的網站性能評分是從 F~A，A 最優、F 最差，經過上圖的測試博客來看，網站有 4 處得分最低，例如上圖中的最低分提示：我博客的 HTTP 請求太多。其中應用了 14 個外部 js、3 個 CSS 文件（以前我已從 6 個合併爲 3 個）、14個 CSS 背景圖片。

Yslow 的建議是讓我合併這些，至於合併 CSS 引用圖片我在「提升網站打開速度的7大祕籍」中介紹過。

Yslow Components（組件視圖）

能夠經過 Components 考驗查看網頁各個元素佔用的空間大小。例如我博客某個頁面，有 236 個 images（圖片），佔用了 489.2 K，經過詳細查看，發現來自 gravatar 頭像的引用圖片很是大，再加上博客自己評論量就大，每一個頭像就佔用幾 K，幾百個就佔用了整個網頁 50% 的大小，並且圖片仍是引用的，加載就更慢。

因此，得出的結論是：gravatar 雖然加強了互動性和個性，但也結結實實影響了網站速度。

Yslow Statistics（統計信息視圖）

上圖左側圖表顯示的是頁面元素在空緩存中的加載狀況，右側爲頁面元素使用緩存後的頁面加載狀況。從圖中能夠直觀的看出（尤爲是我標的紅框），這個網頁有 263 個 HTTP 請求，網頁的大小達到 773.9K ，意味着每打開一個頁面幾乎須要下載 1M 的東西，而經過使用緩存後咱們能夠看到效果圖片基本靠緩存，而網頁總大小壓縮到 43.2K 。

Statistics 這個統計信息視圖工具和 Components （第三選項卡）同樣，只是效果更直觀，若是要得到性能優化建議仍是要看 Grade （第二選項卡）的詳細建議。

三.終端分析：OneAPM Browser Insight/業界俗稱—real user monitoring

經過各類語言探針給頁面自動插入 js 代碼，在瀏覽器瀏覽的時候收集頁面加載時間和網絡信息，多用於內網多終端系統檢測和 web 網站.

主要性能指標:白屏時間、首屏時間、資源加載完成時間、網頁加載完成時間

OneAPM 的 Browser Insight 作的不是簡單的把 window.performance 的數據採集過來而後報上去，它們從網頁打開的整個過程區分了四個響應時間，具體的劃分標準每一個頁面都有標註。爲了不某一次訪問的特殊狀況拖慢了整個平均時間，用戶還能夠結合下面的定位分析功能一塊兒來看。

從總體趨勢查看頁面性能——定位分析

其實大多數互聯網公司之因此優化前端網頁，關心的是大多數打開本身的網頁是否流暢，一兩個個例並不在他的考慮範圍以內或者說並非當務之急。

定位分析功能實現了按響應時間把用戶體驗進行分區，包括 Apdex 指數分區和 W3C 頁面加載時間標準分區，經過分區能夠清晰的定位用戶體驗羣體，根據不一樣的羣體查看應用性能區間，包括網絡、服務器請求排隊、Web 應用處理耗時、網頁構建耗時、資源加載耗時，同時能夠多維度的查看用戶體驗區間的影響範圍

慢加載追蹤—瀑布流圖

頁面加載緩慢你們都能感受出來，但是，是服務器的緣由？是網絡的緣由？是頁面資源加載的緣由？是哪一個圖片加載的慢？這些問題 OneAPM 的慢加載追蹤解決的都比較好。上幾張乾貨圖！

必須得說這個作的真心棒!界面作的很漂亮，還很詳細，安卓 4.3 版本以上的微信瀏覽器也都能監控！

好了今天就簡單說這些，以後有機會咱們再聊~拜拜了各位~