performance monitoring website performance data

Disclaimer: This article is a blogger original article, shall not be reproduced without the bloggers allowed. https://blog.csdn.net/u012193330/article/details/79488134

Generally, we can debug tool through a browser - consuming various stages of the process of the network panel, or proxy tool to view the page loads. Utilize window.performance properties can be obtained more accurate raw data, in milliseconds, accurate to the microsecond.

Property Description:

navigationStart: processing of the current web browser startup time
fetchStart: http browser to initiate a request to read a document millisecond timestamp.
domainLookupStart: Domain Search timestamp of the start.
domainLookupEnd: timestamp at the end of the domain name query.
connectStart: http request time stamp is sent to the server.
connectEnd: browser and server to establish the connection (handshake and authentication process is completed) millisecond timestamp.
requestStart: timestamp when the browser makes a request to http server. Or at the beginning of reading the local cache.
responseStart: timestamp when the browser receives a byte from the first server (or read local cache).
responseEnd: browser receives millisecond timestamp when the last byte from the server.
domLoading: browser start page DOM parsing the time structure.
domInteractive: pages dom tree is created, start loading time embedded resources.
domContentLoadedEventStart: timestamp when the page DOMContentLoaded event.
domContentLoadedEventEnd: time, domReady time when you need to perform all the pages of the script execution is completed.
domComplete: dom timestamp when the web structure generation.
loadEventStart: timestamp of the current web page load event callback function begins execution.
loadEventEnd: the current web page load event callback function end timestamp of operation.

(function() {

    handleAddListener('load', getTiming)

    function handleAddListener(type, fn) {
        if(window.addEventListener) {
            window.addEventListener(type, fn)
        } else {
            window.attachEvent('on' + type, fn)
        }
    }

    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) / 1000;
            timingObj['DNS解析时间'] = (time.domainLookupEnd - time.domainLookupStart) / 1000;
            timingObj['TCP完成握手时间'] = (time.connectEnd - time.connectStart) / 1000;
            timingObj['HTTP请求响应完成时间'] = (time.responseEnd - time.requestStart) / 1000;
            timingObj['DOM开始加载前所花费时间'] = (time.responseEnd - time.navigationStart) / 1000;
            timingObj['DOM加载完成时间'] = (time.domComplete - time.domLoading) / 1000;
            timingObj['DOM结构解析完成时间'] = (time.domInteractive - time.domLoading) / 1000;
            timingObj['脚本加载时间'] = (time.domContentLoadedEventEnd - time.domContentLoadedEventStart) / 1000;
            timingObj['onload事件时间'] = (time.loadEventEnd - time.loadEventStart) / 1000;
            timingObj['页面完全加载时间'] = (timingObj['重定向时间'] + timingObj['DNS解析时间'] + timingObj['TCP完成握手时间'] + timingObj['HTTP请求响应完成时间'] + timingObj['DOM结构解析完成时间'] + timingObj['DOM加载完成时间']);

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

            console.log(performance.timing);

        } catch(e) {
            console.log(timingObj)
            console.log(performance.timing);
        }
    }
})();