主要有4方面：（對照下圖）
1.控制按鈕。
2.overview。頁面性能的高級彙總（FPS:幀率，CPU:CPU佔用，NET:網絡請求）
3.火焰圖。CPU堆疊追蹤的可視化（左側名稱是主線程的各種事件，Network:網絡請求詳細情況）
4.數據統計。以圖表的形式彙總數據（summary:統計報表，Bottom-Up:事件時長順序，Call Tree:事件調用順序，Event log:事件發生的先後順序）
顏色表示：HTML 文件爲藍色，腳本爲黃色，樣式表爲紫色，媒體文件爲綠色，其他資源爲灰色
做錄製：
打開想要查看的頁面，刷新頁面，打開performance面板，點擊Record按鈕（當前面板左上角），開始錄製，recode按鈕變爲紅色，執行頁面交互，再次點擊Record停止錄製。完成錄製後，開發者工具會猜測哪一部分記錄最相關，並自動縮放到那一部分
查看結果：
2.overview窗格包含以下3個圖表：
a.FPS。每秒幀數。綠色豎線越高，FPS越高。FPS圖表上的紅色塊表示長時間幀，很可能會出現卡頓。
b.CPU。CPU資源。此面積圖指示消耗 CPU 資源的事件類型
c.NET。每條彩色橫槓表示一種資源。橫槓越長，檢索資源所需的時間越長。 每個橫槓的淺色部分表示等待時間（從請求資源到第一個字節下載完成的時間）
鼠標可以點擊或拖動選取某一部分，火焰圖自動匹配到相同部分，可以用 W(放大)、S(縮小)、A(左移)、和 D(右移) 鍵調整選擇。
3.火焰圖
在火焰圖上看到一到三條垂直的虛線。
藍線:：DOMContentLoaded 事件。
綠線：首次繪製的時間。
紅線： load 事件在火焰圖中選擇事件時，數據統計窗格會顯示與事件相關的其他信息
診斷：
js:
javaScript 計算，特別是會觸發大量視覺變化的計算會降低應用性能。 不要讓時機不當或長時間運行的 JavaScript 影響用戶交互下面是一些常見 JavaScript 問題
1、大開銷輸入處理程序影響響應或動畫
讓瀏覽器儘可能晚地處理觸摸和滾動，或者綁定偵聽
2、時機不當的 JavaScript 影響響應、動畫、加載
使用 requestAnimationFrame、使 DOM 操作遍佈各個幀、使用網絡工作線程
3、長時間運行的 JavaScript 影響響應
將純粹的計算工作轉移到web worker中。如果需要 DOM 訪問權限，配合使用requestAnimationFrame
樣式：
樣式更改開銷較大，在這些更改會影響 DOM 中的多個元素時更是如此。 只要將樣式應用到元素，瀏覽器就必須確定對所有相關元素的影響、重新計算佈局並重新繪製
點擊 Recalculate Style 事件（以紫色顯示）可以在 Details 窗格中查看更多相關信息。 如果樣式更改需要較長時間，對性能的影響會非常大。 如果樣式計算會影響大量元素，則需要改進另一個方面
要降低 Recalculate Style 事件的影響，使用一些對渲染性能的影響較小的屬性。如使用 transform 和 opacity 屬性更改來實現動畫，使用 will-change 或 translateZ 提升移動的元素
下面是一些常見的CSS問題
1、大開銷樣式計算影響響應或動畫
任何會更改元素幾何形狀的 CSS 屬性，如寬度、高度或位置；瀏覽器必須檢查所有其他元素並重做佈局。避免會觸發重排的CSS屬性
2、複雜的選擇器影響響應或動畫
嵌套選擇器強制瀏覽器瞭解與所有其他元素有關的全部內容，包括父級和子級。儘量在CSS中引用只有一個類的元素
重排
佈局（或重排）是瀏覽器用來計算頁面上所有元素的位置和大小的過程。 網頁的佈局模式意味着一個元素可能影響其他元素；例如body元素的寬度一般會影響其子元素的寬度以及樹中各處的節點等等。這個過程對於瀏覽器來說可能很複雜。 一般的經驗法則是，如果在幀完成前從 DOM 請求返回幾何值，將發現會出現“強制同步佈局”，在頻繁地重複或針對較大的 DOM 樹執行操作時這會成爲性能的大瓶頸。
performance面板可以確定頁面何時會導致強制同步佈局。 這些 Layout 事件使用紅色豎線標記
“佈局抖動”是指反覆出現強制同步佈局情況。 這種情況會在 JavaScript 從 DOM 反覆地寫入和讀取時出現，將會強制瀏覽器反覆重新計算佈局
重繪
繪製是填充像素的過程。這經常是渲染流程開銷最大的部分。 如果在任何情況下注意到頁面出現卡頓現象，很有可能存在繪製問題。
合成是將頁面的已繪製部分放在一起以在屏幕上顯示的過程。 大多數情況下，如果堅持僅合成器屬性並避免一起繪製，性能會有極大的改進，但是需要留意過多的層計數
原文鏈接：https://blog.csdn.net/kongduxue/article/details/82017491