HTML5 Learning--performance tools to get load time

The previous time because the project needs to get the page load time, went to see the next HTML5 in the Performane.

You can use it to get the page's detailed load time.

More about performance can be seen in http://www.cnblogs.com/CraryPrimitiveMan/p/3795086.html

After that, a gadget was written with Performane to get the page's detailed load time.

The address on GitHub is: Https://github.com/CraryPrimitiveMan/performance-tool

The test was passed only in Chrome.

Introduce times.js into the HTML you want, open the console (press F12), and refresh the page to see a detailed load time. You can also use the Times () method call in JS.

The results of the operation are as follows

Source code and comments are as follows

varTimes =function() {    varTiming =performance.timing; varLoadtime = Timing.loadeventend-timing.navigationstart;//when acquired prematurely, Loadeventend can sometimes be 0    if(loadtime <= 0) {    //The Times method continues after 200ms delay until successfulSetTimeout (function() {times (); }, 200); return; }    varReadystart = Timing.fetchstart-Timing.navigationstart; varRedirecttime = Timing.redirectend-Timing.redirectstart; varAppcachetime = Timing.domainlookupstart-Timing.fetchstart; varUnloadeventtime = Timing.unloadeventend-Timing.unloadeventstart; varLookupdomaintime = Timing.domainlookupend-Timing.domainlookupstart; varConnecttime = Timing.connectend-Timing.connectstart; varRequestTime = Timing.responseend-Timing.requeststart; varInitdomtreetime = timing.dominteractive-Timing.responseend; varDomreadytime = timing.domcomplete-timing.dominteractive;//when acquired prematurely, Domcomplete can sometimes be 0    varLoadeventtime = Timing.loadeventend-Timing.loadeventstart; //preparing objects for the Console.table method, including time-consuming descriptions and elapsed times    varAlltimes = [        { "description": "Time spent preparing new pages", "Time (ms)": Readystart}, {"description": "Redirect redirect Time", "Times (ms)": Redirecttime}, {"description": "Appcache Time", "Times (ms)": Appcachetime}, {"description": "Unload before document Time", "Time (ms)": Unloadeventtime}, {"description": "DNS Query time Consuming", "Times (ms)": Lookupdomaintime}, {Description: "TCP connection Time consuming", "Time (ms)": Connecttime}, {Description: "Request time-consuming", "duration (ms)": RequestTime}, {"description": "Request completed to DOM load", "Time (ms)": Initdomtreetime}, {Description: "Interpreting DOM tree time consuming", "Time (ms)": Domreadytime}, {Description: "Load event time consuming", "Time (ms)": Loadeventtime}, {"description": "Total elapsed from start to load", "Time (ms)": Loadtime}]; Console.table (alltimes);} Window.onload= times;//when onload, triggers the Times method