[TOC] # 官方指引 https://web.dev/ # 監控指標   <br> <br> 首先我們需要知道應該監控些什么呢？有哪些具體的指標？ google 開發者提出了一種 RAIL 模型來衡量應用性能，即：Response、Animation、Idle、Load，分別代表著 web 應用生命周期的四個不同方面。并指出最好的性能指標是：100ms 內響應用戶輸入；動畫或者滾動需在 10ms 內產生下一幀；最大化空閑時間；頁面加載時長不超過 5 秒。 [](https://tva1.sinaimg.cn/large/006tNbRwgy1gah4zxc779j314w0u07bg.jpg) 我們可轉化為三個方面來看：響應速度、頁面穩定性、外部服務調用 響應速度：頁面初始訪問速度 + 交互響應速度 頁面穩定性：頁面出錯率 外部服務調用：網絡請求訪問速度 ## 頁面訪問速度：白屏、首屏時間、可交互時間 我們來看看 google 開發者針對用戶體驗，提出的幾個性能指標 [](https://tva1.sinaimg.cn/large/006tNbRwgy1gah51k3lg8j31bi0gg45d.jpg) <br> 這幾個指標其實都是根據用戶體驗，提煉出對應的性能指標 [](https://tva1.sinaimg.cn/large/006tNbRwgy1gah52b9pkrj30v00bwabn.jpg) ### first paint (FP) and first contentful paint (FCP) 首次渲染、首次有內容的渲染 這兩個指標瀏覽器已經標準化了，從 performance 的 The Paint Timing API 可以獲取到，一般來說兩個時間相同，但也有情況下兩者不同。 * PerformanceObserver 在頁面html代碼頂部加入以下代碼，訂閱性能事件。 ~~~ const observer = new PerformanceObserver((list) => { for (const entry of list.getEntries()) { const metricName = entry.name; const time = Math.round(entry.startTime + entry.duration); console.log(entry); console.log(metricName + ' : ' + time); } }); observer.observe({entryTypes: ['paint']}); ~~~ 上述代碼的輸出如下：  * performance 下面的代碼也是可以的： ~~~ window.performance.getEntriesByType('paint'); ~~~  <br> <br> ### First meaningful paint （FMP） 首次有效繪制。這是一個很主觀的指標。根據業務的不同，每一個網站的有效內容都是不相同的，有效內容就是網頁中"主角元素"。對于視頻網站而言，主角元素就是視頻。對于搜索引擎而言，主角元素就是搜索框。 <br> google lighthouse 定義的 first meaningful paint： [https://docs.google.com/document/d/1BR94tJdZLsin5poeet0XoTW60M0SjvOJQttKT-JK8HI/view](https://docs.google.com/document/d/1BR94tJdZLsin5poeet0XoTW60M0SjvOJQttKT-JK8HI/view) <br> <br> ### Time to interactive（TTI） 可交互時間。用于標記應用已進行視覺渲染并能可靠響應用戶輸入的時間點。應用可能會因為多種原因而無法響應用戶輸入： ①頁面組件運行所需的JavaScript尚未加載完成。 ②耗時較長的任務阻塞主線程 <br> TTI也是一個較為主觀的指標。瀏覽器并沒有為這個指標提供api。不過google提供了polyfill。下面是使用方法。 在頁面html頂部加入： ~~~ !function(){if('PerformanceLongTaskTiming' in window){var g=window.__tti={e:[]}; g.o=new PerformanceObserver(function(l){g.e=g.e.concat(l.getEntries())}); g.o.observe({entryTypes:['longtask']})}}(); ~~~ install這個polyfill， ~~~ npm install tti-polyfill ~~~ 在業務代碼中引用： ~~~ import ttiPolyfill from 'tti-polyfill'; ... ttiPolyfill.getFirstConsistentlyInteractive().then((tti) => { console.log('tti', tti); }); ... ~~~ > `getFirstConsistentlyInteractive()`方法接受可選的`startTime`配置選項，讓您可以指定下限值（您知道您的應用在此之前無法進行交互）。 默認情況下，該 polyfill 使用 DOMContentLoaded 作為開始時間，但通常情況下，使用主角元素呈現的時刻或您知道所有事件偵聽器都已添加的時間點這類時間會更準確。 <br> <br> ### 長任務 瀏覽器是單線程的，如果長任務過多，那必然會影響著用戶響應時長。好的應用需要最大化空閑時間，以保證能最快響應用戶的輸入。 [](https://tva1.sinaimg.cn/large/006tNbRwgy1gah53416gmj31bg0kgn9i.jpg) ### 頁面穩定性：頁面出錯情況 資源加載錯誤 JS 執行報錯 ### 外部服務調用 CGI 耗時 CGI 成功率 CDN 資源耗時 ## performance API 應用 <br> [performance API詳解](http://www.hmoore.net/surahe/front-end-notebook/1304833) <br> <br> 基于 performance 我們可以測量如下幾個方面： mark、measure、navigation、resource、paint、frame。 <br> ~~~ let p = window.performance.getEntries(); 重定向次數：performance.navigation.redirectCount JS 資源數量：p.filter(ele => ele.initiatorType === "script").length CSS 資源數量：p.filter(ele => ele.initiatorType === "css").length AJAX 請求數量：p.filter(ele => ele.initiatorType === "xmlhttprequest").length IMG 資源數量：p.filter(ele => ele.initiatorType === "img").length 總資源數量: window.performance.getEntriesByType("resource").length ~~~ <br> **不重復的耗時時段區分：** ~~~ 重定向耗時: redirectEnd - redirectStart DNS 解析耗時: domainLookupEnd - domainLookupStart TCP 連接耗時: connectEnd - connectStart SSL 安全連接耗時: connectEnd - secureConnectionStart 網絡請求耗時 (TTFB): responseStart - requestStart HTML 下載耗時：responseEnd - responseStart DOM 解析耗時: domInteractive - responseEnd 資源加載耗時: loadEventStart - domContentLoadedEventEnd ~~~ <br> **其他組合分析：** ~~~ 白屏時間: domLoading - fetchStart 粗略首屏時間: loadEventEnd - fetchStart 或者 domInteractive - fetchStart DOM Ready 時間: domContentLoadEventEnd - fetchStart 頁面完全加載時間: loadEventStart - fetchStart ~~~ <br> **JS 總加載耗時:** ~~~ const p = window.performance.getEntries();let cssR = p.filter(ele =&gt; ele.initiatorType === "script");Math.max(...cssR.map((ele) =&gt; ele.responseEnd)) - Math.min(...cssR.map((ele) =&gt; ele.startTime)); ~~~ <br> **CSS 總加載耗時:** ~~~ const p = window.performance.getEntries();let cssR = p.filter(ele =&gt; ele.initiatorType === "css");Math.max(...cssR.map((ele) =&gt; ele.responseEnd)) - Math.min(...cssR.map((ele) =&gt; ele.startTime)); ~~~ <br> # 如何監控？ 在了解了 performance 之后，我們來看看，具體是如何監控的？ <br> [](https://tva1.sinaimg.cn/large/006tNbRwgy1gah5jbytugj31mq0b2q50.jpg) <br> 總體流程：性能指標收集與數據上報—數據存儲—數據聚合—分析展示—告警、報表推送 <br> 這里主要講述如何收集性能數據。 性能指標收集注意項：1）保證數據的準確性 2）盡量不影響應用的性能 <br> ## 基本性能上報 采集數據：將 performance navagation timing 中的所有點都上報，其余的上報內容可參考 performance 分析一節中截取部分上報。例如：白屏時間，JS 和 CSS 總數，以及加載總時長。 其余可參考的上報：是否有緩存？是否啟用 gzip 壓縮、頁面加載方式。 在收集好性能數據后，即可將數據上報。 那選擇什么時機上報？ google 開發者推薦的上報方式： [](https://tva1.sinaimg.cn/large/006tNbRwgy1gah5jncmspj31fw0lgtct.jpg) <br> ## 首屏時間計算 我們知道首屏時間是一項重要指標，但是又很難從 performance 中拿到，來看下首屏時間計算主要有哪些方式？ [https://web.dev/first-meaningful-paint/](https://web.dev/first-meaningful-paint/) 1）用戶自定義打點—最準確的方式（只有用戶自己最清楚，什么樣的時間才算是首屏加載完成） 2）lighthouse 中使用的是 chrome 渲染過程中記錄的 trace event 3）可利用[Chrome DevTools Protocol](https://chromedevtools.github.io/devtools-protocol/)拿到頁面布局節點數目。思想是：獲取到當頁面具有最大布局變化的時間點 4）aegis 的方法：利用 MutationObserver 接口，監聽 document 對象的節點變化。 檢查這些變化的節點是否顯示在首屏中，若這些節點在首屏中，那當前的時間點即為首屏渲染時間。但是還有首屏內圖片的加載時間需要考慮，遍歷 performance.getEntries() 拿到的所有圖片實體對象，根據圖片的初始加載時間和加載完成時間去更新首屏渲染時間。 5）利用 MutationObserver 接口提供了監視對 DOM 樹所做更改的能力，是 DOM3 Events 規范的一部分。 方法：在首屏內容模塊插入一個 div，利用 Mutation Observer API 監聽該 div 的 dom 事件，判斷該 div 的高度是否大于 0 或者大于指定值，如果大于了，就表示主要內容已經渲染出來，可計算首屏時間。 6）某個專利：在 loading 狀態下循環判斷當前頁面高度是否大于屏幕高度，若大于，則獲取到當前頁面的屏幕圖像，通過逐像素對比來判斷頁面渲染是否已滿屏。[https://patentimages.storage.googleapis.com/bd/83/3d/f65775c31c7120/CN103324521A.pdf](https://patentimages.storage.googleapis.com/bd/83/3d/f65775c31c7120/CN103324521A.pdf) 7) 引入html2canvas，遞歸截圖并計算9個點的顏色紅色通道像素值，前后數據相同,可以上報時間。[如何計算首屏加載時間？](https://www.cnblogs.com/caizhenbo/p/7993533.html) <br> <br> [](https://tva1.sinaimg.cn/large/006tNbRwgy1gah5jysgr5j31et0u0h1a.jpg) <br> ## 異常上報 1）js error 監聽 window.onerror 事件 2）promise reject 的異常 監聽 unhandledrejection 事件 ~~~ window.addEventListener("unhandledrejection", function (event) { console.warn("WARNING: Unhandled promise rejection. Shame on you! Reason: " + event.reason); }); ~~~ 3）資源加載失敗 window.addEventListener('error') 4）網絡請求失敗 重寫 window.XMLHttpRequest 和 window.fetch 捕獲請求錯誤 5）iframe 異常 window.frames\[0\].onerror 6）window.console.error ## CGI 上報 大致原理：攔截 ajax 請求 數據存儲與聚合 一個用戶訪問，可能會上報幾十條數據，每條數據都是多維度的。即：當前訪問時間、平臺、網絡、ip 等。這些一條條的數據都會被存儲到數據庫中，然后通過數據分析與聚合，提煉出有意義的數據。例如：某日所有用戶的平均訪問時長、pv 等。 數據統計分析的方法：平均值統計法、百分位數統計法、樣本分布統計法。 # 參考資料 [如何進行 web 性能監控？](http://www.alloyteam.com/2020/01/14184/#prettyPhoto) [當考慮網頁首屏加速的時候，我們在考慮什么](https://segmentfault.com/a/1190000018990133?utm_medium=referral&utm_source=tuicool) [漫談前端性能優化](https://juejin.im/post/5a4f09eef265da3e3b7a5399) [研究首屏時間？你先要知道這幾點細節](http://www.alloyteam.com/2016/01/points-about-resource-loading/)