Web performance monitoring with performance

Due to the needs of the project, some performance of the Web page needs to be monitored and exposed to the performance,

Window.performance provides a set of accurate data, after a simple calculation can be obtained some Web performance data, the data stored as a log, can effectively monitor the performance of the Web page.

first look at what happens when you execute window.performance in Chrome's console

The following is a detailed explanation of these properties:

1Performance = {  2     //memory is a non-standard attribute, only available in Chrome3     //This property provides an object that can be used to obtain basic memory usage.4 Memory: {5usedjsheapsize:10000000,//JS objects (including V8 engine internal objects) occupy memory6totaljsheapsize:10000000,//memory that can be used7jsheapsizelimit:2190000000//Memory Size Limit8     },9  Ten     //Navigation: Provides useful context for operations (including time in timing) One     //includes whether the page is loaded or refreshed, how many redirects have occurred, and so on.  A Navigation: { -redirectcount:0,//REDIRECT times -type:0//0 Normal entry pages (i.e. non-refresh, non-redirect, etc.) the                           //1 via Window.location.reload () (i.e. refresh page) -                           //2 pages entered through the browser's forward Back button (history) -                           //255 pages that are not entered in the above way -     }, +   - timing: { +         //the Unix timestamp at the end of the last document unload (unload) of the same browser context.  A        //If there is no previous document, this value will be the same as Fetchstart.  atnavigationstart:1441112691935, -   -         //the Unix timestamp of the previous document when the Unload event was thrown.  -         //If there is no previous document, this value returns 0. -unloadeventstart:0, -   in         //as opposed to Unloadeventstart, the Unix timestamp of the Unload event processing is complete.  -         //If there is no previous document, this value returns 0. tounloadeventend:0, +   -         //the Unix timestamp at the start of the first HTTP redirect.  the         //If there is no redirection, or a different source in the redirect, this value returns 0. *redirectstart:0, $  Panax Notoginseng         //the Unix timestamp of the last HTTP redirect completed (that is, the time the last bit of the HTTP response was received directly).  -         //If there is no redirection, or a different source in the redirect, this value returns 0. theredirectend:0, +   A         //The browser is ready to use the HTTP request to get the Unix timestamp of the (fetch) document. This point in time will be before any application cache is checked.  thefetchstart:1441112692155, +   -         //the Unix timestamp at which the DNS domain name query started.  $        //If a persistent connection (persistent connection) is used, or if this information is stored on a cache or on a local resource, this value will be consistent with Fetchstart.  $domainlookupstart:1441112692155, -   -         //the time that the DNS domain name query completed. the         //equal to the Fetchstart value if a local cache (that is, no DNS query) or persistent connection is used -domainlookupend:1441112692155,Wuyi   the         //the Unix timestamp at the end of the HTTP (TCP) domain name query.  -        //If a persistent connection (persistent connection) is used, or if this information is stored on a cache or on a local resource, this value will be consistent with Fetchstart.  Wuconnectstart:1441112692155, -   About         //HTTP (TCP) 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 establishment refers to all the handshake and the authentication process is all over.  -connectend:1441112692155, -   A         //HTTPS returns the UNIX millisecond timestamp when the browser starts a secure linked handshake with the server.  +        //returns 0 if the current page does not require a secure connection.  thesecureconnectionstart:0, -   $         //returns the UNIX millisecond timestamp when the browser makes an HTTP request to the server (or when it starts reading the local cache).  therequeststart:1441112692158, the   the         //returns the UNIX millisecond timestamp when the first byte is received (or read from the local cache) by the browser from the server.  the        //If the transport layer fails after the start of the request and the connection is re-opened, the property will be counted as the corresponding initiation time for the new request.  -responsestart:1441112692686, in   the         //returns the Unix millisecond timestamp of the last byte that the browser received from the server (or was read from the local cache, or read from a local resource) when it was closed before the HTTP connection was closed.  theresponseend:1441112692687, About   the         //the Unix millisecond timestamp of the current page DOM structure when it begins parsing (that is, when the Document.readystate property changes to "loading" and the corresponding ReadyStateChange event is triggered).  thedomloading:1441112692690, the   +         //the Unix millisecond timestamp of the current Web page DOM structure that ends parsing and begins loading embedded resources (that is, when the Document.readystate property becomes "interactive" and the corresponding ReadyStateChange event is triggered).  -dominteractive:1441112693093, the  Bayi         //when the parser sends the Domcontentloaded event, the Unix millisecond timestamp when all scripts that need to be executed have been parsed.  thedomcontentloadedeventstart:1441112693093, the   -         //the Unix millisecond timestamp when all scripts that need to be executed immediately have been executed (regardless of the order of execution).  -Domcontentloadedeventend:1441112693101, the   the         //The current document resolution is completed, that is, the Unix millisecond timestamp when document.readystate becomes ' complete ' and the corresponding ReadyStateChange is triggered thedomcomplete:1441112693214, the   -         //the Unix millisecond timestamp when the load event was sent. If this event has not been sent, its value will be 0.  the  theloadeventstart:1441112693214, the  94         //when the Load event finishes, the UNIX millisecond timestamp when the Load event completes. If the event has not been sent, or has not been completed, it will have a value of 0. theloadeventend:1441112693215 the     } the};

with these properties, you can calculate some important Web performance data:

Calculate Load Time function getperformancetiming () {var performance = window.performance;    if (!performance) {//The current browser does not support return;    } var t = performance.timing;     var times = {};     Page load Complete time times.loadpage = T.loadeventend-t.navigationstart;     "Important" Time times.domready of parsing DOM tree structure = t.domcomplete-t.responseend;     "Important" redirect time Times.redirect = T.redirectend-t.redirectstart;     "Important" DNS query time Times.lookupdomain = T.domainlookupend-t.domainlookupstart;     "Important" reads the time of the first byte of the page//TTFB that is, times to first byte TIMES.TTFB = T.responsestart-t.navigationstart;     "Important" Content loading completed time times.request = T.responseend-t.requeststart;    "Important" time to execute the onload callback function//"cause" is there too many unnecessary operations to be performed in the OnLoad callback function, considering the deferred loading, load-on-demand strategy?     Times.loadevent = T.loadeventend-t.loadeventstart;     DNS Cache Time Times.appcache = T.domainlookupstart-t.fetchstart;     Time to unload the page times.unloadevent = T.unloadeventend-t.unloadeventstart; When TCP establishes a connection to complete the handshakeBetween times.connect = T.connectend-t.connectstart; return times;}

　　

performance also provides a number of methods for using

Performance.now ()
Returns a timestamp indicating the amount of milliseconds elapsed since the reference time
The value of the timestamp is timed from the time stamp value in the Navigationstart property of the Window.performance.timing interface to the starting point.
Unlike other time-class functions available in JavaScript (such as Date.now), the timestamp returned by Window.performance.now () is not limited to a millisecond of accuracy, and it uses a floating-point number to achieve the microsecond level of accuracy.
Another difference is that Window.performance.now () is slowly increasing at a constant rate, which is not affected by system time (may be adjusted by other software)
Examples of Use:

Let T0 = Window.performance.now ();d osomething (), let T1 = Window.performance.now (); Console.log ("dosomething function executed" + (t1 -T0) + "milliseconds.")

Performance.mark ()
Creates a timestamp in the browser's performance input buffer, based on the given name
Example:

function Create_mark (name) {if (Performance.mark = = = undefined) {Console.log ("Performance.mark not Supported"); return;} Create the performance Markperformance.mark (name);//The Mark method can create multiple performanceentry with the same name, for example://Performance.mark (" Begin ")//Performance.mark (" Begin ")//Performance.mark (" Begin ")//Performance.mark (" Begin ")// Performance.getentriesbyname ("Begin")//[...] 0:performancemark {name: "Begin", EntryType: "Mark", starttime:94661370.14, ...} 1:performancemark {name: "Begin", EntryType: "Mark", starttime:95542853.4, ...}? 2:performancemark {name: "Begin", EntryType: "Mark", starttime:95545560.92, ...}? 3:performancemark {name: "Begin", EntryType: "Mark", starttime:95548089.94, ...}? length:4?//__proto__: Array []}

Performance.clearmarks ()
Removes the given mark from the browser's performance input buffer
The following example shows two uses of Clearmarks ().

function Clear_mark (name) {if (Performance.clearmarks = = = undefined) {Console.log ("Performance.clearmarks not Supported "); return;} Remove all peformance entryperformance.clearmarks (name) marked with this name;} function Clear_all_marks () {if (Performance.clearmarks = = = undefined) {Console.log ("Performance.clearmarks not Supported "); return;} Removes all tagged performance entryperformance.clearmarks () from the performance buffer;

Performance.clearmeasures ()
Removes the given measure from the browser's performance input buffer

Performance.clearresourcetimings ()
Removing all entrytype is "resource" of performance entries from the browser's performance data buffer

Performance.getentries ()
Returns a list of Performanceentry objects, based on the given filter

Performance.getentriesbyname ()
Returns a list of Performanceentry objects, based on the given name and entry type

Performance.getentriesbytype ()
Returns a list of Performanceentry objects, based on the given entry type

Performance.measure ()
Creates a specified timestamp in the performance input buffer between the specified start mark and end mark in the browser

Performance.setresourcetimingbuffersize ()
Sets the size of the browser's resource timing buffer to the specified number of "resource" type Performance entry objects

Performance.tojson ()
is a JSON-formatted converter that returns a JSON object of the performance object

Using these properties and methods of performance, we can accurately record the time we want, and with the help of the functions such as log collection, we will be able to easily grasp the performance of our website.

Web performance monitoring with performance