性能分析

2019-01-10  本文已影响8人  ITtian
function getTiming() {
        try {
            var time = performance.timing;
            var timingObj = {};

            var loadTime = (time.loadEventEnd - time.loadEventStart) / 1000;

            if(loadTime < 0) {
                setTimeout(function() {
                    getTiming();
                }, 200);
                return;
            }

            timingObj['重定向耗时'] = (time.redirectEnd - time.redirectStart);
            timingObj['DNS解析耗时'] = (time.domainLookupEnd - time.domainLookupStart);
            timingObj['TCP链接耗时'] = (time.connectEnd - time.connectStart);
            timingObj['HTTP请求响应完成耗时'] = (time.responseEnd - time.requestStart);
            timingObj['白屏时间'] = (time.domLoading - time.fetchStart);
            timingObj['DOM结构解析完成耗时'] = (time.domInteractive - time.domLoading);            
            timingObj['DOM开始加载前耗时'] = (time.responseEnd - time.navigationStart);
            timingObj['DOM加载完成耗时'] = (time.domComplete - time.domLoading);
            timingObj['脚本加载耗时'] = (time.domContentLoadedEventEnd - time.domContentLoadedEventStart);
            timingObj['onload事件耗时'] = (time.loadEventEnd - time.loadEventStart);

            timingObj['domready时间'] = (time. domContentLoadedEventEnd - time. fetchStart);
            timingObj['onload时间'] = (time. loadEventEnd - time. fetchStart);
            timingObj['页面完全加载耗时'] = (timingObj['重定向耗时'] + timingObj['DNS解析耗时'] + timingObj['TCP链接耗时'] + timingObj['HTTP请求响应完成耗时'] + timingObj['DOM结构解析完成耗时'] + timingObj['DOM加载完成耗时']);

            for(item in timingObj) {
                console.log(item + ":" + timingObj[item] + '毫秒(ms)');
            }
        } catch(e) {
            console.log(timingObj)
            console.log(performance.timing);
        }
    }

附上一张经典图


image.png

各字段的含义如下:

上一篇下一篇

猜你喜欢

热点阅读