Chrome自帶工具Performance

最近接到一個新需求，測試前端頁面在瀏覽器中的運行性能，在網上一通找，最後鎖定了Chrome自帶工具Performance，緣由很簡單：免費並能夠解決問題

以前也試過一個APM平臺，整體感受是報告數據比較直觀，統計維度比較廣，可是感受測試結果並不許確（與Performance對比），不過也多是本身沒有找到正確的使用方法。

第一步：F12，打開開發者工具，點擊Performance標籤

第二步：點擊右上角的小齒輪圖標，進行設置

在這個設置中，能夠模擬較差的網絡環境，也能夠模擬較差的cpu速度，好比手機環境中，cpu就沒有pc端的快，勾選Screenshots複選框，錄製過程能夠生成截圖

第三步：點擊錄製按鈕，而且快速在瀏覽器中輸入要測試的頁面地址，若是是登陸後的某個頁面，建議先登陸，再點錄製

第四步：等待頁面所有加載完成，點擊stop按鈕，頁面會當即生成報告

 

第五步：分析報告中的各個參數

這部分建議參考：https://zhuanlan.zhihu.com/p/29879682，寫得很是詳細，再也不贅述

最後補充幾點：

一、餅圖中的各個色塊表明什麼意思：

藍色(Loading)：網絡通訊和HTML解析
黃色(Scripting)：JavaScript執行
紫色(Rendering)：樣式計算和佈局，即重排
綠色(Painting)：重繪
灰色(other)：其它事件花費的時間
白色(Idle)：空閒時間

其中，紫色+綠色就是咱們常說的渲染時間

二、ajax請求回來的數據加載到頁面上，是算渲染時間，仍是js執行時間

應該算在js執行時間中，請看下面具體事件說明

其餘事件說明請參考：

 三、調用fps實時查看面板工具方法

在開發者工具面板右上角，點擊豎着的三個小圓點，選擇more tools，而後選擇Rendering

而後勾選FPS meter，最小化開發者工具，在頁面右上角就能夠看到了

 

以上內容參考以下：

https://segmentfault.com/a/1190000003991459#articleHeader1

https://zhuanlan.zhihu.com/p/29879682