According to the W3C performance group introduced a new API(currently IE9 + browsers)– Window.Performance, to achieve front-end performance monitoring

The following is the data in the fast3G case

Usage:

Introduce the following function into the index.html file to read the information on each page switch, preferably in a file packaged online, so that DNS, TCP parsing time can be read.

Diagrams of stages

Here is 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; } timingObj['DNS parsing takes time '] = (time.domainLookupendtime.domainlookupstart); TimingObj ['TCP connection time '] = (time.connectend.connectStart); TimingObj [' SSL security connection time] = (time. ConnectEnd - time. SecureConnectionStart); // for HTTPS timingObj[' Network request time '] = (time.responsestart-time.requeststart); TimingObj [' data transfer time '] = (time.responseend-time. ResponseStart); TimingObj ['DOM '] = (time.dominteractive time.responseend); TimingObj [' resource loading time, synchronization of said pages load resources'] = (time. LoadEventStart - time. DomContentLoadedEventEnd); TimingObj [' front-end onLoad execution time '] = (time.loadeventend-time. LoadEventStart); // timingObj[" first rendering "] = time.responseend-time. FetchStart // timingObj[" first rendering "] = first meaningful paint TimingObj [" interactive "for the first time] = time. DomInteractive - time. FetchStart timingObj [" DOMReady"] = time. DomContentLoadedEventEnd - FetchStart timingObj[" page fully loaded "] = time.loadeventstart-time. FetchStart timingObj[" first package time "] = time.responseStart - Time.domainlookupstart for (item in timingObj) {console.log(item + ":" + timingObj[item] + 'ms '); } console.log(performance.timing); console.log(performance); } catch (e) { console.log(timingObj) console.log(performance.timing); }}}) ();Copy the code