作者：basinwang，騰訊 PCG 前端開發(fā)工程師

大型項目容易遇到性能問題,一般來說，當我們遇到性能瓶頸的時候，才會開始去進行相應(yīng)的分析。分析的方向除了業(yè)務(wù)本身的特點相關(guān)之外，常見的還可以借助一些工具來發(fā)現(xiàn)問題。本文主要介紹前端性能分析可以怎么走~

前端性能分析工具（Chrome DevTools）

一般來說，前端的性能分析通常可以從時間和空間兩個角度來進行：

時間：常見耗時，如頁面加載耗時、渲染耗時、網(wǎng)絡(luò)耗時、腳本執(zhí)行耗時等
空間：資源占用，包括 CPU 占用、內(nèi)存占用、本地緩存占用等

那么，下面來看看有哪些常見的工具可以借來用用。由于我們的網(wǎng)頁基本上跑在瀏覽器中，所以基本上大多數(shù)的工具都來源于瀏覽器自身提供，首選工具自然是 Chrome DevTools。本文我們也主要圍繞 Chrome DevTools 來進行說明。

Lighthouse

Lighthouse 的前身是 Chrome DevTools 面板中的 Audits。在 Chrome 60 之前的版本中, 這個面板只包含網(wǎng)絡(luò)使用率和頁面性能兩個測量類別，從 Chrome 60 版本開始， Audits 面板已經(jīng)被 Lighthouse 的集成版取代。而在最新版本的 Chrome 中，則需要單獨安裝 Lighthouse 拓展程序來使用，也可以通過腳本來使用。

架構(gòu)

Lighthouse 架構(gòu)

下面是 Lighthouse 的組成部分：

驅(qū)動（Driver）：和 Chrome Debugging Protocol 進行交互的接口
收集器（Gatherers）：使用驅(qū)動程序收集頁面的信息，收集器的輸出結(jié)果被稱為 Artifact
審查器（Audits）：將 Artifact 作為輸入，審查器會對其運行測試，然后分配通過/失敗/得分的結(jié)果
報告（Report）：將審查的結(jié)果分組到面向用戶的報告中（如最佳實踐），對該部分應(yīng)用加權(quán)和總體然后得出評分

主要功能

Lighthouse 會在一系列的測試下運行網(wǎng)頁，比如不同尺寸的設(shè)備和不同的網(wǎng)絡(luò)速度。它還會檢查頁面對輔助功能指南的一致性，例如顏色對比度和 ARIA 最佳實踐。

在比較短的時間內(nèi)，Lighthouse 可以給出這樣一份報告（可將報告生成為 JSON 或 html）：

Lighthouse 架構(gòu)

這份報告從 5 個方面來分析頁面：性能、輔助功能、最佳實踐、搜索引擎優(yōu)化和 PWA。像性能方面，會給出一些常見的耗時統(tǒng)計。除此以外，還會給到一些詳細的優(yōu)化方向。

如果你希望短時間內(nèi)對你的網(wǎng)站進行較全面的評估，可以使用 Lighthouse 來跑一下分數(shù)，確定大致的優(yōu)化方向。

Performance 面板

Performance 面板同樣有個前身，叫 Timeline。該面板用于記錄和分析運行時性能，運行時性能是頁面運行時（而不是加載）的性能。

使用步驟

Performance 面板功能特別多，具體的分析也可以單獨講一篇了。這里我們簡單說一下使用的步驟：

在隱身模式下打開 Chrome。隱身模式可確保 Chrome 以干凈狀態(tài)運行，例如瀏覽器的擴展可能會在性能評估中產(chǎn)生影響。
在 DevTools 中，單擊“Performance”選項卡，并進行一些基礎(chǔ)配置（更多參考官方說明）。
按照提示單擊記錄，開始記錄。進行完相應(yīng)的操作之后，點擊停止。
當頁面運行時，DevTools 捕獲性能指標。停止記錄后，DevTools 處理數(shù)據(jù)，然后在 Performance 面板上顯示結(jié)果。

主要功能

關(guān)于 Performance 怎么使用的文章特別多，大家網(wǎng)上隨便搜一下就能搜到。一般來說，主要使用以下功能：

查看 FPS 圖表：當在 FPS 上方看到紅色條形時，表示幀速率下降得太低，以至于可能損害用戶體驗。通常，綠色條越高，F(xiàn)PS 越高
查看 CPU 圖表：CPU 圖表在 FPS 圖表下方。CPU 圖表的顏色對應(yīng)于性能板的底部的 Summary 選項卡
查看火焰圖：火焰圖直觀地表示出了內(nèi)部的 CPU 分析，橫軸是時間，縱軸是調(diào)用指針，調(diào)用棧最頂端的函數(shù)在最下方。啟用 JS 分析器后，火焰圖會顯示調(diào)用的每個 JAVAScript 函數(shù)，可用于分析具體函數(shù)
查看 Buttom-up：此視圖可以看到某些函數(shù)對性能影響最大，并能夠檢查這些函數(shù)的調(diào)用路徑

具體要怎么定位某些性能瓶頸，可以參考官方文檔系列文章，這里就不詳細介紹啦。

Performance Monitor

打開 Chrome 控制臺后，按組合鍵ctrl + p(mac 快捷鍵為command + p)，輸入> Show Performance Monitor，就可以打開 Performance Monitor 性能監(jiān)視器。主要的監(jiān)控指標包括：

CPU usage：CPU 占用率
JS head size：JS 內(nèi)存使用大小
DOM Nodes：內(nèi)存中掛載的 DOM 節(jié)點個數(shù)
JS event listeners：事件監(jiān)聽數(shù)
...：其他等等

大多數(shù)情況下，我們在進行性能優(yōu)化的時候，使用上面一些工具也足以確定大致的優(yōu)化方向。更多的細節(jié)和案例，就不在這里詳述了。

前端性能監(jiān)控

除了具體的性能分析和定位，我們也經(jīng)常需要對業(yè)務(wù)進行性能監(jiān)控。前端性能監(jiān)控包括兩種方式：合成監(jiān)控（Synthetic Monitoring，SYN）、真實用戶監(jiān)控（Real User Monitoring，RUM）。

合成監(jiān)控

合成監(jiān)控就是在一個模擬場景里，去提交一個需要做性能審計的頁面，通過一系列的工具、規(guī)則去運行你的頁面，提取一些性能指標，得出一個審計報告。例如上面介紹的 Lighthouse 就是合成監(jiān)控。

合成監(jiān)控的使用場景不多，一般可能出現(xiàn)在開發(fā)和測試的過程中，例如結(jié)合流水線跑性能報告、定位性能問題時本地跑的一些簡單任務(wù)分析等。該方式的優(yōu)點顯而易見：

可采集更豐富的數(shù)據(jù)指標，例如結(jié)合 Chrome Debugging Protocol 獲取到的數(shù)據(jù)
較成熟的解決方案和工具，實現(xiàn)成本低
不影響真實用戶的性能體驗

真實用戶監(jiān)控

真實用戶監(jiān)控，就是用戶在我們的頁面上訪問，訪問之后就會產(chǎn)生各種各樣的性能指標。我們在用戶訪問結(jié)束的時候，把這些性能指標上傳到我們的日志服務(wù)器上，進行數(shù)據(jù)的提取清洗加工，最后在我們的監(jiān)控平臺上進行展示的一個過程。

我們提及前端監(jiān)控的時候，大多數(shù)都包括了真實用戶監(jiān)控。常見的一些性能監(jiān)控包括加載耗時、DOM 渲染耗時、接口耗時統(tǒng)計等，而對于頁面加載過程，可以看到它被定義成了很多個階段：

RUM 性能模型

而我們要做的，則是在力所能及的地方進行打點、計算、采集、上報，該過程常常需要借助 Performance Timeline API。將需要的數(shù)據(jù)發(fā)送到服務(wù)端，然后再對這些數(shù)據(jù)進行處理，最終通過可視化等方式進行監(jiān)控。因此，真實用戶監(jiān)控往往需要結(jié)合業(yè)務(wù)本身的前后端架構(gòu)設(shè)計來建設(shè)，其優(yōu)點也比較容易理解：

完全還原真實場景，減去模擬成本
數(shù)據(jù)樣本足夠抹平個體的差異
采集數(shù)據(jù)可用于更多場景的分析和優(yōu)化

對比合成監(jiān)控，真實用戶監(jiān)控在有些場景下無法拿到更多的性能分析數(shù)據(jù)（例如具體哪里 CPU 占用、內(nèi)存占用高），因此更多情況下作為優(yōu)化效果來參考。這些情況下，具體的分析和定位可能還是得依賴合成監(jiān)控。

但真實用戶監(jiān)控也有自身的優(yōu)勢，例如 TCP、DNS 連接耗時過高，在各種環(huán)境下的一些運行耗時問題，合成監(jiān)控是很難發(fā)現(xiàn)的。

性能分析自動化

我們在開發(fā)過程中，也常常需要進行性能分析。而前端的性能分析上手成本也不低，除了基本的頁面加載耗時、網(wǎng)絡(luò)耗時，更具體的定位往往需要結(jié)合前面介紹的 Performance 面板、FPS、CPU、火焰圖等一點點來分析。

如果這一塊想要往自動化方向發(fā)展，我們可以怎么做呢？

使用 Lighthouse

前面也有介紹 Lighthouse，它提供了腳本的方式使用。因此，我們可以通過自動化任務(wù)跑腳本的方式，使用 Lighthouse 跑分析報告，通過對比以往的數(shù)據(jù)來進行功能變更、性能優(yōu)化等場景的性能回歸。

使用 Lighthouse 的優(yōu)勢在于開發(fā)成本低，只需要按照官方提供的配置來調(diào)整、獲取自己需要的一些數(shù)據(jù)，就可以快速接入較全面的 Lighthouse 擁有的性能分析能力。

不過由于 Lighthouse 同樣基于 CDP(Chrome DevTools Protocol)，因此除了實現(xiàn)成本降低了，CDP 缺失的一些能力它也一樣會缺失。

Chrome DevTools Protocol

Chrome DevTools Protocol 允許第三方對基于 Chrome 的 Web 應(yīng)用程序進行檢測、檢查、調(diào)試、分析等。有了這個協(xié)議，我們就可以自己開發(fā)工具獲取 Chrome 的數(shù)據(jù)了。

認識 Chrome DevTools 協(xié)議

Chrome DevTools 協(xié)議基于 WebSocket，利用 WebSocket 建立連接 DevTools 和瀏覽器內(nèi)核的快速數(shù)據(jù)通道。

我們使用的 Chrome DevTools 其實也是一個 Web 應(yīng)用。我們使用 DevTools 的時候，瀏覽器內(nèi)核 Chromium 本身會作為一個服務(wù)端，我們看到的瀏覽器調(diào)試工具界面，通過 Websocket 和 Chromium 進行通信。建立過程如下：

DevTools 將作為 Web 應(yīng)用程序，Chromium 作為服務(wù)端提供連接。
通過 HTTP 提取 HTML、JavaScript 和 css 文件。
資源加載后，DevTools 會建立與瀏覽器的 Websocket 連接，并開始交換 JSON 消息。

同樣的，當我們通過 DevTools 從 windows、Mac 或 linux 計算機遠程調(diào)試 Android 設(shè)備上的實時內(nèi)容時，使用的也是該協(xié)議。當 Chromium 以一個--remote-debugging-port=0標志啟動時，它將啟動 Chrome DevTools 協(xié)議服務(wù)器。

Chrome DevTools 協(xié)議域劃分

Chrome DevTools 協(xié)議具有與瀏覽器的許多不同部分（例如頁面、Service Worker 和擴展程序）進行交互的 API。該協(xié)議把不同的操作劃分為了不同的域（domain），每個域負責不同的功能模塊。比如DOM、Debugger、Network、Console和Performance等，可以理解為 DevTools 中的不同功能模塊。

使用該協(xié)議我們可以：

獲取 JS 的 Runtime 數(shù)據(jù)，常用的如window.performance和window.chrome.loadTimes()等
獲取Network及Performance數(shù)據(jù)，進行自動性能分析
使用 Puppeteer 的 CDPSession，與瀏覽器的協(xié)議通信會變得更加簡單

與性能相關(guān)的域

本文講性能分析相關(guān)，因此這里我們只關(guān)注和性能相關(guān)的域。

1. Performance。從Performance域中Performance.getMetrics()可以拿到獲取運行時性能指標包括：

Timestamp: 采取度量樣本的時間戳
Documents: 頁面中的文檔數(shù)
Frames: 頁面中的幀數(shù)
JSEventListeners: 頁面中的事件數(shù)
Nodes: 頁面中的 DOM 節(jié)點數(shù)
LayoutCount: 全部或部分頁面布局的總數(shù)
RecalcStyleCount: 頁面樣式重新計算的總數(shù)
LayoutDuration: 所有頁面布局的合并持續(xù)時間
RecalcStyleDuration: 所有頁面樣式重新計算的總持續(xù)時間
ScriptDuration: JavaScript 執(zhí)行的持續(xù)時間
TaskDuration: 瀏覽器執(zhí)行的所有任務(wù)的合并持續(xù)時間
JSHeapUsedSize: 使用的 JavaScript 棧大小
JSHeapTotalSize: JavaScript 棧總大小

2. Tracing。Tracing域可獲取頁面加載的 DevTools 性能跟蹤。可以使用Tracing.start和Tracing.stop創(chuàng)建可在 Chrome DevTools 或時間軸查看器中打開的跟蹤文件。

我們能看到生成的 JSON 文件長這樣：

這樣的 JSON 文件，我們可以丟到 DevTools Timeline Viewer 中，可以看到對應(yīng)的時間軸和火焰圖：

3. Runtime。Runtime域通過遠程評估和鏡像對象暴露 JavaScript 的運行時。可以通過Runtime.getHeapUsage獲取 JavaScript 棧的使用情況，通過Runtime.evaluate計算全局對象的表達式，通過Runtime.queryObjects迭代 JavaScript 棧并查找具有給定原型的所有對象（可用于計算原型鏈中某處具有相同原型的所有對象，衡量 JavaScript 內(nèi)存泄漏）。

除了上面介紹的這些，還有Network可以分析網(wǎng)絡(luò)相關(guān)的性能，以及其他可能涉及 DOM 節(jié)點、JS 執(zhí)行等各種各樣的數(shù)據(jù)分析，更多的可能需要大家自己去研究了。