Chrome Performance 頁面性能分析指南

1.背景

性能優化是前端開發一個很是重要的組成部分，如何更好地進行網絡傳輸，如何優化瀏覽器渲染過程，來定位項目中存在的問題。Chrome DevTools給咱們提供了2種經常使用方式 Audits和Performance，Audits能夠對頁面進行性能評分，同時，還會給咱們提供一些優化建議。而Performance提供了很是多的運行時數據，能讓咱們看到更多細節數據。下面主要介紹一下如何使用DevTools中的Performance來進行性能分析

2.Performance介紹

首先在新的無痕窗口打開網頁，打開Chrome DevTools 切換到 Performance 下能夠看到如下畫面

上圖一、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能夠更直觀的理解瀏覽器的渲染原理與工做流程，同時也可以將瀏覽器的系統架構、消息循環機制、渲染流水線等前端概念聯繫到一塊兒，加深理解。

做者簡介

李長江爲好將來前端開發高級專家

招聘信息

好將來技術團隊正在熱招前端、算法、流媒體後臺開發等各個方向高級開發工程師崗位，你們可掃描下方二維碼或者微信搜索關注「好將來技術」，點擊本公衆號「技術招聘」欄目瞭解詳情，歡迎感興趣的夥伴加入咱們！

也許你還想看

DStack--基於flutter的混合開發框架

WebRTC源碼分析——視頻流水線創建（上）

"考試"背後的科學：教育測量中的理論與模型（IRT篇）