Performance

Performance 是 Chrome 開發者工具中的一個功能，用於記錄網頁從初始化到執行時的所有效能指標。

注意！！！

使用 Performance 前，我們最好開啟 Chrome 的無痕模式。因為 Chrome 上一般有著大量的外掛，會或多或少的影響頁面的效能，所以我們關掉這個來避免對頁面效能的影響

接下來，我們點選左上角的 Record（小圓點）按鈕，Performance 進入 Record 階段，從此刻開始，它會記錄使用者的互動以及這些互動對頁面效能資料的影響。當互動完成後，點選 Stop 來停止 Record ，Performance。也可以點選小圓點右側的按鈕來記錄頁面記載過程的效能。

生成的 Performance 效能報告，我們先看頂部的三個資料：FPS、CPU 以及 NET。

FPS：主要和動畫效能有關，代表每秒幀數。圖表中的綠色長條越高，說明FPS越高，使用者體驗越好。如果其中有紅色長條，代表著這部分幀數有卡頓，需要優化

CPU：和底部的 Summary 對應，顯示了頁面載入過程中，各階段對 CPU 的佔用時間，佔用時間越多，代表該階段越需要優化。在 Performance 中，該部分是最需要關注的指標之一。

CPU 資源面積圖顏色劃分:

NET：每條彩色橫槓表示一種資源。橫槓越長，檢索資源所需的時間越長。 每個橫槓的淺色部分表示等待時間（從請求資源到第一個位元組下載完成的時間） 深色部分表示傳輸時間（下載第一個和最後一個位元組之間的時間）

• HTML：藍色
• CSS：紫色
• JS：黃色
• 圖片：綠色

中間的 Main

由於 Main 的圖表長得像一團團倒立的火焰，所以，我們將其稱為火焰圖。它展現了主執行緒在 Record 過程中做的所有事情，包括：Loading、Scripting、Rendering、Painting 等等。火焰圖的橫軸代表著時間，縱軸代表著呼叫堆疊。每一個長條代表執行了一個事件或函式，長條的長度代表著耗時的長短，如果某個長條右上角是紅色的則表示該函式存在效能問題，需要重點關注。

DOMContentLoaded: 就是 dom 內容載入完畢。 那什麼是 dom 內容載入完畢呢？開啟一個網頁當輸入一個 URL，頁面的展示首先是空白的，然後過一會，頁面會展示出內容，但是頁面的有些資源比如說圖片資源還無法看到，此時頁面是可以正常的互動，過一段時間後，圖片才完成顯示在頁面。從頁面空白到展示出頁面內容，會觸發 DOMContentLoaded 事件。而這段時間就是 HTML 文件被載入和解析完成。

load: 頁面上所有的資源（圖片，音訊，視訊等）被載入以後才會觸發 load 事件，簡單來說，頁面的 load 事件會在 DOMContentLoaded 被觸發之後才觸發。

最下面的 Summary

• 藍色(Loading)：網路通訊和HTML解析
• 黃色(Scripting)：JavaScript執行
• 紫色(Rendering)：樣式計算和佈局，即重排
• 綠色(Painting)：重繪
• 灰色(System)：其它事件花費的時間
• 白色(Idle)：空閒時間

Performance monitor

看起來，Performance 提供的效能監測功能已經較為完備，但是，它有兩個問題：

• 資料缺少實時性
• 資料面板過於複雜，不夠直觀

為了解決這兩個問題，Chrome 提供了 Performance monitor 功能，以實時直觀的資料展示頁面效能。

Lighthouse(Audits) 面板

來自 Google 的描述： Lighthouse 是一個開源的自動化工具，用於改進網路應用的質量。 您可以將其作為一個 Chrome 擴充套件程式執行，或從命令列執行。 您為 Lighthouse 提供一個您要審查的網址，它將針對此頁面執行一連串的測試，然後生成一個有關頁面效能的報告,會對頁面的載入進行分析，然後給出提高頁面效能的建議

• Performance 效能
• accessibility 無障礙使用
• Best Practice 使用者體驗
• SEO SEO 優化
• Progressive Web App 頁對於 PWA 的相容性

參考部落格：

脫離996，Chrome DevTools 面板全攻略！！！（收藏）

Chrome 效能監測