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

資訊專欄INFORMATION COLUMN

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

shleyZ / 1503人閱讀

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

performance常規(guī)用法

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

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

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

這里帶來另外一種思路實(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)的寫法呢。

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

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

相關(guān)文章

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

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

    Shihira 評論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)就是通過請求的形式來上報(bào)前端性能數(shù)據(jù)。 ??最近在做一個(gè)較為通用的前端性能監(jiān)控平臺，區(qū)別于前端異常監(jiān)控，前端的性能監(jiān)控主要需要上報(bào)和展示的是前端的性能數(shù)據(jù)，包括首頁渲染時(shí)間、每個(gè)頁面的白屏?xí)r...

    KitorinZero 評論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)就是通過請求的形式來上報(bào)前端性能數(shù)據(jù)。 ??最近在做一個(gè)較為通用的前端性能監(jiān)控平臺，區(qū)別于前端異常監(jiān)控，前端的性能監(jiān)控主要需要上報(bào)和展示的是前端的性能數(shù)據(jù)，包括首頁渲染時(shí)間、每個(gè)頁面的白屏?xí)r...

    curried 評論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)就是通過請求的形式來上報(bào)前端性能數(shù)據(jù)。 ??最近在做一個(gè)較為通用的前端性能監(jiān)控平臺，區(qū)別于前端異常監(jiān)控，前端的性能監(jiān)控主要需要上報(bào)和展示的是前端的性能數(shù)據(jù)，包括首頁渲染時(shí)間、每個(gè)頁面的白屏?xí)r...

    beanlam 評論0 收藏0

發(fā)表評論

0條評論

最新活動(dòng)
閱讀需要支付1元查看
<