HTML5 learning-performance tool for obtaining loading time

Some time ago, because the project needs to obtain the page loading time, I went to see the performane in HTML5.

You can use it to obtain detailed page loading time.

For more information about performance, see the http://www.cnblogs.com/CraryPrimitiveMan/p/3795086.html

Then I wrote a small tool using javase to obtain the detailed page loading time.

GitHub address: https://github.com/CraryPrimitiveMan/performance-tool

Only chrome passed the test.

Introduce times. js into the desired HTML, open the console (Press F12), refresh the page to see the detailed loading time. You can also call the times () method in JS.

The running result is as follows:

The source code and comments are as follows:

Var times = function () {var timing = performance. timing; var loadTime = timing. loadEventEnd-timing. navigationStart; // when a get is made too early, loadEventEnd may sometimes be 0 if (loadTime <= 0) {// The times method will continue after a delay of Ms, until setTimeout (function () {times () ;}, 200); return ;}var readyStart = timing. fetchStart-timing. navigationStart; var redirectTime = timing. redirectEnd-timing. redirectStart; var appcacheTime = timing. domainLookupStart-timing. fetchStart; var unloadEventTime = timing. unloadEventEnd-timing. unloadEventStart; var lookupDomainTime = timing. domainLookupEnd-timing. domainLookupStart; var connectTime = timing. connectEnd-timing. connectStart; var requestTime = timing. responseEnd-timing. requestStart; var initDomTreeTime = timing. domInteractive-timing. responseEnd; var domReadyTime = timing. domComplete-timing. domInteractive; // when it is obtained too early, domComplete is sometimes 0 var loadEventTime = timing. loadEventEnd-timing. loadEventStart; // It is the console. the table method prepares objects, including time-consuming descriptions and time-consuming var allTimes = [{"Description": "time-consuming new page Preparation", "Time (MS)": readyStart }, {"Description": "redirect redirection elapsed time", "Time (MS)": redirectTime}, {"Description": "Appcache elapsed time", "Time (MS )": appcacheTime}, {"Description": "Time consumed before unload", "Time (MS)": unloadEventTime}, {"Description": "DNS query time consumed ", "Time (MS)": lookupDomainTime}, {"Description": "TCP connection time consumed", "Time (MS)": connectTime}, {"Description ": "request time consumed", "Time (MS)": requestTime}, {"Description": "request completed to DOM loading", "Time (MS)": initDomTreeTime }, {"Description": "Explanation of dom tree elapsed time", "Time (MS)": domReadyTime}, {"Description": "load event elapsed time", "Time (MS )": loadEventTime}, {"Description": "total load time from start", "Time (MS)": loadTime}]; console. table (allTimes);} window. onload = times; // when onload is enabled, the times method is triggered.