directory

The Performance API is used to precisely measure, control, and enhance browser Performance. This API provides a level of accuracy for measuring web site performance that was never possible before.

For example, in order to get the exact time it takes for a script to run, you need a high-precision timestamp. The traditional approach is to use the getTime method of a Date object.

var start = new Date().getTime(); // do something here var now = new Date().getTime(); var latency = now - start; Console. log(" latency "+ latency);Copy the code

There are two drawbacks to this approach. For one thing, the getTime method (and the other methods on Date objects) are only accurate to the millisecond level (thousandths of a second), making it impossible to get much smaller time differences. Second, it only captures the progress of the code as it runs, not the progress of some background events, such as how long it took the browser to load a web page from the server.

To address these two shortcomings, ECMAScript 5 introduces the “High Precision timestamp” API, which is deployed on Performance objects. It can be accurate to one thousandth of a millisecond (one millionth of a second), which is great for measuring the nuances of programs, making them run faster, and getting the timing of background events.

All major browsers support Performance objects, including Chrome 20+, Firefox 15+, IE 10+, and Opera 15+.

Performance. The timing

The Timing property of the Performance object points to an object that contains various browser performance related time data, providing the time taken by the browser to process the various stages of the web page. For example, the performance. The timing. NavigationStart is dealing with the current web browser startup time.


Date.now() - performance.timing.navigationStart
// 13260687


Copy the code

The code above indicates that 13260687 milliseconds have passed since the browser started processing the current page.

Here’s another example.

var t = performance.timing;
var pageloadtime = t.loadEventStart - t.navigationStart;
var dns = t.domainLookupEnd - t.domainLookupStart;
var tcp = t.connectEnd - t.connectStart;
var ttfb = t.responseStart - t.navigationStart;

Copy the code

The above code gets the page loading time, the domain name resolution time, the TCP connection time, and the time before reading the first byte of the page.

The performance. Timing object contains the following properties (all read-only) :

  • NavigationStart: Unix millisecond timestamp when the previous page of the current browser window closes and an Unload event occurs. If there is no previous web page, it equals the fetchStart property.

  • UnloadEventStart: Returns the Unix millisecond timestamp when the Unload event for the previous web page occurred, if the previous web page belongs to the same domain name as the current web page. If there is no previous web page or the previous web page is not in the same domain name, the return value is 0.

  • UnloadEventEnd: Returns the Unix millisecond timestamp at the end of the callback function of the Unload event for the previous web page if the previous web page belongs to the same domain name as the current web page. If there is no previous web page or the previous web page is not in 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 the jump is not within the same domain name, 0 is returned.

  • RedirectEnd: Returns the Unix millisecond timestamp at the end of the last HTTP jump (that is, when the last byte of the jump response is accepted). If there is no jump or the jump is not within the same domain name, 0 is returned.

  • 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 the domain name query. If persistent connections are used, or the information is fetched from a local cache, the return value is the same as the value of the fetchStart attribute.

  • DomainLookupEnd: Returns the Unix millisecond timestamp at the end of the domain name query. If persistent connections are used, or the information is fetched from a local cache, the return value is the same as the value of the fetchStart attribute.

  • ConnectStart: Returns the Unix millisecond timestamp when the HTTP request began to be sent to the server. If persistent Connection is used, the return value is equal to the value of the fetchStart attribute.

  • ConnectEnd: Returns the Unix millisecond timestamp when the connection between the browser and the server was established. If a persistent connection is established, the return value is the same as the value of the fetchStart attribute. Connection establishment refers to the completion of all handshake and authentication processes.

  • SecureConnectionStart: Returns the Unix millisecond timestamp of the handshake between the browser and the server to begin the secure link. If the current page does not require a secure connection, 0 is returned.

  • RequestStart: Returns the Unix millisecond timestamp when the browser makes an HTTP request to the server (or starts reading the local cache).

  • ResponseStart: Returns the Unix millisecond timestamp of the first byte received by the browser from the server (or read from the local cache).

  • ResponseEnd: Returns the Unix millisecond timestamp when the browser received (or read from the local cache) the last byte from the server (or closed if the HTTP connection has been closed before).

  • DomLoading: Returns the Unix millisecond timestamp when the DOM structure of the current web page started parsing (i.e., when the document. readyState property became “loading” and the corresponding readyStatechange event was triggered).

  • DomInteractive: Returns the Unix millisecond timestamp when the DOM structure of the current web page ends parsing and the embedded resource starts loading (i.e., when the document. readyState property changes to “interactive” and the corresponding readyStatechange event is triggered).

  • DomContentLoadedEventStart: returns the current web page DOMContentLoaded event occurs (i.e., after parsing the DOM structure, all the scripts start runtime) Unix millisecond time stamp.

  • DomContentLoadedEventEnd: Returns the Unix millisecond timestamp when all scripts that need to be executed on the current page are completed.

  • DomComplete: Returns the Unix millisecond timestamp when the DOM structure of the current web page was generated (i.e., when the Document.readyState property changed to “complete” and the corresponding readyStatechange event occurred).

  • LoadEventStart: Returns the Unix millisecond timestamp at the start of the callback function for the load event of the current web page. If the event has not already occurred, return 0.

  • LoadEventEnd: Returns the Unix millisecond timestamp at the end of the run of the callback function for the load event of the current page. If the event has not already occurred, return 0.

Based on these attributes, you can calculate the time taken for each stage of web page loading. For example, the time taken to load a web page is calculated as follows:


var t = performance.timing; 
var pageLoadTime = t.loadEventEnd - t.navigationStart;


Copy the code

performance.now()

Performance. Now () method returns since the performance for the current page. The timing. The navigationStart between the current time and the number of milliseconds.

The performance. Now the Date () / / 23493457.476999998. Now () - (performance) timing. NavigationStart + performance. Now ()) / / 0.64306640625Copy the code

Code above, according to the performance. The timing. NavigationStart plus performance. Now (), approximately equal Date. Now (), that is, the Date, now () can replace the performance. Now (). However, because performing.now () has decimals, it is more accurate.

By calling the performance.now() method twice, you can get the exact time of the interval as a measure of how long an operation is taking.

var start = performance.now(); doTasks(); var end = performance.now(); Console. log(' time: '+ (end-start) +' ms. ');Copy the code

performance.mark()

The MARK method is used to mark the corresponding viewpoint.

window.performance.mark('mark_fully_loaded');
Copy the code

The clearMarks method is used to clear tags, and if no arguments are taken, all tags are cleared.

window.peformance.clearMarks('mark_fully_loaded');

window.performance.clearMarks();
Copy the code

performance.getEntries()

When the browser fetches a web page, it makes an HTTP request for each object in the page (script files, style sheets, image files, and so on). The performance. GetEntries method returns the time statistics for those requests as an array, with as many members as there are requests.

Because this method is related to how the browser processes the web page, it can only be used in the browser.

Window. The performance. However, () [0] / / PerformanceResourceTiming {/ / responseEnd: 4121.6200000017125, / / responseStart: 4120.0690000005125, // requestStart: 3315.355000002455, //... / /}Copy the code

The above code returns the time statistics for the first HTTP request (that is, the HTML source code for the web page). This information is returned as an object of a high-precision timestamp, with each property measured in milliseconds.

Performance. The object of navigation

In addition to time information, Performance can also provide some user behavior information, which is mainly stored in the Performance. Navigation object.

It has two properties:

(1) the performance. Navigation. Type

This property returns an integer value indicating the source of the web page load, which can occur in one of four ways:

  • 0: web page by clicking on the link, the address bar of input, the form is submitted, the script operation methods such as loading, equivalent to a constant performance. Navigation. TYPE_NAVIGATENEXT.

  • 1: web page through the “reload” button or the location. The reload () method of the load, equivalent to a constant performance. Navigation. TYPE_RELOAD.

  • 2: page through the “forward” or “back” button to load, equivalent to a constant performance. Navigation. TYPE_BACK_FORWARD.

  • 255: any other source to load, equivalent to a constant performance. Navigation. TYPE_UNDEFINED.

(2) performance. Navigation. RedirectCount

This property indicates how many times the current web page has been redirected.

Refer to the link

  • Mozilla Developer Network, Navigation Timing
  • W3C, Navigation Timing
  • W3C, HTML5, A vocabulary and associated APIs for HTML and XHTML
  • Matt West, Timing JavaScript Code with High Resolution Timestamps

This article uses the article synchronization assistant to synchronize