瀏覽器瀏覽器是多進程的，js是單線程的。進程：程序運行，資源分配。

線程：進程中獨立執行的流

瀏覽器有哪些進程Browser進程： 瀏覽器的主進程(負責協調、主控)

GPU進程： 最多一個，用于3D繪制等

瀏覽器渲染進程：默認每個Tab頁面一個進程，互不影響

第三方插件進程：每種類型的插件對應一個進程，僅當使用該插件時才創建

注：在瀏覽器中打開一個網頁相當于新起了一個進程(進程內有自己的多線程)瀏覽器內核(渲染進程)是多線程的

GUI渲染線程與JS引擎線程互斥：由于JavaScript是可操縱DOM的，如果在修改這些元素屬性同時渲染界面(即JS線程和UI線程同時運行)，那么渲染線程前后獲得的元素數據就可能不一致了。

Chrome Performance 工具

performance

performance面板有如下四個窗格：

1、controls。開始記錄，停止記錄和配置記錄期間捕獲的信息

2、overview。頁面性能的高級匯總(W、A、S 和 D 鍵調整您的選擇。 W 和 S 分別代表放大和縮小。 A 和 D 分別代表左移和右移)

3、火焰圖。 CPU 堆疊追蹤的可視化

4、統計匯總。以圖表的形式匯總數據

Redering

小功能：查看合成層、顯示實時FPS面板

Layer

合成層細節和原因

window.performance

前端性能監控和報警

?memory?字段代表JavaScript對內存的占用。chrome拓展對象

?navigation?字段統計的是一些網頁導航相關的數據：?redirectCount?:重定向的數量(只讀)，但是這個接口有同源策略限制，即僅能檢測同源的重定向；

type 返回值應該是0,1,2 中的一個。分別對應三個枚舉值:0 : TYPE_NAVIGATE (用戶通過常規導航方式訪問頁面，比如點一個鏈接，或者一般的get方式)

1 : TYPE_RELOAD (用戶通過刷新，包括JS調用刷新接口等方式訪問頁面)

2 : TYPE_BACK_FORWARD (用戶通過后退按鈕訪問本頁面)

最重要的是?timing?字段的統計數據，它包含了網絡、解析等一系列的時間數據。startTime?：有些瀏覽器實現為?baidu.com，在地址欄輸入google.com并回車，瀏覽器的執行動作依次為：unload當前文檔(即baidu.com)->請求下一文檔(即google.com)。

如果當前文檔為空，則navigationStart的值等于fetchStart。

?redirectStart?和?redirectEnd?：如果頁面是由redirect而來，則redirectStart和redirectEnd分別代表redirect開始和結束的時間節點；

?unloadEventStart?和?unloadEventEnd?：如果前一個文檔和請求的文檔是同一個域的，則?unloadEventStart?和?unloadEventEnd?分別代表瀏覽器unload前一個文檔的開始和結束時間節點。否則兩者都等于0；

?fetchStart?是指在瀏覽器發起任何請求之前的時間值。在fetchStart和?domainLookupStart?之間，瀏覽器會檢查當前文檔的緩存；

?domainLookupStart?和?domainLookupEnd?分別代表DNS查詢的開始和結束時間節點。如果瀏覽器沒有進行DNS查詢(比如使用了cache)，則兩者的值都等于?fetchStart?；

?connectStart?和?connectEnd?分別代表TCP建立連接和連接成功的時間節點。如果瀏覽器沒有進行TCP連接(比如使用持久化連接webscoket)，則兩者都等于?domainLookupEnd?；

?secureConnectionStart?：可選。如果頁面使用HTTPS，它的值是安全連接握手之前的時刻。如果該屬性不可用，則返回undefined。如果該屬性可用，但沒有使用HTTPS，則返回0；

?requestStart?代表瀏覽器發起請求的時間節點，請求的方式可以是請求服務器、緩存、本地資源等；

?responseStart?和?responseEnd?分別代表瀏覽器收到從服務器端(或緩存、本地資源)響應回的第一個字節和最后一個字節數據的時刻；

?domLoading?代表瀏覽器開始解析html文檔的時間節點。我們知道IE瀏覽器下的document有?readyState?屬性，?domLoading?的值就等于?readyState?改變為?loading?的時間節點；

?domInteractive?代表瀏覽器解析html文檔的狀態為?interactive?時的時間節點。?domInteractive?并非DOMReady，它早于DOMReady觸發，代表html文檔解析完畢(即dom tree創建完成)但是內嵌資源(比如外鏈css、js等)還未加載的時間點；

?domContentLoadedEventStart?：代表?DOMContentLoaded?事件觸發的時間節點：頁面文檔完全加載并解析完畢之后,會觸發DOMContentLoaded事件，HTML文檔不會等待樣式文件,圖片文件,子框架頁面的加載. document.ready

?domContentLoadedEventEnd?：代表?DOMContentLoaded?事件完成的時間節點，此刻用戶可以對頁面進行操作，也就是jQuery中的domready時間；

?domComplete?：html文檔解析完成、網頁內資源準備就緒；

?loadEventStart?和?loadEventEnd?分別代表onload事件觸發和結束的時間節點

獲取時間獲取精度更高的時間瀏覽器使用 performance.now() 可以獲取到performance.timing.navigationStart 到當前時間之間的微秒數

Node.js 使用 process.hrtime 返回一個數組，其中第一個元素的時間以秒為單位，第二個元素為剩余的納秒獲取首屏時間

H5 如果頁面首屏有圖片：

首屏時間 = 首屏圖片全部加載完畢的時刻 - performance.timing.navigationStart

如果頁面首屏沒有圖片：

首屏時間 = performance.timing.domContentLoadedEventStart-performance.timing.navigationStart

1. DNS 查詢耗時

?domainLookupEnd - domainLookupStart?，如果使用了 DNS 緩存或采用了持久連接，值為 0

2. TCP鏈接耗時

?connectEnd - connectStart?，如果采用了持久連接，值為 0

3. request請求耗時

?responseStart - fetchStart?，這個指標可以反映出網絡和后端處理的整體耗時

4、解析dom樹耗時

= domComplete - domInteractive

5. 白屏時間

白屏時間指頁面展示出第一個元素的時間，主要通過看到是 DOM 解析完成的時間，?domInteractive - fetchStart?

6. 首屏時間(onload時間)

?首屏時間指第一屏頁面完全展示完畢的時間，loadEventStart - fetchStart?

更多表現計算可參考vconsole源碼：https://github.com/Tencent/vConsole?github.com

MDN

監控統計有哪些需求？

日志定義

參考

大會演講PPT合集?ppt.geekbang.org大會演講PPT合集?ppt.geekbang.org螞蟻金服如何把前端性能監控做到極致?-InfoQ?www.infoq.cn美團性能分析框架和性能監控平臺?tech.meituan.com7 天打造前端性能監控系統 - FEX?fex.baidu.com前端數據之美 -- 基礎篇 - FEX?fex.baidu.comhttps://speakerd.s3.amazonaws.com/presentations/dcc10ff09b7a013185554adba30e7edb/%E7%99%BE%E5%BA%A6%E5%89%8D%E7%AB%AF%E5%9F%BA%E7%A1%80%E6%95%B0%E6%8D%AE%E5%B9%B3%E5%8F%B0%E4%BB%8B%E7%BB%8D.pdf?speakerd.s3.amazonaws.comSPA頁面上報_前端監控特殊使用場景_前端監控_應用實時監控服務 ARMS-阿里云?help.aliyun.comhttp://docs-aliyun.cn-hangzhou.oss.aliyun-inc.com/pdf/arms-arms-retcode-cn-zh-2018-01-23.pdf?docs-aliyun.cn-hangzhou.oss.aliyun-inc.com監控平臺前端SDK開發實踐?juejin.im

webkit技術內幕Performance - 前端性能監控利器?www.cnblogs.comNavigation Timing獲取頁面加載各個階段所需時間?www.jianshu.comhttps://web.dev/rail/?web.dev18 Tips for Website Performance Optimization - KeyCDN?www.keycdn.comLife of a pixel?docs.google.comResource Hints - What is Preload, Prefetch, and Preconnect? - KeyCDN?www.keycdn.comhttps://developers.google.com/web/tools/chrome-devtools/?developers.google.com

總結

以上是生活随笔為你收集整理的perform指标分析_performace 监控统计的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。