[萌]chrome性能分析面板

前言

萌新看大佬系列第二集 十分鐘上手chrome性能分析模板

學習文章：juejin.im/post/5b6d45… 做者：薄荷前端

什麼是chrome性能分析模板？

性能你都去哪兒了？ 俗話說知己知彼百戰不殆，咱們要了解性能是怎麼分配的，才能作好性能優化塞，性能分析模板告訴你答案！

從加載，腳本，渲染，paint（繪製）其餘，空閒，經過這種餅狀圖方式，咱們對性能一目瞭然。

爲什麼要上手該面板？

不用白不用。

開始學習

# 準備工做

進入隱身模式 ctrl+shift+N

打開 performance 選項卡

點擊圖中的齒輪，爲了模擬移動端，咱們根據電腦性能選擇相應的cpu節流。

打開截圖功能

此外若是還勾選了memory根據變化還能夠看到大體的垃圾回收週期，以及有無明顯的內存泄露。

# 準備完畢，真刀真槍幹。

官方案例

咱們先獲取優化前的各類數據分析:先點擊左上角 record 圓點記錄優化前版本的運行時性能,過一段時間以後點擊中止。 圓點旁邊的刷新樣的標誌（大佬叫圓形箭頭，hhh）是用於 loading 的性能分析的按鈕。

參觀一下性能分析面板

圖片的右邊標有:FPS;CPU;NET

1. (Analyze frames per second)幀率,FPS

紅色橫條表示幀率太低已經影響了用戶體驗，一般狀況下綠條越高,幀率越高,體驗越好.當幀率不影響使用的時候橫條是不會出現的。

2. CPU

   

cpu對應下方summary的餅圖，哪塊大，哪塊對應的cpu消耗也就越大。

從本圖中不難看出花在頁面渲染的cpu消耗是最多的。

在FPS,CPU,NET上 左右移動鼠標,就能夠看到各個時間點的截圖,這在分析動畫執行的各個階段,以及了loading的各個階段的時候尤爲有用.

圖片左邊的部分：

1. 若是記錄期間包含網絡請求那麼在 frame 上面還有一欄 Network,會用不一樣的顏色表示請求不一樣的資源

2. frames區域，鼠標點上去會顯示當前的幀率

3. 在記錄過程當中按快捷鍵cmd + shift + p 而後輸入 show rendering (打開實時查看幀率的面板),能夠看到實時的幀率變化

4. main 表明主線程, 一段橫條表明執行一個事件(函數),長度越長,花費的時間越多; 豎向表明調用棧.若是在這些橫條中右上角是紅色的就表示在該段代碼執行過程當中可能存在性能問題.

   

5. 咱們能夠看到上圖中不少黃色橫條的右上角是紅色的，點擊展開 main中的 這一部分: 點擊 animation frame fired 事件,能夠在下面看到相關信息. 而且能夠定位到 source 面板中的相關代碼.根據定位到的代碼段,閱讀代碼咱們能夠發現,問題是出在選中的藍色背景的這句代碼中

   

   具體出了什麼問題，不作討論。 重繪與重排也能夠看看谷歌官方文檔

#最後補充一下和summory tab同級的幾個tab

1. Bottom-Up,展現瀏覽器執行的各個操做說佔用的時間
2. Call Tree,表示瀏覽器的基本操做(事件執行,繪製...)所佔用的時間
3. Event Log,能夠按照選中時間內事件發生的順序來查看事件執行所佔用的時間.