前言
萌新看大佬系列第二集 十分鐘上手chrome效能分析模板
學習文章：juejin.im/post/5b6d45… 作者：薄荷前端
什麼是chrome效能分析模板？
效能你都去哪兒了？ 俗話說知己知彼百戰不殆，我們要了解效能是怎麼分配的，才能做好效能優化塞，效能分析模板告訴你答案！
從載入，指令碼，渲染，paint（繪製）其他，空閒，通過這種餅狀圖方式，我們對效能一目瞭然。
為何要上手該皮膚？
不用白不用。
開始學習
# 準備工作
進入隱身模式 ctrl+shift+N
開啟 performance 選項卡
點選圖中的齒輪，為了模擬移動端，我們根據電腦效能選擇相應的cpu節流。
開啟截圖功能
此外如果還勾選了memory根據變化還可以看到大致的垃圾回收週期，以及有無明顯的記憶體洩露。
# 準備完畢，真刀真槍幹。
我們先獲取優化前的各種資料分析:先點選左上角 record 圓點記錄優化前版本的執行時效能,過一段時間之後點選停止。 圓點旁邊的重新整理樣的標誌（大佬叫圓形箭頭，hhh）是用於 loading 的效能分析的按鈕。
參觀一下效能分析皮膚
圖片的右邊標有:FPS;CPU;NET
- (Analyze frames per second)幀率,FPS
紅色橫條表示幀率過低已經影響了使用者體驗，通常情況下綠條越高,幀率越高,體驗越好.當幀率不影響使用的時候橫條是不會出現的。
- CPU
cpu對應下方summary的餅圖，哪塊大，哪塊對應的cpu消耗也就越大。
從本圖中不難看出花在頁面渲染的cpu消耗是最多的。
在FPS,CPU,NET上 左右移動滑鼠,就可以看到各個時間點的截圖,這在分析動畫執行的各個階段,以及了loading的各個階段的時候尤其有用.
圖片左邊的部分：
-
如果記錄期間包含網路請求那麼在 frame 上面還有一欄 Network,會用不同的顏色表示請求不同的資源
-
frames區域，滑鼠點上去會顯示當前的幀率
-
在記錄過程中按快捷鍵cmd + shift + p 然後輸入 show rendering (開啟實時檢視幀率的皮膚),可以看到實時的幀率變化
-
main 代表主執行緒, 一段橫條代表執行一個事件(函式),長度越長,花費的時間越多; 豎向代表呼叫棧.如果在這些橫條中右上角是紅色的就表示在該段程式碼執行過程中可能存在效能問題.
-
我們可以看到上圖中很多黃色橫條的右上角是紅色的，點選展開 main中的 這一部分: 點選 animation frame fired 事件,可以在下面看到相關資訊. 並且可以定位到 source 皮膚中的相關程式碼.根據定位到的程式碼段,閱讀程式碼我們可以發現,問題是出在選中的藍色背景的這句程式碼中
#最後補充一下和summory tab同級的幾個tab
- Bottom-Up,展示瀏覽器執行的各個操作說佔用的時間
- Call Tree,表示瀏覽器的基本操作(事件執行,繪製...)所佔用的時間
- Event Log,可以按照選中時間內事件發生的順序來檢視事件執行所佔用的時間.