前端性能監控window.performance的巧妙寫法

performance常規用法

相信不少人都在使用window.performance來監控頁面的性能。都會在頁面onload後，去獲取window.performance.timing

但若是真正分析過數據的人，都會發現window.performance.timing.loadEventEnd有些時候在onload時間觸發後
仍是爲0

這時候可能有些人會延遲再從新獲取一次

這裏帶來另一種思路實現

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
                };

用了一個定時器去判斷timing.loadEventEnd不等於0的時候纔去上報。

這樣的寫法有兩個好處
1 沒必要侷限於onload方法了，能夠在任什麼時候候執行
2 保證loadEventEnd不爲0，避免髒數據

好處多多...是否是要改進下上報的寫法呢。