1.背景
性能優化是前端開發一個非常重要的組成部分，如何更好地進行網絡傳輸，如何優化瀏覽器渲染過程，來定位項目中存在的問題。Chrome DevTools給我們提供了2種常用方式 Audits和Performance，Audits可以對頁面進行性能評分，同時，還會給我們提供一些優化建議。而Performance提供了非常多的運行時數據，能讓我們看到更多細節數據。下面主要介紹一下如何使用DevTools中的Performance來進行性能分析
2.Performance介紹
首先在新的無痕窗口打開網頁，打開Chrome DevTools 切換到 Performance 下可以看到以下畫面
上圖1、3區域按鈕可以用來觸發性能數據記錄，黑色按鈕可以記錄交互階段的性能數據，圓形箭頭按鈕用來記錄加載階段的性能數據。
上圖2區域 可以設置當前頁面的網絡加載速度與cpu運算速度。
下面我們點擊黑色按鈕來生成一份交互階段的性能報告
第一部分：概覽
這裏最主要是整體的界面渲染的時候，每個時間段執行的事件順序，通過上圖我們就能知道我們每個時間段（精確到毫秒）都做了什麼，當鼠標放上去的時候，我們還可以大圖的形式去查看我們每個時間段界面的渲染情況，Performance 就會將幾個關鍵指標，諸如頁面幀速 (FPS)、CPU 資源消耗、網絡請求流量、V8 內存使用量 (堆內存) 等，按照時間順序做成圖表的形式展現出來。
第二部分：性能面板
性能面板主要包括以下幾部分
1.Network 這裏我們可以直觀的看到資源加載的順序與時長
2.Interactions 用來記錄用戶交互操作，比如點擊鼠標、輸入文字、動畫等
3.Timings 用來記錄一些關鍵的時間節點在何時產生的數據信息，諸如 FP、FCP、LCP 等
4.Main 是Performance工具中比較重要的部分，記錄了渲染進程中主線程的執行記錄，點擊main可以看到某個任務執行的具體情況
5.Compositor 合成線程的執行記錄，用來記錄html繪製階段 (Paint)結束後的圖層合成操作
6.Raster 光柵化線程池，用來讓 GPU 執行光柵化的任務
7.GPU GPU進程主線程的執行過程記錄，如 可以直觀看到何時啓動GPU加速…
Memory 選項，在勾選後，就會顯示該折線圖，通過該圖可以看出我們在不同的時間段的執行情況。我們可以看到頁面中的內存使用的情況，比如 JS Heap(堆)，如果曲線一直在增長，則說明存在內存泄露，如果相當長的一段時間，內存曲線都是沒有下降的，這裏是有發生內存泄露的可能的。
通過對性能面板各個部分的分析與問題定位，可以更深刻的理解瀏覽器是如何工作的
第三部分：Summary（性能摘要）
它是一個用來統計在我們檢測性能的時間範圍內，都做了哪些事情：
Loading ：加載時間
Scripting ：js計算時間
Rendering ：渲染時間
Painting ：繪製時間
Other ：其他時間
Idle ：瀏覽器閒置時間
3.Performance實踐
下面舉例來說明一下性能面板的使用，在無痕窗口下點擊自動重啓頁面，並記錄整個頁面加載的過程，然後來分析結果～
網絡&&白屏
性能面板，有很多很多的參數，我們要看一些比較常見的。首先看白屏時間和網絡加載情況，如下圖
上圖，我們可以看幾點信息：
本次頁面加載的白屏時間約爲 150 ms
從網絡資源加載情況來看，圖片沒有啓用 http2，因此每次可以同時加載的圖片數有限，未被加載的圖片有等待過程
資源的加載時間也可以看到
另外，我們可以看一下資源加載有沒有空白期，雖然上圖沒有，但是如果資源加載之間存在空白期，說明沒有充分利用資源加載的空閒時間，可以調整一下。
火焰圖
火焰圖，主要在 Main 面板中，是我們分析具體函數耗時最常看的面板，我們來看一下，如圖：
首先，面板中會有很多的 Task，如果是耗時長的 Task，其右上角會標紅，這個時候，我們可以選中標紅的 Task，然後放大，看其具體的耗時點。
放大後，這裏可以看到都在做哪些操作，哪些函數耗時了多少,這裏代碼有壓縮，看到的是壓縮後的函數名。然後我們點擊一下某個函數，在面板最下面，就會出現代碼的信息，是哪個函數，耗時多少，在哪個文件上的第幾行等。這樣我們就很方便地定位到耗時函數了。
同時也可以查看 Main 指標分析代碼裏面是否存在強制同步佈局等操作，分析出來這些原因之後，我們可以有針對性地去優化我們的程序
時間線&&內存情況
在 Timings 的區域，我們可以看到本次加載的一些關鍵時間，分別有：
FCP: First Contentful Paint
LCP: Largest Contentful Paint
FMP: First Meaningful Paint
DCL: DOMContentLoaded Event
L: Onload Event
我們可以選區(選擇從白屏到有內容的區域，代表本次的頁面加載過程)，可以對照着看一下上面的時間，截圖如下：
另外，我們可以看到頁面中的內存使用的情況，比如 JS Heap(堆)，如果曲線一直在增長，則說明存在內存泄露。如果Nodes和Listeners不斷增加說明可能存在重複添加節點或者事件的情況。
最下方就是頁面的一個整體耗時概況，如果 Scripting 時間過長，則說明 js執行的邏輯太多，可以考慮優化js，如果渲染時間過長，則考慮優化渲染過程，如果空閒時間過多，則可以考慮充分利用起來，比如把一些上報操作放到頁面空閒時間再上報等。
4.最後
大家可以自己去嘗試一下performance的使用，通過performance可以更直觀的理解瀏覽器的渲染原理與工作流程，同時也能夠將瀏覽器的系統架構、消息循環機制、渲染流水線等前端概念聯繫到一起，加深理解。
作者簡介
李長江爲好未來前端開發高級專家
招聘信息
好未來技術團隊正在熱招前端、算法、流媒體後臺開發等各個方向高級開發工程師崗位，大家可掃描下方二維碼或者微信搜索關注“好未來技術”，點擊本公衆號“技術招聘”欄目瞭解詳情，歡迎感興趣的夥伴加入我們！
也許你還想看
