資訊專欄INFORMATION COLUMN
摘要：概述最近在做一個上報相關的需求，該需求指定上班的內容中包含頁面記載的事件請求花費的事件以及渲染所要完成的時間等。網頁導航的相關對象。瀏覽器內存情況相關對象。
概述
最近在做一個上報相關的需求，該需求指定上班的內容中包含頁面記載的事件、請求花費的事件、以及DOM渲染所要完成的時間等。
為此查閱了大量的文檔，收集了很多資料，所以趁熱打鐵，把自己所了解的記錄下來，方便以后查詢。
瀏覽器暴露給js的一個接口，可以通過這個接口查看用戶訪問網站的連接建立時間、dns時間等信息。使用該api時需要在頁面完全加載完成之后才能使用，最簡單的辦法是在window.onload事件中讀取各種數據，因為很多值必須在頁面完全加載之后才能得出。
瀏覽器支持情況IE9和chrome6以上的版本都支持：
pc端
window.performance : ie9
window.webkitPerformance : chrome6-9
window.performance : chrome10+
移動端
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 上報
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/85449.html
摘要：本文的介紹的是如何設計一個通用的可以以較小的侵入性，自動上報前端的性能數據。具體的做法可以看我的上一篇文章在單頁應用中，如何優雅的監聽的變化。三如何上報性能數據那么如何上報性能數據呢，我們第一反應就是通過請求的形式來上報前端性能數據。 ??最近在做一個較為通用的前端性能監控平臺，區別于前端異常監控，前端的性能監控主要需要上報和展示的是前端的性能數據，包括首頁渲染時間、每個頁面的白屏時...
摘要：本文的介紹的是如何設計一個通用的可以以較小的侵入性，自動上報前端的性能數據。具體的做法可以看我的上一篇文章在單頁應用中，如何優雅的監聽的變化。三如何上報性能數據那么如何上報性能數據呢，我們第一反應就是通過請求的形式來上報前端性能數據。 ??最近在做一個較為通用的前端性能監控平臺，區別于前端異常監控，前端的性能監控主要需要上報和展示的是前端的性能數據，包括首頁渲染時間、每個頁面的白屏時...
摘要：本文的介紹的是如何設計一個通用的可以以較小的侵入性，自動上報前端的性能數據。具體的做法可以看我的上一篇文章在單頁應用中，如何優雅的監聽的變化。三如何上報性能數據那么如何上報性能數據呢，我們第一反應就是通過請求的形式來上報前端性能數據。 ??最近在做一個較為通用的前端性能監控平臺，區別于前端異常監控，前端的性能監控主要需要上報和展示的是前端的性能數據，包括首頁渲染時間、每個頁面的白屏時...
摘要：回過頭來發現，我們的項目，雖然在服務端層面做好了日志和性能統計，但在前端對異常的監控和性能的統計。對于前端的性能與異常上報的可行性探索是有必要的。這是我們頁面加載性能優化需求中主要上報的相關信息。 概述 對于后臺開發來說，記錄日志是一種非常常見的開發習慣，通常我們會使用try...catch代碼塊來主動捕獲錯誤、對于每次接口調用，也會記錄下每次接口調用的時間消耗，以便我們監控服務器接口...
閱讀 1640·2023-04-25 18:19
閱讀 2084·2021-10-26 09:48
閱讀 1087·2021-10-09 09:44
閱讀 1736·2021-09-09 11:35
閱讀 3031·2019-08-30 15:54
閱讀 2029·2019-08-30 11:26
閱讀 2291·2019-08-29 17:06
閱讀 890·2019-08-29 16:38
