Monitor application performance with HTML5 Window.preformance

The Window.preformance API is available in the HTML5 draft, and we can implement our application front-end monitoring based on the API, and we can see the properties and values of the response in Firebug as follows:

Each of these fields has the following meanings:

· Navigationstart: The previous page of the current browser window closes, and the Unix millisecond timestamp occurs when the Unload event occurred. If there is no previous page, it is equal to the Fetchstart property. Unloadeventstart: If the previous page belongs to the same domain name as the current page, the UNIX millisecond timestamp is returned when the Unload event of the previous page occurred. If there is no previous page, or if the previous page jump is not within the same domain name, the return value is 0. Unloadeventend: If the previous page belongs to the same domain name as the current page, it returns the UNIX millisecond timestamp at the end of the callback function for the previous page unload event. If there is no previous page, or if the previous page jump is not within the same domain name, the return value is 0. Redirectstart: Returns the UNIX millisecond timestamp at the start of the first HTTP jump. If there is no jump, or if it is not a jump within the same domain name, the return value is 0. Redirectend: Returns the UNIX millisecond timestamp at the end of the last HTTP jump (that is, when the last byte of the jump response was accepted). If there is no jump, or if it is not a jump within the same domain name, the return value is 0. Fetchstart: Returns the UNIX millisecond timestamp when the browser is ready to read the document using an HTTP request. This event occurs before the Web page queries the local cache. Domainlookupstart: Returns the UNIX millisecond timestamp at the start of a domain name query.  If a persistent connection is used, or if the information is obtained from the local cache, the return value is equivalent to the value of the Fetchstart property. Domainlookupend: Returns the UNIX millisecond timestamp at the end of a domain name query. If a persistent connection is used, or if the information is obtained from the local cache, the return value is equivalent to the value of the Fetchstart property. Connectstart: Returns the UNIX millisecond timestamp when the HTTP request started sending to the server.  If you use persistent connections (persistent connection), the return value is equivalent to the value of the Fetchstart property. Connectend: Returns the UNIX millisecond timestamp when the connection between the browser and the server is established. If a persistent connection is established, the return value is equivalent to the value of the Fetchstart property. Connection creation refers to the end of all handshake and authentication processes. Secureconnectionstart: Returns the UNIX millisecond timestamp of the handshake when the browser starts a secure link with the server. Returns 0 if the current page does not require a secure connection. Requeststart: Returns UNIX when the browser makes an HTTP request to the server (or starts reading the local cache)Millisecond timestamp. •  Responsestart: Returns the UNIX millisecond timestamp when the first byte is received from the server (or read from the local cache) by the browser. Responseend: Returns the UNIX millisecond timestamp of the last byte that the browser received from the server (or read from the local cache), if it was closed before the HTTP connection was turned off. Domloading: Returns the UNIX millisecond timestamp of the current page when the DOM structure begins parsing (that is, when the Document.readystate property changes to "loading" and the corresponding ReadyStateChange event is triggered). Dominteractive: Returns the current page DOM structure end parsing, start loading inline resources (that is, the Document.readystate property becomes "interactive", The UNIX millisecond timestamp when the corresponding ReadyStateChange event is triggered. Domcontentloadedeventstart: Returns the UNIX millisecond timestamp of the current page when the Domcontentloaded event occurred (that is, when the DOM structure was resolved and all scripts started running). Domcontentloadedeventend: Returns the UNIX millisecond timestamp of all script executions that need to be performed on the current Web page. Domcomplete: Returns the UNIX millisecond timestamp of the current page when the DOM structure is generated (that is, when the Document.readystate property changes to "complete" and the corresponding ReadyStateChange event occurs). Loadeventstart: Returns the UNIX millisecond timestamp at the beginning of the callback function for the current Web page load event. Returns 0 if the event has not yet occurred. Loadeventend: Returns the UNIX millisecond timestamp of the current page of the Load event when the callback function finishes running. Returns 0 if the event has not yet occurred.

The overall relationship is as follows:

Before the DOM starts loading all time = Redirect Time + domain name resolution Time + time spent + Request time + receive data spend time Pageloadtime page load time = Domain Name Resolution Time + time spent + request time + Receiving data takes time + parsing DOM takes time + load DOM takes time Allloadtime page full load time = Redirect Time + domain name resolution Time + time spent + Request time + Receive data spend time + parse dom spend time + Loading DOM takes time + execution onload event takes time Resourcesloadedtime resource load time = Parse dom takes time + load DOM takes time

The JS code is as follows:

    function_performance () {varReport_url = "xxxx"; varPerf = (window.webkitperformance?window.webkitPerformance:window.msPerformance), Points= [' Navigationstart ', ' unloadeventstart ', ' unloadeventend ', ' redirectstart ', ' redirectend ', ' fetchstart ', ' Domainlookupstart ', ' connectstart ', ' requeststart ', ' responsestart ', ' responseend ', ' domloading ', ' domInteractive ', ' Domcontentloadedeventend ', ' domcomplete ', ' loadeventstart ', ' loadeventend ']; varTiming =pref.timing; Perf= perf?perf:window.performance; if(Perf &&timing) {         vararr = []; varNavigationstart = Timing[points[0]];  for(vari=0,l=points.length;i<l;i++) {Arr[i]= Timing[points[i]]-Navigationstart; }      varurl = report_url + arr.join ("-"); varIMG =NewImage; Img.onload= Img.onerror =function() {img=NULL; } img.src=URL; }

Script Error Collection:

    functionerror (msg,url,line) {varReport_url = "XXXX";//gather information about the escalated data      varM =[msg, url, line, navigator.useragent, +NewDate];//Collect error information, error script file network address, user agent information, time      varurl = report_url + m.join (' | | ');//Assemble error escalation information content URL      varIMG =NewImage; Img.onload= Img.onerror =function() {img=NULL;      }; IMG.SRC= URL;//send data to background CGI    }    //Monitoring Error EscalationWindow.onerror=function(msg,url,line) {error (Msg,url,line); }

Resources:

• http://mp.weixin.qq.com/s?__biz=MzAxODE2MjM1MA==&mid=210058186&idx=2&sn= 565fd226cbb81e3fe85bf2ca6c61b844&scene=2&srcid=nwzhirwso3bd0pjpyieg&from=timeline& Isappinstalled=0#wechat_redirect

• HTML5 performance CN

Monitor application performance with HTML5 Window.preformance