本文要點
詳細介紹谷歌瀏覽器 performance 選項卡的各個指標，讓你知道如何查看網頁性能。
谷歌瀏覽器版本為：79.0.3945.117（正式版本） （64 位）。
性能分析操作流程
在谷歌瀏覽器調式模式下，切換到 performance 選項卡。點擊刷新圖標（或者Ctrl+Shift+E快捷鍵）。
出現如下網頁分析進度條。
自動停止后，會出現性能分析圖。
注意點1：需要勾選屏幕快照選項，才會出現如下屏幕快照截圖（一般是默認勾選）。
注意點2：整個分析圖出現的時間軸就是前面步驟中分析進度條的時間，而默認出現的區域時間軸是首屏加載時間。
如圖所示：
（1）以上紅色框出的部分（也是整個時間軸）就是前面分析進度條的分析時間。
（2）以上綠色框出的部分是首屏加載時間。
（3）首屏加載時間刻度與選項卡 Summary 的 Total 總時間一致。
（4）如下圖可通過左右邊界來調整時間軸區域。時間軸區域 2 是 時間軸區域 1 的放大版，便於查看時間軸區間的各項指標性能情況。
性能分析圖詳解
如下所示，把整張分析圖划分成 3 個區域。
區域1：網頁性能總覽圖
總覽圖包含 FPS（每秒幀數情況）、CPU（CPU占用情況）、NET（網絡資源情況）、HEAP（JS占用情況）一共四項指標。
FPS：全稱 Frames Per Second，表示每秒傳輸幀數，是速度單位，用來分析動畫的一個主要性能指標。1fps = 0.304 meter/sec(米/秒)。如下圖所示，綠色豎線越高，FPS 越高。 紅色表示長時間幀，可能出現卡頓。
如果能夠達到 >=60fps(幀)/s 的刷新頻率，就可以避免出現卡頓。
盡量保證頁面要有高於每秒60fps(幀)的刷新頻率，這與大多數顯示器的刷新率相吻合(60Hz)。如果網頁動畫能夠做到每秒60幀，就會跟顯示器同步刷新，達到最佳的視覺效果。
這意味着，一秒之內進行 60 次重新渲染，每次重新渲染的時間不能超過1/60=0.01666s（秒）；0.01666s*1000=16.66ms（毫秒）。
不同幀的體驗：
幀率能夠達到 50 ～ 60 FPS 的動畫將會相當流暢，讓人倍感舒適；
幀率在 30 ～ 50 FPS 之間的動畫，因各人敏感程度不同，舒適度因人而異；
幀率在 30 FPS 以下的動畫，讓人感覺到明顯的卡頓和不適感；
幀率波動很大的動畫，亦會使人感覺到卡頓。
CPU：CPU 資源。此面積圖指示消耗 CPU 資源的事件類型。
下圖中顏色分別為（與數據統計中的顏色數據表示一致）：
藍色(Loading)：表示網絡通信和 HTML 解析時間。
黃色(Scripting)：表示 JavaScript 執行時間。
紫色(Rendering)：表示樣式計算和布局（重排）時間。
綠色(Painting)：表示重繪時間。
灰色(other)：表示其它事件花費的時間。
白色(Idle)：表示空閑時間。
NET：每條彩色橫杠表示一種資源。橫杠越長，檢索資源所需的時間越長。 每個橫杠的淺色部分表示等待時間（從請求資源到第一個字節下載完成的時間）。
HEAP：JavaScrip 執行的時間分布。
區域2：各項指標的區塊圖
Network：表示每個服務器資源的加載情況。
Frames：表示每幅幀的運行情況。
Timings：上圖中有 4 條虛線，分別表示如下。
（1）DCL（DOMContentLoaded）表示 HTML 文檔加載完成事件。當初始 HTML 文檔完全加載並解析之后觸發，無需等待樣式、圖片、子 frame 結束。作為明顯的對比，load 事件是當個頁面完全被加載時才觸發。
（2）FP（First Paint）首屏繪制，頁面剛開始渲染的時間。
（3）FCP（First Contentful Paint）首屏內容繪制，首次繪制任何文本，圖像，非空白canvas 或 SVG 的時間點。
（4）FMP（First Meaningful Paint）首屏有意義的內容繪制，這個“有意義”沒有權威的規定，本質上是通過一種算法來猜測某個時間點可能是 FMP。有的理解為是最大元素繪制的時間，即同LCP（Largest Contentful Paint ）。
其中 FP、FCP、FMP 是同一條虛線，三者時間不一致。比如首次渲染過后，有可能出現 JS 阻塞，這種情況下 FCP 就會大於 FP。
（5）L（Onload）頁面所有資源加載完成事件。
（6）LCP（Largest Contentful Paint ）最大內容繪制，頁面上尺寸最大的元素繪制時間。
Main：表示主線程。
合成線程主要負責：
Javascript 的計算與執行；
CSS 樣式計算；
Layout 布局計算；
將頁面元素繪制成位圖（paint），也就是光柵化（Raster）；
將位圖給合成線程。
Raster：光柵化（處理光柵圖，即位圖）。
GPU：表示 GPU 占用情況。
Chrome_childIOThread：子線程。
Compositor：合成線程。
合成線程主要負責：
將位圖（GraphicsLayer 層）以紋理（texture）的形式上傳給 GPU；
計算頁面的可見部分和即將可見部分（滾動）；
CSS 動畫處理；
通知 GPU 繪制位圖到屏幕上。
JS Heap：表示 JS 占用的內存大小。
Documents：表示文檔數。
Nodes：表示 Node 節點數。
Listeners：表示監聽數。
GPU Memory：表示 GPU 占用數。
下面的 4 條折線圖是以上 4 個指標（沒有 GPU 消耗）對應的時間消耗的內存大小與節點數量。若將某項指標前面的勾選去掉則不會出現對應的折線。
注意這個折線圖只有在點擊 Main 主線程的時候才會有，選擇其他的指標時折線圖區域時空白。
區域3：數據統計與匯總
Summary：表示各指標時間占用統計報表；
Bottom-Up：表示事件時長排序列表（倒序）；
Call tree：表示事件調用順序列表；
Event Log：表示事件發生的順序列表；
Loading 事件：
內容 說明
Parse HTML 瀏覽器解析 HTML
Finish Loading 網絡請求完成
Receive Data 請求的響應數據到達事件，如果響應數據很大（拆包），可能會多次觸發該事件
Receive Response 響應頭報文到達時觸發
Send Request 發送網絡請求時觸發
Scripting 事件：
內容 說明
Animation Frame Fired 一個定義好的動畫幀發生並開始回調處理時觸發
Cancel Animation Frame 取消一個動畫幀時觸發
GC Event 垃圾回收時觸發
DOMContentLoaded 當頁面中的DOM內容加載並解析完畢時觸發
Evaluate Script A script was evaluated.
Event JS 事件
Function Call 瀏覽器進入 JS 引擎時觸發
Install Timer 創建計時器（調用setTimeout()和setInterval()）時觸發
Request Animation Frame A requestAnimationFrame() call scheduled a new frame
Remove Timer 清除計時器觸發
Time 調用 console.time() 觸發
Time End 調用 console.timeEnd() 觸發
Timer Fired 定時器激活回調后觸發
XHR Ready State Change 當一個異步請求為就緒狀態后觸發
XHR Load 當一個異步請求完成加載后觸發
Rendering 事件：
內容 說明
Invalidate layout 當 DOM 更改導致頁面布局失效時觸發
Layout 頁面布局計算執行時觸發
Recalculate style Chrome 重新計算元素樣式時觸發
Scroll 內嵌的視窗滾動時觸發
Painting事件：
內容 說明
Composite Layers Chrome 的渲染引擎完成圖片層合並時觸發
Image Decode 一個圖片資源完成解碼后觸發
Image Resize 一個圖片被修改尺寸后觸發
Paint 合並后的層被繪制到對應顯示區域后觸發
后記
在我的博文 詳解網頁性能參數 performance API 中介紹了 performance API 的各項參數。本文介紹谷歌瀏覽器 performance 選項卡的使用。可能會有讀者疑惑，兩者有何區別？
詳解網頁性能參數 performance API 一文主要介紹網頁性能 API。你可以在你的 js 腳本中獲取到這些參數，來做性能監控，參數判斷等。
比如你可以在谷歌瀏覽器中打開任意網頁，進入調式模式，在 Console 選項卡中輸入 performance，得到如下參數。
而本文主要介紹如何使用谷歌瀏覽器性能查看工具 performance 選項卡。讀者可兩篇文章一起看，加深對網頁性能參數的了解。
————————————————
版權聲明：本文為CSDN博主「杏子_1024」的原創文章，遵循CC 4.0 BY-SA版權協議，轉載請附上原文出處鏈接及本聲明。
原文鏈接：https://blog.csdn.net/weixin_44135121/article/details/103998869