Performance. timing API

The new performance interface provided by the browser accurately tells us the precise time (timestamp) of each processing phase of the current webpage when accessing a website page, so as to facilitate front-end analysis.

It is a direct implementation of the browser, which is much more accurate than setting Date. time or cookie in js on the webpage to analyze the webpage time.

The following figure shows the performance. timing APIs provided by w3c.

Temporary disadvantages:

 

Navigation Timing stops at the window. onload event

Many modern websites trigger more asynchronous requests after onload, but the navigation Timing statistics are not counted only after window. onload.

Why not count timing after all network requests are completed?

This is because some web pages have polling or long links. So the situation is complicated, and w3c is still in the draft phase. If you are good enough to come up with a good solution, you can also directly send an email to w3c to contribute your strength.

In order to conveniently view the statistical value, I wrote a simple statistical table plug-in.

PerformanceTracer

Performance API time consumption statistics

Statistical points:

readyStart = timing.fetchStart -= timing.redirectEnd  -= timing.domainLookupStart  -= timing.unloadEventEnd -= timing.domainLookupEnd -= timing.connectEnd -= timing.responseEnd -= timing.domInteractive -= timing.domComplete - timing.domInteractive; loadEventTime = timing.loadEventEnd -= timing.loadEventEnd - timing.navigationStart;

Result:

Console. log ('time consumed for preparing a new page: '+ 'redirect redirection time consumed:' + 'appcache time consumed: '+ 'time consumed before unload:' + 'time consumed for DNS query: '+ 'tcp connection time:' + 'request request time consumed: '+' the request is loaded to the DOM: '+' the dom tree time consumed: '+' the load event time consumed: '+' total time consumed from start to load: '+ loadTime );

 

Usage:

The performance-min.js can be introduced directly at the bottom of the html

Or download the chrome plug-in. crx package,

 

Notes

Because window. performance. timing is still in the w3c improvement process. When your website has asynchronous requests, please click the plug-in button on chrome after all asynchronous requests are completed to ensure that the data is correct

 

:

 

==============================================================================================

Js and chrome plug-ins

Github: https://github.com/willian12345/performanceTracer

 

Incomplete performance timing functionsForeign discussion: http://www.stevesouders.com/blog/2012/10/30/qa-nav-timing-and-post-onload-requests/

======================================

 

 

Now the plug-in can be installed in chrome. The plug-in has been tested in mac and win, and can be installed and used in other systems.

======================================

Reprinted place Please note: blog garden stolen rice cat willian12345@126.com