前端性能監(jiān)控window.performance的巧妙寫法

shleyZ 發(fā)布于2019-08-20 19:01 / 1497人閱讀

摘要：常規(guī)用法相信很多人都在使用來監(jiān)控頁面的性能。這樣的寫法有兩個(gè)好處不必局限于方法了，可以在任何時(shí)候執(zhí)行保證不為，避免臟數(shù)據(jù)好處多多是不是要改進(jìn)下上報(bào)的寫法呢。

performance常規(guī)用法

相信很多人都在使用window.performance來監(jiān)控頁面的性能。都會(huì)在頁面onload后，去獲取window.performance.timing

但如果真正分析過數(shù)據(jù)的人，都會(huì)發(fā)現(xiàn)window.performance.timing.loadEventEnd有些時(shí)候在onload時(shí)間觸發(fā)后
還是為0

這時(shí)候可能有些人會(huì)延遲再重新獲取一次

這里帶來另外一種思路實(shí)現(xiàn)

performance萬無一失的用法

(function(){
    if (window.performance || window.webkitPerformance) {
        var perf = window.performance || window.webkitPerformance;
        var timing = perf.timing;
        var navi = perf.navigation;
        var timer = setInterval(function() {
            if (0 !== timing.loadEventEnd) {
                clearInterval(timer);
                var data = {
                    url: window.location.href,
                    ua: window.navigator.userAgent,
                    dns :timing.domainLookupEnd - timing.domainLookupStart,
                    tcp :timing.connectEnd - timing.connectStart,
                    request : timing.responseEnd -timing.responseStart,
                    blank : timing.domLoading - timing.fetchStart,
                    domready : timing.domContentLoadedEventEnd - timing.fetchStart,
                    onload : timing.loadEventEnd - timing.fetchStart,
                    firstimagetime : 0,
                    isdirty : 0
                };

用了一個(gè)定時(shí)器去判斷timing.loadEventEnd不等于0的時(shí)候才去上報(bào)。

這樣的寫法有兩個(gè)好處
1 不必局限于onload方法了，可以在任何時(shí)候執(zhí)行
2 保證loadEventEnd不為0，避免臟數(shù)據(jù)

好處多多...是不是要改進(jìn)下上報(bào)的寫法呢。

云服務(wù)器 GPU云服務(wù)器監(jiān)控服務(wù)器的性能一段巧妙的css 應(yīng)用系統(tǒng)的性能監(jiān)控有哪幾類前端性能

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/85028.html

相關(guān)文章

前端質(zhì)量監(jiān)控之頁面性能相關(guān)

摘要：前言最近有幸參與一個(gè)前端質(zhì)量監(jiān)控類項(xiàng)目的重構(gòu)，算是個(gè)人初次接觸到前端質(zhì)量監(jiān)控相關(guān)的知識(shí)，對(duì)于其中的性能統(tǒng)計(jì)部分很感興趣，查詢資料之后寫了文章，作為個(gè)人學(xué)習(xí)記錄，如有錯(cuò)誤，敬請(qǐng)斧正頁面整體性能通過瀏覽器提供的方法，我們能夠得到網(wǎng)頁每個(gè)處理階段前言最近有幸參與一個(gè)前端質(zhì)量監(jiān)控類項(xiàng)目的重構(gòu)，算是個(gè)人初次接觸到前端質(zhì)量監(jiān)控相關(guān)的知識(shí)，對(duì)于其中的性能統(tǒng)計(jì)部分很感興趣，查詢資料之后寫了文章，作...

Shihira 2019-08-23 12:56 評(píng)論0 收藏0
在單頁應(yīng)用中，如何優(yōu)雅的上報(bào)前端性能數(shù)據(jù)

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

KitorinZero 2019-08-30 15:55 評(píng)論0 收藏0
在單頁應(yīng)用中，如何優(yōu)雅的上報(bào)前端性能數(shù)據(jù)

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

curried 2019-08-02 14:07 評(píng)論0 收藏0
在單頁應(yīng)用中，如何優(yōu)雅的上報(bào)前端性能數(shù)據(jù)

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

beanlam 2019-08-23 14:41 評(píng)論0 收藏0