[TOC] # 基本屬性  ## performance.navigation: 頁面是加載還是刷新、發生了多少次重定向 ~~~ navigation: PerformanceNavigation redirectCount: 0 type: 0 ~~~ ## performance.timing  <br> ### 階段 #### 瀏覽器 * Prompt for unload：提示卸載，即敲下回車瞬間，新頁面要被請求時，把舊頁面卸載 * redirect：重定向，開始處理URL，判斷是否本地重定向 * unload：重定向過程中執行，卸載上一個頁面，清除內存和屏幕上的內容 * App cache：本地緩存，如果本地中有所需的文件，直接跳到Processing階段 <br> #### 網絡 * DNS：找到服務器IP，是一個瓶頸，但取決于用戶在機器上設置的DNS IP地址 * TCP：建立TCP連接，三次握手 * Request：發送請求 <br> #### 服務器處理 * Response：返回響應 <br> #### 瀏覽器 * Processing：DOM處理 * onLoad：第一個事件觸發 <br> ### 屬性 navigationStart：加載起始時間 <br> redirectStart：本地重定向開始時間 unloadEventStart：unload事件觸發的時間 unloadEventEnd：unload事件執行完的時間 redirectEnd：本地重定向結束時間 <br> fetchStart：瀏覽器發起資源請求時，如果有緩存，則返回讀取緩存的開始時間 <br> domainLookupStart：查詢DNS的開始時間。如果請求沒有發起DNS請求，如keep-alive，緩存等，則返回fetchStart domainLookupEnd：查詢DNS的結束時間。如果沒有發起DNS請求，同上 <br> connectStart：開始建立TCP請求的時間。如果請求是keep-alive，緩存等，則返回domainLookupEnd (secureConnectionStart)：如果在進行TLS或SSL，則返回握手時間 connectEnd：完成TCP鏈接的時間。如果是keep-alive，緩存等，同connectStart <br> requestStart：請求開始時間 responseStart：響應開始時間 responseEnd：響應結束時間 <br> domLoading：把文本解析為DOM結構 domInteractive：當頁面DOM樹創建完成后，加載內嵌的資源（圖片、css、js） domContentLoaded：表示 DOM 與 CSSOM 皆已準備就緒 如果沒有解析器阻塞 JavaScript，DOMContentLoaded 事件會在 domInteractive 之后立即觸發 很多 JavaScript 框架會在執行它們自己的邏輯前等待這個事件的觸發 domComplete：表示所有的處理都已完成并且所有的附屬資源都已經下載完畢 <br> ### 簡單用法 這些參數已經非常詳細，也很精準，稍作處理就可以得出我們需要的一些關鍵數字，如： * DNS解析時間： domainLookupEnd - domainLookupStart * TCP建立連接時間： connectEnd - connectStart * **白屏時間**： responseStart - navigationStart * dom渲染完成時間： domContentLoadedEventEnd - navigationStart * 頁面onload時間： loadEventEnd - navigationStart <br> <br> ## performance.memory 基本內存使用情況，Chrome 添加的一個非標準擴展 ## performance.timeorigin 性能測量開始時的時間的高精度時間戳 <br> <br> # 提供的 API performance 也提供了多種 API，不同的 API 之間可能會有重疊的部分。 ## PerformanceObserver API 用于檢測性能的事件，這個 API 利用了觀察者模式。 獲取資源信息 [](https://tva1.sinaimg.cn/large/006tNbRwgy1gah5dyhhrtj31g40liq6s.jpg) <br> 監測 長任務 [](https://tva1.sinaimg.cn/large/006tNbRwgy1gah5f4cbcsj30uo0dk76r.jpg) ## Navigation Timing API [https://www.w3.org/TR/navigation-timing-2/](https://www.w3.org/TR/navigation-timing-2/) performance.getEntriesByType("navigation"); <br> [](https://tva1.sinaimg.cn/large/006tNbRwgy1gah5foxbyej30u011ath3.jpg) <br> [](https://tva1.sinaimg.cn/large/006tNbRwgy1gah5g41v1jj318o0dugnt.jpg) <br> 不同階段之間是連續的嗎? —— 不連續 每個階段都一定會發生嗎？—— 不一定 <br> <br> 重定向次數：performance.navigation.redirectCount 重定向耗時: redirectEnd - redirectStart DNS 解析耗時: domainLookupEnd - domainLookupStart TCP 連接耗時: connectEnd - connectStart SSL 安全連接耗時: connectEnd - secureConnectionStart 網絡請求耗時 (TTFB): responseStart - requestStart 數據傳輸耗時: responseEnd - responseStart DOM 解析耗時: domInteractive - responseEnd 資源加載耗時: loadEventStart - domContentLoadedEventEnd 首包時間: responseStart - domainLookupStart 白屏時間: responseEnd - fetchStart 首次可交互時間: domInteractive - fetchStart DOM Ready 時間: domContentLoadEventEnd - fetchStart 頁面完全加載時間: loadEventStart - fetchStart http 頭部大小： transferSize - encodedBodySize <br> ## Resource Timing API [https://w3c.github.io/resource-timing/](https://w3c.github.io/resource-timing/) performance.getEntriesByType("resource"); [](https://tva1.sinaimg.cn/large/006tNbRwgy1gah5gxga20j31as0u01kx.jpg) [](https://tva1.sinaimg.cn/large/006tNbRwgy1gah5h63g05j31c60le0w9.jpg) ~~~ // 某類資源的加載時間，可測量圖片、js、css、XHR resourceListEntries.forEach(resource => { if (resource.initiatorType == 'img') { console.info(`Time taken to load ${resource.name}: `, resource.responseEnd - resource.startTime); } }); ~~~ 這個數據和 chrome 調式工具里 network 的瀑布圖數據是一樣的。 <br> ## paint Timing API [https://w3c.github.io/paint-timing/](https://w3c.github.io/paint-timing/) 首屏渲染時間、首次有內容渲染時間 [](https://tva1.sinaimg.cn/large/006tNbRwgy1gah5inwonkj30rq0g4acu.jpg) <br> ## User Timing API [https://www.w3.org/TR/user-timing-2/#introduction](https://www.w3.org/TR/user-timing-2/#introduction) 主要是利用 mark 和 measure 方法去打點計算某個階段的耗時，例如某個函數的耗時等。 <br> ## High Resolution Time API [https://w3c.github.io/hr-time/#dom-performance-timeorigin](https://w3c.github.io/hr-time/#dom-performance-timeorigin) 主要包括 now() 方法和 timeOrigin 屬性。 <br> ## Performance Timeline API [https://www.w3.org/TR/performance-timeline-2/#introduction](https://www.w3.org/TR/performance-timeline-2/#introduction) <br> <br> # 參考資料 * [如何進行 web 性能監控？](http://www.alloyteam.com/2020/01/14184/#prettyPhoto) * [Navigation Timing獲取頁面加載各個階段所需時間](https://segmentfault.com/a/1190000010209584) * [Navigation Timing](https://www.w3.org/TR/navigation-timing/#dom-performancetiming-dominteractive)