上報相關performance對象初略介紹

概述

最近在作一個上報相關的需求，該需求指定上班的內容中包含頁面記載的事件、請求花費的事件、以及DOM渲染所要完成的時間等。
爲此查閱了大量的文檔，收集了不少資料，因此趁熱打鐵，把本身所瞭解的記錄下來，方便之後查詢。

performance對象介紹

瀏覽器暴露給js的一個接口，能夠經過這個接口查看用戶訪問網站的鏈接創建時間、dns時間等信息。使用該api時須要在頁面徹底加載完成以後才能使用，最簡單的辦法是在window.onload事件中讀取各類數據，由於不少值必須在頁面徹底加載以後才能得出。

瀏覽器支持狀況

IE9和chrome6以上的版本都支持：

pc端

1. window.performance : ie9
2. window.webkitPerformance : chrome6-9
3. window.performance : chrome10+

移動端

1. android4.0

performance是ECMAScript5中新增的一個特性，對於該特性，所支持的瀏覽器並很少。

屬性和方法

屬性

• performance.timing ：performance對象的timing屬性指向一個對象，它包含了各類與瀏覽器性能有關的時間數據，提供瀏覽器處理網頁各個階段的耗時，這也是本文介紹的重點。
• performance.navigation ：網頁導航的相關對象。
• performance.memory ：瀏覽器內存狀況相關對象。

方法

• performance.getEntries ：瀏覽器獲取網頁時，會對網頁中每個對象（腳本文件、樣式表、圖片文件等等）發出一個HTTP請求。
• performance.mark：mark方法用於爲相應的視點作標記。
• performance.now：performance.now方法返回當前網頁自從performance.timing.navigationStart到當前時間之間的微秒數（毫秒的千分之一）

上報相關內容

上報相關的內容，大部分在performance.timing裏面，performance.timing中包含的屬性有：

• navigationStart：準備加載新頁面的起始時間
• redirectStart：若是發生了HTTP重定向，而且從導航開始，中間的每次重定向，都和當前文檔同域的話，就返回開始重定向的timing.fetchStart的值。其餘狀況，則返回0
• redirectEnd：若是發生了HTTP重定向，而且從導航開始，中間的每次重定向，都和當前文檔同域的話，就返回最後一次重定向，接收到最後一個字節數據後的那個時間.其餘狀況則返回0
• fetchStart：若是一個新的資源獲取被髮起，則 fetchStart必須返回用戶代理開始檢查其相關緩存的那個時間，其餘狀況則返回開始獲取該資源的時間
• domainLookupStart：返回用戶代理對當前文檔所屬域進行DNS查詢開始的時間。若是此請求沒有DNS查詢過程，如長鏈接，資源cache,甚至是本地資源等。 那麼就返回 fetchStart的值
• domainLookupEnd：返回用戶代理對結束對當前文檔所屬域進行DNS查詢的時間。若是此請求沒有DNS查詢過程，如長鏈接，資源cache，甚至是本地資源等。那麼就返回 fetchStart的值
• connectStart：返回用戶代理向服務器服務器請求文檔，開始創建鏈接的那個時間，若是此鏈接是一個長鏈接，又或者直接從緩存中獲取資源（即沒有與服務器創建鏈接）。則返回domainLookupEnd的值
  -(secureConnectionStart)：可選特性。用戶代理若是沒有對應的東東，就要把這個設置爲undefined。若是有這個東東，而且是HTTPS協議，那麼就要返回開始SSL握手的那個時間。 若是不是HTTPS， 那麼就返回0
• connectEnd：返回用戶代理向服務器服務器請求文檔，創建鏈接成功後的那個時間，若是此鏈接是一個長鏈接，又或者直接從緩存中獲取資源（即沒有與服務器創建鏈接）。則返回domainLookupEnd的值
• requestStart：返回從服務器、緩存、本地資源等，開始請求文檔的時間
• responseStart：返回用戶代理從服務器、緩存、本地資源中，接收到第一個字節數據的時間
• responseEnd：返回用戶代理接收到最後一個字符的時間，和當前鏈接被關閉的時間中，更早的那個。一樣，文檔可能來自服務器、緩存、或本地資源
• domLoading：返回用戶代理把其文檔的 "current document readiness" 設置爲 "loading"的時候
• domInteractive：返回用戶代理把其文檔的 "current document readiness" 設置爲 "interactive"的時候.
• domContentLoadedEventStart：返回文檔發生 DOMContentLoaded事件的時間
• domContentLoadedEventEnd：文檔的DOMContentLoaded 事件的結束時間
• domComplete：返回用戶代理把其文檔的 "current document readiness" 設置爲 "complete"的時候
• loadEventStart：文檔觸發load事件的時間。若是load事件沒有觸發，那麼該接口就返回0
• loadEventEnd：文檔觸發load事件結束後的時間。若是load事件沒有觸發，那麼該接口就返回0

上報的內容

上報的內容是經過上面的performance.timing各個屬性的差值組成的，經常使用的有：

• DNS查詢耗時 ：domainLookupEnd - domainLookupStart
• TCP連接耗時 ：connectEnd - connectStart
• request請求耗時 ：responseEnd - responseStart
• 解析dom樹耗時 ： domComplete - domInteractive
• 白屏時間 ：responseStart - navigationStart
• domready時間 ：domContentLoadedEventEnd - navigationStart
• onload時間 ：loadEventEnd - navigationStart

幫助文檔

performance對象：高精度時間戳

window.performance 詳解

使用簡潔的 Navigation Timing API 測試網頁加載速度（不徹底譯文）

Chrome Developer Tools之網絡監控與調優

關鍵字搜索：performance.timing 、performance 上報