编程知识 cdmana.com

Front end performance monitoring

according to W3C New... Introduced by the performance team API( at present IE9 The browser above )--window.performance, Achieve front-end performance monitoring

Here are fast3G In the case of data presentation

Usage method :

Introduce the following function to index.html file Every time you switch pages, you can read information , It's better to put it in the file after package and online , This can be read dns,tcp Parsing time .

Diagram of each stage

Here is the function encapsulation

(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);

            if (loadTime < 0) {
                setTimeout(function () {
                    getTiming();
                }, 200);
                return;
            }
            //  The stage takes time 
            timingObj['DNS Analytical time consuming '] = (time.domainLookupEnd - time.domainLookupStart);
            timingObj['TCP Time consuming to connect '] = (time.connectEnd - time.connectStart);
            timingObj['SSL Secure connections take time '] = (time.connectEnd - time.secureConnectionStart);// in the light of https
            timingObj[' Network requests take time '] = (time.responseStart - time.requestStart);
            timingObj[' Data transmission takes time '] = (time.responseEnd - time.responseStart);
            timingObj['DOM Analytical time consuming '] = (time.domInteractive - time.responseEnd);
            timingObj[' Resource load time ,  Represents the synchronous loading resources in the page '] = (time.loadEventStart - time.domContentLoadedEventEnd);
            timingObj[' front end onload execution time '] = (time.loadEventEnd - time.loadEventStart);

            // Performance indicators ( Report field name )
            timingObj[" First render "] = time.responseEnd - time.fetchStart
            // timingObj[" First screen time "] =  first meaningful paint
            timingObj[" It's interactive for the first time "] = time.domInteractive - time.fetchStart
            timingObj["DOMReady"] = time.domContentLoadedEventEnd - time.fetchStart
            timingObj[" The page is fully loaded "] = time.loadEventStart - time.fetchStart
            timingObj[" First package time "] = time.responseStart - time.domainLookupStart


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

            console.log(performance.timing);
            console.log(performance);

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


author : Li Chunjing
link :https://juejin.cn/post/6908977607317028877
source : Nuggets
The copyright belongs to the author . Commercial reprint please contact the author for authorization , Non-commercial reprint please indicate the source .



版权声明
本文为[osc_ 2g0zdjro]所创,转载请带上原文链接,感谢
https://cdmana.com/2020/12/20201224120753691P.html

Scroll to Top