Performance
Performance是Chrome開發者工具中的一個功能，用於記錄網頁從初始化到運行時的所有性能指標。
注意！！！
使用 Performance 前，我們最好打開 Chrome 的無痕模式。因為 Chrome 上一般有着大量的插件，會或多或少的影響頁面的性能，所以我們關掉這個來避免對頁面性能的影響
接下來，我們點擊左上角的 Record（小圓點）按鈕，Performance 進入 Record 階段，從此刻開始，它會記錄用戶的交互以及這些交互對頁面性能數據的影響。當交互完成后，點擊 Stop 來停止 Record ，Performance。也可以點擊小圓點右側的按鈕來記錄頁面記載過程的性能。
生成的 Performance 性能報告，我們先看頂部的三個數據：FPS、CPU 以及 NET。
FPS：主要和動畫性能有關，代表每秒幀數。圖表中的綠色長條越高，說明FPS越高，用戶體驗越好。如果其中有紅色長條，代表着這部分幀數有卡頓，需要優化
CPU：和底部的 Summary 對應，顯示了頁面加載過程中，各階段對 CPU 的占用時間，占用時間越多，代表該階段越需要優化。在 Performance 中，該部分是最需要關注的指標之一。
CPU 資源面積圖顏色划分:
| 顏色 | 執行內容 |
|---|---|
| 藍色(Loading) | 網絡通信和 HTML 解析 |
| 黃色(Scripting) | JavaScript 執行 |
| 紫色(Rendering) | 樣式計算和布局，即重排 |
| 綠色(Painting) | 更改外觀而不會影響布局，重繪 |
| 灰色(other) | 其它事件花費的時間 |
| 白色(Idle) | 空閑時間 |
NET：每條彩色橫杠表示一種資源。橫杠越長，檢索資源所需的時間越長。 每個橫杠的淺色部分表示等待時間（從請求資源到第一個字節下載完成的時間） 深色部分表示傳輸時間（下載第一個和最后一個字節之間的時間）
- HTML：藍色
- CSS：紫色
- JS：黃色
- 圖片：綠色
中間的 Main
由於 Main 的圖表長得像一團團倒立的火焰，所以，我們將其稱為火焰圖。它展現了主線程在 Record 過程中做的所有事情，包括：Loading、Scripting、Rendering、Painting 等等。火焰圖的橫軸代表着時間，縱軸代表着調用堆棧。每一個長條代表執行了一個事件或函數，長條的長度代表着耗時的長短，如果某個長條右上角是紅色的則表示該函數存在性能問題，需要重點關注。
| 顏色 | 意義 |
|---|---|
| 藍線 | DOMContentLoaded 事件 |
| 綠線FP | 首次繪制的時間 |
| FCP | 第一次豐富內容的繪圖 |
| FMP | 第一次有意義的繪圖 |
| LCP | 最大區域內容繪制 |
| 紅線 | load 事件 |
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 的兼容性
參考博客：