前端性能監控

目錄

• ​​1. 性能監控名額​​

• ​​（1）感官名額​​
• ​​（2）Performance API​​

• ​​2. 性能資料收集工具​​

• ​​（1）chrome dev Tools​​
• ​​（2）Lighthouse​​
• ​​（3）第三方收費方案​​
• ​​（4）自研性能監控系統​​

• ​​3. 利用performance面闆做性能分析​​
• ​​4. 利用LightHouse面闆做性能分析​​

1. 性能監控名額

（1）感官名額

既然是性能監控，那首先需要明确衡量名額。一般來說，業界認可的常用感官上的名額有：

• 首次繪制（FP）時間：對于應用頁面，使用者在視覺上首次出現不同于跳轉之前的内容時間點，或者說是頁面發生第一次繪制的時間點。
• 首次有内容繪制（FCP）時間：指浏覽器完成渲染 DOM 中第一個内容的時間點，可能是文本、圖像或者其他任何元素，此時使用者應該在視覺上有直覺的感受。
• 首次有意義繪制（FMP）時間：指頁面關鍵元素渲染時間。這個概念并沒有标準化定義，因為關鍵元素可以由開發者自行定義——究竟什麼是“有意義”的内容，隻有開發者或者産品經理自己了解。
• 首屏時間：對于所有網頁應用，這是一個非常重要的名額。用大白話來說，就是進入頁面之後，應用渲染完整個手機螢幕（未滾動之前）内容的時間。需要注意的是，業界對于這個名額其實同樣并沒有确切的定論，比如這個時間是否包含手機螢幕内圖檔的渲染完成時間。
• 使用者可互動時間：顧名思義，也就是使用者可以與應用進行互動的時間。一般來講，我們認為是 domready 的時間，因為我們通常會在這時候綁定事件操作。如果頁面中涉及互動的腳本沒有下載下傳完成，那麼當然沒有到達所謂的使用者可互動時間。

（2）Performance API

提到性能優化名額就不得不說 Performance API，這個 API 是 HTML5 新增的特性。過去我們要統計腳本的運作時間，可能會使用 Date.getTime() 去擷取對應的時間；如果要擷取白屏時間是在 head 末尾插入一段擷取時間戳的代碼，然後用這個時間戳減去開始接收資料的那個時間戳，得出的結果為白屏時間。這樣的方法無疑是笨重的，而且擷取的時間無法更精确(隻能到ms級别)，而且一些背景比較關注的時間根本無法擷取。W3C 為了解決這個問題，在 HTML5 推出的時候，新增了這個 API 。

MDN 上對 Performance API 的解釋：

Performance 接口可以擷取到目前頁面中與性能相關的資訊。它是 High Resolution Time API 的一部分，同時也融合了 Performance Timeline API、Navigation Timing API、 User Timing API 和 Resource Timing API。該類型的對象可以通過調用隻讀屬性 Window.performance 來獲得。

我們可以在控制台的console面闆中通過window.performance來擷取網站的各項名額資訊，結果如下：

如圖所示，performance包括了五個屬性，其中timing是需要重點關注的，timing是一個map資料結構，其中key值是性能優化名額，value值是對應的時間戳。其中這些時間戳與頁面整個加載過程中的關鍵節點是有着一一對應的關系，這裡通過谷歌開發者網站的一張圖來說明：

從圖中可以看到很多名額都是成對出現，直接作差就可以求出對應頁面加載過程中關鍵節點的時間，這裡介紹幾個比較常用的，比如：

const timingInfo = window.performance.timing; 

// TCP連接配接耗時
timingInfo.connectEnd - timingInfo.connectStart

// DNS查詢耗時
timingInfo.domainLookupEnd - timingInfo.domainLookupStart;

// 獲得首位元組耗費時間，也叫TTFB
timingInfo.responseStart - timingInfo.navigationStart

// domReady時間(與前面提到的DomContentLoad事件對應)
timingInfo.domContentLoadedEventStart - timingInfo.navigationStart

// DOM資源下載下傳
timingInfo.responseEnd - timingInfo.responseStart      

上述幾個就是比較常用的名額，這些名額也可以在Chrome浏覽器的network面闆中的Timing下擷取，如圖：

2. 性能資料收集工具

有了性能監控名額，我們需要使用一些工具來收集監控到的資料，通常有如下方法。

（1）chrome dev Tools

我們經常使用 Chrome Dev Tools 來開發調試，還可以利用它來分析頁面性能。後面第三部分詳細介紹其使用方法。

（2）Lighthouse

Lighthouse是一個開源的自動化工具，用于改進網絡應用的品質。可以安裝為 Chrome 的擴充插件，也可以指令行直接運作。隻要為 Lighthouse 提供一個需要審 查的網址，它将針對此頁面運作一連串的測試，然後生成一個有關頁面性能的報告。

優點：

• 評分報告全面且具有一定的權威性
• 提供解決方案
• 發現大的性能問題

缺點：

• 測試環境較單一，使用者群體的環境各有不同，不可以一概之
• 存在波動，不同時刻的訪客群體存在差異，資料隻能反應目前時刻的效果**

（3）第三方收費方案

• NewRelic
• 阿裡雲ARMS

（4）自研性能監控系統

在目标頁面注入腳本，在約定的時機收集性能名額資料，統一上報資料中心， 資料中心集中整合生成報表，再根據報表分析性能。

優點：

• 資料全面，可采集到所有使用者各個環境下的性能，生成直覺的分布圖
• 資料真實，來源于真實使用者 3.回報及時，優化後效果可及時地在報表上回報出來

缺點：

• 依賴較多，資料中心和腳本都需要自主開發，相對成本較高

所謂監控，實際上就是性能真實跟蹤，雖然依賴較多，但對性能名額的回報最為真實有效。

3. 利用performance面闆做性能分析

Chrome 開發者工具（簡稱 DevTools）是一組網頁制作和調試的工具，内嵌于 Google Chrome 浏覽器中。可以在浏覽器視窗的右上方選擇 Chrome 菜單，然後選擇“更多工具–> 開發者工具”來打開 Chrome 開發者工具。這裡對Chrome開發者工具做過多介紹，詳細介紹見文章：​​《Chrome DevTools開發者工具調試指南》​​。這裡主要用到的是開發者工具中的performance面闆。這個面闆就是性能面闆，主要作用就是檢視網頁的細節，細粒度對網頁載入進行性能優化。

首先，打開Chrome開發者工具，切換到performance面闆，如下圖所示：

可以看到上圖中performance面闆内正中間告訴我們如何開始使用這個面闆了，點選最左側的黑色圓就可以開始一個新的監測記錄，也可以點選重新整理按鈕記錄整個重新整理過程中的監測記錄。右側如果勾選了Screenshots，就可以記錄整個監測過程中每一幀的截圖。如果勾選了Memory，就可以看到記憶體的詳細使用情況以及垃圾回收的周期，也可以觀察到記憶體有無洩漏的情況。

點選最右側的小齒輪，可以看到一些配置項，打開CPU的節流開關，可以模拟移動端項目。打開Network的節流開關，我們可以模拟弱網(2g/3g)條件下網站的一些表現情況，然後根據弱網的具體表現進行相關優化。

接下來，打開performance面闆之後，然後點選重新整理按鈕，就可以看到網站首頁加載過程中的性能表現：

首先是最上面的總覽區域，這上面可以直覺地看到頁面的整個加載過程，有4個關鍵的名額：

• FPS：這個名額是衡量動畫是否流暢的一個重要名額。可以看到圖中的綠色柱狀圖很高，這就代表FPS幀率很高，體驗也就越流暢，如果FPS幀率較低，那麼圖中則會是紅色的橫條，表明幀率較低，影響使用者體驗，這裡圖中并沒有出現紅色，說明網頁的整個體驗還是非常流暢的。這裡特别說明一下不管是遊戲還是網頁，都是幀率越高，體驗越好。
• CPU：CPU自然就是展示CPU的使用情況。這個名額和下面的Sumarry名額是一一對應，而且這裡它們的顔色所代表含義也是相同的，每個顔色代表各個過程所耗費的時間。從圖中可以看到，整個加載過程中，白色部分(ldle)占比是最大的，這裡代表的是空閑性能，第二大占比的橙色對應的是腳本加載時間，是以要想更快可以試着從加快腳本加載速度方面去優化。
• NET：這個是展示各個請求所花費的具體時間，這裡看不太清，可以直接去 Network 面闆當中去具體觀察各個請求所花費的時間，然後針對具體的請求具體分析。
• HEAP：這裡展示的是請求過程中記憶體的使用情況，這個名額對性能優化幫助不大。

總覽區域的下面是Frame，這個展示的是整個加載時間段的幀率展示。将滑鼠移動上去可以看到各個時間段的幀率，在加載過程中也可以使用快捷鍵command + shift + p打開可以實時展示幀率的面闆。接着把面闆往上拉，可以看到非常重要的一個名額Main，它代表主線程，如下圖：

圖中各種顔色的矩形代表加載過程中做的所有工作。橫軸代表時間，縱軸代表具體的調用堆棧。調用堆棧就像是浏覽器當中的解釋器，可以利用它追蹤函數的執行流。當浏覽器中調用了多個函數，通過這種機制可以追蹤到哪個函數正在執行，具體函數體中又調用了哪個函數。這裡随便點選一個矩形，如下圖：

點選之後看到這個事件下對應的一些具體資訊，這裡還可以點選Range右側連結，點選之後會直接跳到sources面闆對應的代碼位置，這個功能可以說大大友善了定位具體的代碼，如下圖：

最下面的區域分為4個tab，Summary與統計總覽區域面闆CPU相對應，Bottom-Up則是代表調用堆棧的前後調用關系，Call Tree是調用樹，最後的Event Log則是事件日志。這個區域用到的情況不多，更多的是輔助作用。

4. 利用LightHouse面闆做性能分析

在新版的Chrome浏覽器中，将LightHouse內建在了開發者工具中，我們可以直接打開控制台，切換到LightHouse面闆，如圖所示：

點選中間的Generate report按鈕就可以開始自動分析，LightHouse就會自動幫我們生成性能優化報告，如下圖：

可以看到報告詳細給出了各種情況下的分數情況，從左到右分别是Performance(頁面性能)、Accessibility(可訪性)、Best Practise(最佳實踐)、SEO(搜尋引擎優化)、Progressive Web App(漸進式應用)。點選其中的每一項都可以看到給出的具體優化建議，這裡以Performance為例，如下圖：

從上圖可以看出，圖檔是可以優化的主要項，這也充分說明了圖檔是性能優化當中的重頭戲，這裡以第一項為例，點選展開可看到，如下圖：