Web timing mechanism

Previous words

Page performance has always been an area of concern for Web developers. But in practical applications, metrics that measure page performance are the JavaScript date object. The Web Timing API has changed this situation, allowing developers to use JavaScript to work with metrics inside the browser, giving a lot of information about the page loading and rendering process, which is valuable for performance optimization. This article describes the Web Timing api--performance object in detail

Briefly

The core of the Web timing mechanism is the Window.performance object. All the metrics on the page, including those defined in the specification and in the future, are included in the object. The performance object includes the navigation and timing objects, as well as the memory objects of the chrome extension, and also includes the GetEntries () and now (two) methods

Happily, the low version of IE also supports performance objects

Memory

The memory property is a Chrome extension object that is supported by Chrome only and contains the following three properties:

Jsheapsizelimit indicates a memory size limit

Totaljsheapsize indicates the memory that can be used

Usedjsheapsize represents memory consumed by JavaScript objects

/*jsheapsizelimit:793000000totaljsheapsize:10000000usedjsheapsize:10000000 */console.log (performance.memory);

Navigation

The Performance.navigation property is an object that contains both the Redirectcount and type properties associated with page navigation.

Where Redirectcount represents the number of redirects before a page is loaded, and type is a numeric constant that represents the type of navigation that just occurred, type has the following values

Performance.navigation.TYPE_NAVTGATE (0): page first load Performance.navigation.TYPE_RELOAD (1): Page overloading over Performance.navigation.TYPE_BACK_FORWARD (2): The page is opened with a "back" or "forward" button

Console.log (Window.performance.navigation.redirectCount);//0console.log (window.performance.navigation.type);// 1

Timing

The Performance.timing property is also an object, but the properties of this object are timestamps, and different events produce different time values

Shows the time sequence of various links in the whole process of a request being issued

The following describes the various properties of the timing object in chronological order

Navigationstart: The time to start navigating to the current page, that is, when you press ENTER after entering an address in the address bar

var Navigationstart = Performance.timing.navigationstart;//1488984540668console.log (NavigationStart);//Wed Mar 08 22:49:44 gmt+0800 (China Standard Time) Console.log (new Date (Navigationstart));

Redirectstart: The time to start the redirect to the current page. However, this property will have a value only if the redirected page is from the same domain; otherwise, a value of 0
Redirectend: The time to end the redirect to the current page. However, this property will have a value only if the redirected page is from the same domain; otherwise, a value of 0

Console.log (Performance.timing.redirectStart);//0console.log (performance.timing.redirectEnd);//0

Fetchstart: Time to start getting pages via HTTP GET

Console.log (Performance.timing.fetchStart);//1488984540668

Domainlookupstart: The time to start consulting the current page DNS, if a local cache or persistent connection is used, is equal to the Fetchstart value
Domainlookupend: Check the current page DNS end time, if a local cache or persistent connection is used, then the Fetchstart value is equal

Console.log (Performance.timing.domainLookupStart);//1488984540670console.log ( PERFORMANCE.TIMING.DOMAINLOOKUPEND);//1488984540671

Connectstart: When the browser tries to connect to the server
Secureconnectionstart: The time that the browser tries to connect to the server in SSL mode. This property has a value of 0 when it is not connected using SSL
Connectend: When the browser successfully connected to the server

Console.log (Performance.timing.connectStart);//1488984540671console.log ( Performance.timing.secureConnectionStart);//0console.log (performance.timing.connectEnd);//1488984540719

Requeststart: When the browser starts requesting a page
Responsestart: The time the browser receives the first byte of the page
Responseend: The time that the browser receives all content from the page

Console.log (Performance.timing.requestStart);//1488984540720console.log (Performance.timing.responseStart);// 1488984540901console.log (performance.timing.responseEnd);//1488984540902

Unloadeventstart: The time the Unload event of the previous page started. This property only has a value if the previous page is from the same field as the current page; otherwise, the value is 0
Unloadeventend: The time at which the previous page's unload event ended. This property only has a value if the previous page is from the same field as the current page; otherwise, the value is 0

Console.log (Performance.timing.unloadEventStart);//1488984540902console.log (PERFORMANCE.TIMING.UNLOADEVENTEND) ;//1488984540903

The time domLoading:document.readyState becomes "loading", that is, the time to begin parsing the DOM tree
The time domInteractive:document.readyState becomes "interactive", that is, the time to complete parsing the DOM tree
Domcontentloadedeventstart: The time when the Domcontentloaded event occurred, that is, the time to start loading resources within the page
The time that the Domcontentloadedeventend:domcontentloaded event has occurred and all event handlers have been executed, and when the resource load in the Web page has completed
The time that domComplete:document.readyState becomes "complete", that is, when the DOM tree is resolved and the resources in the Web are ready

Console.log (performance.timing.domLoading);//1488984540905console.log (performance.timing.domInteractive);// 1488984540932console.log (Performance.timing.domContentLoadedEventStart);//1488984540932console.log ( PERFORMANCE.TIMING.DOMCONTENTLOADEDEVENTEND);//1488984540932console.log (performance.timing.domComplete);// 1488984540932

Loadeventstart: The time that the load event occurred, that is, the time the load callback function started executing
The time that the Loadeventend:load event has occurred and all event handlers have been executed

Console.log (Performance.timing.loadEventStart);//1488984540933console.log (performance.timing.loadEventEnd);// 1488984540933

[note] In real-world situations, dominteractive, Domcontentloadedeventstart, Domcontentloadedeventend, and performance.timing properties can be found The 6 values of Domcomplete, Loadeventstart, and Loadeventend. But in the case of a separate fetch, these 6 values are 0

/*connectend:1488989686331connectstart:1488989686330domcomplete:1488989686395domcontentloadedeventend : 1488989686395domcontentloadedeventstart:1488989686393dominteractive:1488989686393domloading : 1488989686336domainlookupend:1488989686330domainlookupstart:1488989686330fetchstart:1488989686328loadeventend : 1488989686395loadeventstart:1488989686395navigationstart:1488989686328redirectend:0redirectstart:0 requeststart:1488989686331responseend:1488989686333responsestart:1488989686332secureconnectionstart:0 Unloadeventend:1488989686333unloadeventstart:1488989686333*/console.log (performance.timing);

/*navigationstart:1488989686328unloadeventstart:1488989686333unloadeventend:1488989686333redirectstart:0 Redirectend:0fetchstart:1488989686328domainlookupstart:1488989686330domainlookupend:1488989686330connectstart : 1488989686330connectend:1488989686331secureconnectionstart:0requeststart:1488989686331responsestart : 1488989686332responseend:1488989686333domloading:1488989686336dominteractive:0domcontentloadedeventstart:0 domcontentloadedeventend:0domcomplete:0loadeventstart:0loadeventend:0 */var timing = Performance.timing;for (var Value in timing) {    Console.log (value + ': ' +timing[value]);}

GetEntries ()

The GetEntries () method returns an array that contains all the HTTP resource requests in the page

Note ie8-Browser does not support

Take the following page for example, the page has a request for jquery a resource

<! DOCTYPE html>
As shown, the resource is in Performance.getentries () [0] because there is only one resource
Where duration represents the load time; name represents the absolute path to the resource; EntryType represents the resource type; Initiatortype represents the label that originated the request
Now ()
The now () method returns the number of milliseconds from page initialization to when the method is called
Note ie9-Browser does not support
Performance.now () differs from Date.now () in that it returns the time in microseconds, which is more accurate
And unlike Date.now (), which is affected by System program execution blocking, the time of Performance.now () is incremented at a constant rate and is not affected by system time (System time can be adjusted artificially or by software)
Date.now () Outputs the Unix time, which is the time from 0 O'Clock January 1, 1970, while Performance.now () outputs the time relative to Performance.timing.navigationStart (page initialization)
var t0 = Window.performance.now ();d osomething (), var t1 = Window.performance.now (); Console.log ("dosomething function executed" + (t1 -T0) + "milliseconds.")
Performance Index
These time values of the timing property allow you to fully understand what stages the page has gone through in the process of being loaded into the browser, and which stages may be bottlenecks that affect performance
"Redirect Time"
Times.redirect = Timing.redirectend-timing.redirectstart;console.log (times.redirect);//0
"DNS Query Time"
Times.lookupdomain = Timing.domainlookupend-timing.domainlookupstart;console.log (times.lookupDomain);//1
"TCP Handshake Time"
Times.connect = Timing.connectend-timing.connectstart;console.log (times.connect);//48
"HTTP Response Time"
HTTP requests made through the browser, to the time when the browser has accepted the HTTP response
Times.request = Timing.responseend-timing.requeststart;console.log (times.request);//182
Finally, the performance indicator object times are expressed as follows
var timing = Performance.timing;var times = {    Redirect:timing.redirectend-timing.redirectstart,    lookupdomain : Timing.domainlookupend-timing.domainlookupstart,    Connect:timing.connectend-timing.connectstart,    Request:timing.responseend-timing.requeststart};
Web timing mechanism