成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

上報相關(guān)performance對象初略介紹

junbaor / 1880人閱讀

摘要：概述最近在做一個上報相關(guān)的需求，該需求指定上班的內(nèi)容中包含頁面記載的事件請求花費的事件以及渲染所要完成的時間等。網(wǎng)頁導(dǎo)航的相關(guān)對象。瀏覽器內(nèi)存情況相關(guān)對象。

概述

最近在做一個上報相關(guān)的需求，該需求指定上班的內(nèi)容中包含頁面記載的事件、請求花費的事件、以及DOM渲染所要完成的時間等。
為此查閱了大量的文檔，收集了很多資料，所以趁熱打鐵，把自己所了解的記錄下來，方便以后查詢。

performance對象介紹

瀏覽器暴露給js的一個接口，可以通過這個接口查看用戶訪問網(wǎng)站的連接建立時間、dns時間等信息。使用該api時需要在頁面完全加載完成之后才能使用，最簡單的辦法是在window.onload事件中讀取各種數(shù)據(jù)，因為很多值必須在頁面完全加載之后才能得出。

瀏覽器支持情況

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

pc端

window.performance : ie9

window.webkitPerformance : chrome6-9

window.performance : chrome10+

移動端

android4.0

performance是ECMAScript5中新增的一個特性，對于該特性，所支持的瀏覽器并不多。

屬性和方法 屬性

performance.timing ：performance對象的timing屬性指向一個對象，它包含了各種與瀏覽器性能有關(guān)的時間數(shù)據(jù)，提供瀏覽器處理網(wǎng)頁各個階段的耗時，這也是本文介紹的重點。

performance.navigation ：網(wǎng)頁導(dǎo)航的相關(guān)對象。

performance.memory ：瀏覽器內(nèi)存情況相關(guān)對象。

方法

performance.getEntries ：瀏覽器獲取網(wǎng)頁時，會對網(wǎng)頁中每一個對象（腳本文件、樣式表、圖片文件等等）發(fā)出一個HTTP請求。

performance.mark：mark方法用于為相應(yīng)的視點做標(biāo)記。

performance.now：performance.now方法返回當(dāng)前網(wǎng)頁自從performance.timing.navigationStart到當(dāng)前時間之間的微秒數(shù)（毫秒的千分之一）

上報相關(guān)內(nèi)容

上報相關(guān)的內(nèi)容，大部分在performance.timing里面，performance.timing中包含的屬性有：

navigationStart：準(zhǔn)備加載新頁面的起始時間

redirectStart：如果發(fā)生了HTTP重定向，并且從導(dǎo)航開始，中間的每次重定向，都和當(dāng)前文檔同域的話，就返回開始重定向的timing.fetchStart的值。其他情況，則返回0

redirectEnd：如果發(fā)生了HTTP重定向，并且從導(dǎo)航開始，中間的每次重定向，都和當(dāng)前文檔同域的話，就返回最后一次重定向，接收到最后一個字節(jié)數(shù)據(jù)后的那個時間.其他情況則返回0

fetchStart：如果一個新的資源獲取被發(fā)起，則 fetchStart必須返回用戶代理開始檢查其相關(guān)緩存的那個時間，其他情況則返回開始獲取該資源的時間

domainLookupStart：返回用戶代理對當(dāng)前文檔所屬域進(jìn)行DNS查詢開始的時間。如果此請求沒有DNS查詢過程，如長連接，資源cache,甚至是本地資源等。 那么就返回 fetchStart的值

domainLookupEnd：返回用戶代理對結(jié)束對當(dāng)前文檔所屬域進(jìn)行DNS查詢的時間。如果此請求沒有DNS查詢過程，如長連接，資源cache，甚至是本地資源等。那么就返回 fetchStart的值

connectStart：返回用戶代理向服務(wù)器服務(wù)器請求文檔，開始建立連接的那個時間，如果此連接是一個長連接，又或者直接從緩存中獲取資源（即沒有與服務(wù)器建立連接）。則返回domainLookupEnd的值
-(secureConnectionStart)：可選特性。用戶代理如果沒有對應(yīng)的東東，就要把這個設(shè)置為undefined。如果有這個東東，并且是HTTPS協(xié)議，那么就要返回開始SSL握手的那個時間。 如果不是HTTPS， 那么就返回0

connectEnd：返回用戶代理向服務(wù)器服務(wù)器請求文檔，建立連接成功后的那個時間，如果此連接是一個長連接，又或者直接從緩存中獲取資源（即沒有與服務(wù)器建立連接）。則返回domainLookupEnd的值

requestStart：返回從服務(wù)器、緩存、本地資源等，開始請求文檔的時間

responseStart：返回用戶代理從服務(wù)器、緩存、本地資源中，接收到第一個字節(jié)數(shù)據(jù)的時間

responseEnd：返回用戶代理接收到最后一個字符的時間，和當(dāng)前連接被關(guān)閉的時間中，更早的那個。同樣，文檔可能來自服務(wù)器、緩存、或本地資源

domLoading：返回用戶代理把其文檔的 "current document readiness" 設(shè)置為 "loading"的時候

domInteractive：返回用戶代理把其文檔的 "current document readiness" 設(shè)置為 "interactive"的時候.

domContentLoadedEventStart：返回文檔發(fā)生 DOMContentLoaded事件的時間

domContentLoadedEventEnd：文檔的DOMContentLoaded 事件的結(jié)束時間

domComplete：返回用戶代理把其文檔的 "current document readiness" 設(shè)置為 "complete"的時候

loadEventStart：文檔觸發(fā)load事件的時間。如果load事件沒有觸發(fā)，那么該接口就返回0

loadEventEnd：文檔觸發(fā)load事件結(jié)束后的時間。如果load事件沒有觸發(fā)，那么該接口就返回0

上報的內(nèi)容

上報的內(nèi)容是通過上面的performance.timing各個屬性的差值組成的，常用的有：

DNS查詢耗時 ：domainLookupEnd - domainLookupStart

TCP鏈接耗時 ：connectEnd - connectStart

request請求耗時 ：responseEnd - responseStart

解析dom樹耗時 ： domComplete - domInteractive

白屏?xí)r間 ：responseStart - navigationStart

domready時間 ：domContentLoadedEventEnd - navigationStart

onload時間 ：loadEventEnd - navigationStart

幫助文檔

performance對象：高精度時間戳

window.performance 詳解

使用簡潔的 Navigation Timing API 測試網(wǎng)頁加載速度（不完全譯文）

Chrome Developer Tools之網(wǎng)絡(luò)監(jiān)控與調(diào)優(yōu)

關(guān)鍵字搜索：performance.timing 、performance 上報

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/85449.html

相關(guān)文章

  • 在單頁應(yīng)用中，如何優(yōu)雅的上報前端性能數(shù)據(jù)

    摘要：本文的介紹的是如何設(shè)計一個通用的可以以較小的侵入性，自動上報前端的性能數(shù)據(jù)。具體的做法可以看我的上一篇文章在單頁應(yīng)用中，如何優(yōu)雅的監(jiān)聽的變化。三如何上報性能數(shù)據(jù)那么如何上報性能數(shù)據(jù)呢，我們第一反應(yīng)就是通過請求的形式來上報前端性能數(shù)據(jù)。 ??最近在做一個較為通用的前端性能監(jiān)控平臺，區(qū)別于前端異常監(jiān)控，前端的性能監(jiān)控主要需要上報和展示的是前端的性能數(shù)據(jù)，包括首頁渲染時間、每個頁面的白屏?xí)r...

    KitorinZero 評論0 收藏0

  • 在單頁應(yīng)用中，如何優(yōu)雅的上報前端性能數(shù)據(jù)

    摘要：本文的介紹的是如何設(shè)計一個通用的可以以較小的侵入性，自動上報前端的性能數(shù)據(jù)。具體的做法可以看我的上一篇文章在單頁應(yīng)用中，如何優(yōu)雅的監(jiān)聽的變化。三如何上報性能數(shù)據(jù)那么如何上報性能數(shù)據(jù)呢，我們第一反應(yīng)就是通過請求的形式來上報前端性能數(shù)據(jù)。 ??最近在做一個較為通用的前端性能監(jiān)控平臺，區(qū)別于前端異常監(jiān)控，前端的性能監(jiān)控主要需要上報和展示的是前端的性能數(shù)據(jù)，包括首頁渲染時間、每個頁面的白屏?xí)r...

    curried 評論0 收藏0

  • 在單頁應(yīng)用中，如何優(yōu)雅的上報前端性能數(shù)據(jù)

    摘要：本文的介紹的是如何設(shè)計一個通用的可以以較小的侵入性，自動上報前端的性能數(shù)據(jù)。具體的做法可以看我的上一篇文章在單頁應(yīng)用中，如何優(yōu)雅的監(jiān)聽的變化。三如何上報性能數(shù)據(jù)那么如何上報性能數(shù)據(jù)呢，我們第一反應(yīng)就是通過請求的形式來上報前端性能數(shù)據(jù)。 ??最近在做一個較為通用的前端性能監(jiān)控平臺，區(qū)別于前端異常監(jiān)控，前端的性能監(jiān)控主要需要上報和展示的是前端的性能數(shù)據(jù)，包括首頁渲染時間、每個頁面的白屏?xí)r...

    beanlam 評論0 收藏0

  • 前端性能與異常上報

    摘要：回過頭來發(fā)現(xiàn)，我們的項目，雖然在服務(wù)端層面做好了日志和性能統(tǒng)計，但在前端對異常的監(jiān)控和性能的統(tǒng)計。對于前端的性能與異常上報的可行性探索是有必要的。這是我們頁面加載性能優(yōu)化需求中主要上報的相關(guān)信息。 概述 對于后臺開發(fā)來說，記錄日志是一種非常常見的開發(fā)習(xí)慣，通常我們會使用try...catch代碼塊來主動捕獲錯誤、對于每次接口調(diào)用，也會記錄下每次接口調(diào)用的時間消耗，以便我們監(jiān)控服務(wù)器接口...

    gggggggbong 評論0 收藏0

發(fā)表評論

0條評論

junbaor

男|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<