資訊專欄INFORMATION COLUMN
摘要：概述最近在做一個(gè)上報(bào)相關(guān)的需求，該需求指定上班的內(nèi)容中包含頁(yè)面記載的事件請(qǐng)求花費(fèi)的事件以及渲染所要完成的時(shí)間等。網(wǎng)頁(yè)導(dǎo)航的相關(guān)對(duì)象。瀏覽器內(nèi)存情況相關(guān)對(duì)象。
概述
最近在做一個(gè)上報(bào)相關(guān)的需求，該需求指定上班的內(nèi)容中包含頁(yè)面記載的事件、請(qǐng)求花費(fèi)的事件、以及DOM渲染所要完成的時(shí)間等。
為此查閱了大量的文檔，收集了很多資料，所以趁熱打鐵，把自己所了解的記錄下來(lái)，方便以后查詢。
瀏覽器暴露給js的一個(gè)接口，可以通過(guò)這個(gè)接口查看用戶訪問(wèn)網(wǎng)站的連接建立時(shí)間、dns時(shí)間等信息。使用該api時(shí)需要在頁(yè)面完全加載完成之后才能使用，最簡(jiǎn)單的辦法是在window.onload事件中讀取各種數(shù)據(jù)，因?yàn)楹芏嘀当仨氃陧?yè)面完全加載之后才能得出。
瀏覽器支持情況IE9和chrome6以上的版本都支持：
pc端
window.performance : ie9
window.webkitPerformance : chrome6-9
window.performance : chrome10+
移動(dòng)端
android4.0
performance是ECMAScript5中新增的一個(gè)特性，對(duì)于該特性，所支持的瀏覽器并不多。
屬性和方法 屬性performance.timing ：performance對(duì)象的timing屬性指向一個(gè)對(duì)象，它包含了各種與瀏覽器性能有關(guān)的時(shí)間數(shù)據(jù)，提供瀏覽器處理網(wǎng)頁(yè)各個(gè)階段的耗時(shí)，這也是本文介紹的重點(diǎn)。
performance.navigation ：網(wǎng)頁(yè)導(dǎo)航的相關(guān)對(duì)象。
performance.memory ：瀏覽器內(nèi)存情況相關(guān)對(duì)象。
方法performance.getEntries ：瀏覽器獲取網(wǎng)頁(yè)時(shí)，會(huì)對(duì)網(wǎng)頁(yè)中每一個(gè)對(duì)象（腳本文件、樣式表、圖片文件等等）發(fā)出一個(gè)HTTP請(qǐng)求。
performance.mark：mark方法用于為相應(yīng)的視點(diǎn)做標(biāo)記。
performance.now：performance.now方法返回當(dāng)前網(wǎng)頁(yè)自從performance.timing.navigationStart到當(dāng)前時(shí)間之間的微秒數(shù)（毫秒的千分之一）
上報(bào)相關(guān)內(nèi)容上報(bào)相關(guān)的內(nèi)容，大部分在performance.timing里面，performance.timing中包含的屬性有：
navigationStart：準(zhǔn)備加載新頁(yè)面的起始時(shí)間
redirectStart：如果發(fā)生了HTTP重定向，并且從導(dǎo)航開(kāi)始，中間的每次重定向，都和當(dāng)前文檔同域的話，就返回開(kāi)始重定向的timing.fetchStart的值。其他情況，則返回0
redirectEnd：如果發(fā)生了HTTP重定向，并且從導(dǎo)航開(kāi)始，中間的每次重定向，都和當(dāng)前文檔同域的話，就返回最后一次重定向，接收到最后一個(gè)字節(jié)數(shù)據(jù)后的那個(gè)時(shí)間.其他情況則返回0
fetchStart：如果一個(gè)新的資源獲取被發(fā)起，則 fetchStart必須返回用戶代理開(kāi)始檢查其相關(guān)緩存的那個(gè)時(shí)間，其他情況則返回開(kāi)始獲取該資源的時(shí)間
domainLookupStart：返回用戶代理對(duì)當(dāng)前文檔所屬域進(jìn)行DNS查詢開(kāi)始的時(shí)間。如果此請(qǐng)求沒(méi)有DNS查詢過(guò)程，如長(zhǎng)連接，資源cache,甚至是本地資源等。 那么就返回 fetchStart的值
domainLookupEnd：返回用戶代理對(duì)結(jié)束對(duì)當(dāng)前文檔所屬域進(jìn)行DNS查詢的時(shí)間。如果此請(qǐng)求沒(méi)有DNS查詢過(guò)程，如長(zhǎng)連接，資源cache，甚至是本地資源等。那么就返回 fetchStart的值
connectStart：返回用戶代理向服務(wù)器服務(wù)器請(qǐng)求文檔，開(kāi)始建立連接的那個(gè)時(shí)間，如果此連接是一個(gè)長(zhǎng)連接，又或者直接從緩存中獲取資源（即沒(méi)有與服務(wù)器建立連接）。則返回domainLookupEnd的值
-(secureConnectionStart)：可選特性。用戶代理如果沒(méi)有對(duì)應(yīng)的東東，就要把這個(gè)設(shè)置為undefined。如果有這個(gè)東東，并且是HTTPS協(xié)議，那么就要返回開(kāi)始SSL握手的那個(gè)時(shí)間。 如果不是HTTPS， 那么就返回0
connectEnd：返回用戶代理向服務(wù)器服務(wù)器請(qǐng)求文檔，建立連接成功后的那個(gè)時(shí)間，如果此連接是一個(gè)長(zhǎng)連接，又或者直接從緩存中獲取資源（即沒(méi)有與服務(wù)器建立連接）。則返回domainLookupEnd的值
requestStart：返回從服務(wù)器、緩存、本地資源等，開(kāi)始請(qǐng)求文檔的時(shí)間
responseStart：返回用戶代理從服務(wù)器、緩存、本地資源中，接收到第一個(gè)字節(jié)數(shù)據(jù)的時(shí)間
responseEnd：返回用戶代理接收到最后一個(gè)字符的時(shí)間，和當(dāng)前連接被關(guān)閉的時(shí)間中，更早的那個(gè)。同樣，文檔可能來(lái)自服務(wù)器、緩存、或本地資源
domLoading：返回用戶代理把其文檔的 "current document readiness" 設(shè)置為 "loading"的時(shí)候
domInteractive：返回用戶代理把其文檔的 "current document readiness" 設(shè)置為 "interactive"的時(shí)候.
domContentLoadedEventStart：返回文檔發(fā)生 DOMContentLoaded事件的時(shí)間
domContentLoadedEventEnd：文檔的DOMContentLoaded 事件的結(jié)束時(shí)間
domComplete：返回用戶代理把其文檔的 "current document readiness" 設(shè)置為 "complete"的時(shí)候
loadEventStart：文檔觸發(fā)load事件的時(shí)間。如果load事件沒(méi)有觸發(fā)，那么該接口就返回0
loadEventEnd：文檔觸發(fā)load事件結(jié)束后的時(shí)間。如果load事件沒(méi)有觸發(fā)，那么該接口就返回0
上報(bào)的內(nèi)容上報(bào)的內(nèi)容是通過(guò)上面的performance.timing各個(gè)屬性的差值組成的，常用的有：
DNS查詢耗時(shí) ：domainLookupEnd - domainLookupStart
TCP鏈接耗時(shí) ：connectEnd - connectStart
request請(qǐng)求耗時(shí) ：responseEnd - responseStart
解析dom樹(shù)耗時(shí) ： domComplete - domInteractive
白屏?xí)r間 ：responseStart - navigationStart
domready時(shí)間 ：domContentLoadedEventEnd - navigationStart
onload時(shí)間 ：loadEventEnd - navigationStart
幫助文檔performance對(duì)象：高精度時(shí)間戳
window.performance 詳解
使用簡(jiǎn)潔的 Navigation Timing API 測(cè)試網(wǎng)頁(yè)加載速度（不完全譯文）
Chrome Developer Tools之網(wǎng)絡(luò)監(jiān)控與調(diào)優(yōu)
關(guān)鍵字搜索：performance.timing 、performance 上報(bào)
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/85449.html
摘要：本文的介紹的是如何設(shè)計(jì)一個(gè)通用的可以以較小的侵入性，自動(dòng)上報(bào)前端的性能數(shù)據(jù)。具體的做法可以看我的上一篇文章在單頁(yè)應(yīng)用中，如何優(yōu)雅的監(jiān)聽(tīng)的變化。三如何上報(bào)性能數(shù)據(jù)那么如何上報(bào)性能數(shù)據(jù)呢，我們第一反應(yīng)就是通過(guò)請(qǐng)求的形式來(lái)上報(bào)前端性能數(shù)據(jù)。 ??最近在做一個(gè)較為通用的前端性能監(jiān)控平臺(tái)，區(qū)別于前端異常監(jiān)控，前端的性能監(jiān)控主要需要上報(bào)和展示的是前端的性能數(shù)據(jù)，包括首頁(yè)渲染時(shí)間、每個(gè)頁(yè)面的白屏?xí)r...
摘要：本文的介紹的是如何設(shè)計(jì)一個(gè)通用的可以以較小的侵入性，自動(dòng)上報(bào)前端的性能數(shù)據(jù)。具體的做法可以看我的上一篇文章在單頁(yè)應(yīng)用中，如何優(yōu)雅的監(jiān)聽(tīng)的變化。三如何上報(bào)性能數(shù)據(jù)那么如何上報(bào)性能數(shù)據(jù)呢，我們第一反應(yīng)就是通過(guò)請(qǐng)求的形式來(lái)上報(bào)前端性能數(shù)據(jù)。 ??最近在做一個(gè)較為通用的前端性能監(jiān)控平臺(tái)，區(qū)別于前端異常監(jiān)控，前端的性能監(jiān)控主要需要上報(bào)和展示的是前端的性能數(shù)據(jù)，包括首頁(yè)渲染時(shí)間、每個(gè)頁(yè)面的白屏?xí)r...
摘要：本文的介紹的是如何設(shè)計(jì)一個(gè)通用的可以以較小的侵入性，自動(dòng)上報(bào)前端的性能數(shù)據(jù)。具體的做法可以看我的上一篇文章在單頁(yè)應(yīng)用中，如何優(yōu)雅的監(jiān)聽(tīng)的變化。三如何上報(bào)性能數(shù)據(jù)那么如何上報(bào)性能數(shù)據(jù)呢，我們第一反應(yīng)就是通過(guò)請(qǐng)求的形式來(lái)上報(bào)前端性能數(shù)據(jù)。 ??最近在做一個(gè)較為通用的前端性能監(jiān)控平臺(tái)，區(qū)別于前端異常監(jiān)控，前端的性能監(jiān)控主要需要上報(bào)和展示的是前端的性能數(shù)據(jù)，包括首頁(yè)渲染時(shí)間、每個(gè)頁(yè)面的白屏?xí)r...
摘要：回過(guò)頭來(lái)發(fā)現(xiàn)，我們的項(xiàng)目，雖然在服務(wù)端層面做好了日志和性能統(tǒng)計(jì)，但在前端對(duì)異常的監(jiān)控和性能的統(tǒng)計(jì)。對(duì)于前端的性能與異常上報(bào)的可行性探索是有必要的。這是我們頁(yè)面加載性能優(yōu)化需求中主要上報(bào)的相關(guān)信息。 概述 對(duì)于后臺(tái)開(kāi)發(fā)來(lái)說(shuō)，記錄日志是一種非常常見(jiàn)的開(kāi)發(fā)習(xí)慣，通常我們會(huì)使用try...catch代碼塊來(lái)主動(dòng)捕獲錯(cuò)誤、對(duì)于每次接口調(diào)用，也會(huì)記錄下每次接口調(diào)用的時(shí)間消耗，以便我們監(jiān)控服務(wù)器接口...
閱讀 1720·2023-04-25 18:19
閱讀 2147·2021-10-26 09:48
閱讀 1207·2021-10-09 09:44
閱讀 1815·2021-09-09 11:35
閱讀 3094·2019-08-30 15:54
閱讀 2130·2019-08-30 11:26
閱讀 2344·2019-08-29 17:06
閱讀 966·2019-08-29 16:38
