概況圖
無痕模式
無痕模式可以保證Chrome在一個相對干凈的環境下運行，避免chrome上安裝的插件影響性能分析結果。
文件—>打開新的無痕式窗口，或使用快捷鍵ctrl + shift + N 打開無痕模式下的chrome新標簽頁
性能記錄
點擊面板里的○，可以記錄運行時的性能記錄，如下圖：
再次點擊Record或者點擊Stop停止記錄。
加載時性能記錄錄制
若要分析頁面記載時性能需要錄制加載時性能。
打開待分析性能的頁面。
打開Devtools中Performance窗口。
-
點擊左上角重新加載按鈕。DevTools會自動記錄頁面加載是各項性能指標，加載完成幾秒后自動停止記錄。
Devtools記錄會自動增加image頁面加載時記錄
image
清除記錄
清除 Performance 窗口中的記錄數據。
抓取運行時屏幕快照
點選Screenshots選項開啟為每一幀記錄屏幕快照功能。
查看內存度量值
點選Memory 選項打開內存度量功能。
DevTools在Summary面板上側顯示一個新的Memory 圖表。在 NET圖表下邊也顯示一個HEAP圖表。HEAP圖表提供的信息同Memory面板中JS Heap提供的信息相同。
禁用JavaScript采樣
默認情況下，記錄中Main部分會詳細顯示整個錄制過程中JavaScript函數調用棧情況。點選Disable JavaScript Samples選項，禁用之后記錄中會忽略所有JavaScript棧的調用，記錄的Main 部分會比開啟更簡短。
以下展示了開啟和禁止JavaScript樣例的效果圖。
控制錄制過程中的網絡加載速度
修改Network點選項，可自定義。
開啟加速渲染工具
點選Enable advanced paint instrumentation選項（會帶來大量的性能開銷）
控制錄制過程中CPU工作頻率
將CPU設置為需要的運算速度模式。
CPU工作頻率的控制結果跟實際使用的機器能力有關。例如，4x slowdown 選項會使你本地CPU運算速率比正常情況下降低4倍。不同設備由于設計架構不同，Devtools不能精確模擬移動端設備的CPU運算模式。
保存記錄
會保存成JSON文件
加載記錄
單擊鼠標右鍵選擇 Load Profile加載記錄。
分析性能記錄
運行時或者加載時性能錄制結束后，在Performance窗口中會顯示相關數據，從而對于記錄過程中的情況進行分析。
選擇記錄中的一部分
在 Overview 窗口中，可以選中記錄的某一部分。 Overview 窗口指的是包含FPS, CPU和 NET圖表部分。
查看主線程活動
利用Main區域查看頁面主線程加載時的主要活動。
點擊某一函數在 Summary 窗口中查看更多詳細信息。如圖中所示DevTools選中_getRequestData事件。
DevTools采用隨機的顏色標識腳本信息，如上面圖中淺綠色標識函數調用，深黃色標識腳本活動。
若想隱藏火焰圖中的JavaScript中調用的詳細信息，請查看前面介紹的禁用JavaScript樣例功能。若禁用JavaScript樣例功能，你只可以看到初始調用事件。比如，圖中標識的Timer fired 和Function Call 。
在表格中查看活動
錄制結束后，利用Main窗口中信息不是分析數據的唯一方式。DevTools另外提供了三種表格式分析活動方式，每種方式都是從不同的角度出發:
若想分析那些活動占用時間更多時，可以利用 Bottom-Up窗口。
若想分析導致更多活動的根活動時，可以采用 Call Tree。
若想按順序分析記錄中發生的活動時，可以利用Event Log窗口。
根活動
根活動指的是瀏覽器觸發的一系列流程。例如，當你點擊頁面內容，瀏覽器觸發一個Event作為根活動，該Event可能回調一個事件處理事件。
在Main面板中的火焰圖中，根活動展示在上部，在Call Tree和Event Log面板中，根活動展示在頂層。
Call Tree標簽頁
Call Tree 標簽頁中展示記錄中被選中部分的活動信息。
圖中Activity 列中顯示的Timer fired、 Paint、Recalculate Style和Layout 代表根活動。層級嵌套表示代表回調棧。如圖中Function Call調用u，再調用getImageUrl，繼續調用getLinkUrl等等。
Self Time 表示對應活動消耗的時間，Total Time表示對應活動以及子活動共同消耗的時間。
點擊Self Time，Total Time或者Activity表頭區域，可按對應列排序。
利用Filter 輸入框區域，輸入活動名過濾事件。
Grouping分組菜單默認為No Grouping，利用該功能可以根據不同的分類將活動進行分組。
點擊右側Show Heaviest Stack，在右側展示當前選中活動中占用時間最多的子活動信息。
Bottom-Up標簽頁
利用Bottom-Up標簽查看占用最多時間的活動。
Self Time表示對應活動消耗的時間。
Total Time表示對應活動以及子活動共同消耗的時間。
Event Log標簽頁
Event Log 標簽頁按順序展示記錄中發生的活動。
Start Time列表示該項活動的開始時間，該時間相對于記錄開始時間計算。例如圖中選中項開始時間為1566.2 ms，代表該活動在記錄開始之后1566.2 ms后開始。
Self Time 表示對應活動消耗的時間。
Total Time表示對應活動以及子活動共同消耗的時間。
點擊Start Time 、Self Time、Total Time表頭區域，可按對應列排序。
利用Filter 輸入框區域，輸入活動名過濾事件。
利用Duration下拉菜單過濾>=1ms或者>=15ms的活動。該菜單默認選中All選項，展示所有活動。
利用Loading、Experience、Scripting、Rendering、Painting選項進行分類過濾。
Network模塊
圖標的中的時間等于network transfer和resource loading之和。
圖表的淺色區域代表Request Sent和Waiting (TTFB)。
圖表的深色區域代表 Content Download.
右側線代表resource loading的時間。這個時間在 Timing 面板中不顯示。
以下是請求在Timing選項中的展示
分析每秒傳輸幀數（FPS）
- 查看
FPS圖表了解整個記錄中FPS的概況。 -
Frames模塊查看每一幀時間消耗。 - 利用
FPS meter工具(MoreTools--->Rendering)在頁面運行時實時查看FPS信息。
FPS圖表
FPS 圖表顯示了整個記錄過程中幀率的概況。圖表中綠色折線越高代表幀率越好。
FPS折線圖上測出現的紅色橫線為一條性能警示線，表示幀率低于該值會嚴重影響用戶體驗。
Frames模塊
Frames 模塊清晰表明每個幀消耗時間。
鼠標在某一幀上懸?？梢圆榭锤嘣敿毿畔?。
查看交互信息
利用Interactions模塊查看并分析記錄過程中用戶的交互操作。
查看GPU活動
在GPU模塊查看GPU活動信息
查看柵格活動
在Raster模塊查看柵格活動信息
參考資料：
1.Devtools-Performance
2.Performance API
3.chrome調試-性能分析performance篇
4.「原創.第31期」最近做首屏優化學到的知識點
5.Devtools 老師傅養成[6] - Performance 面板
6.前端感官性能的衡量和優化實踐
7.性能分析介紹
8.使用chrome開發者工具中的performance面板解決性能瓶頸
