Use the concise navigation timing API to test the webpage loading speed (incomplete translations)

We always want the webpage to load faster. Google's experiments show that a latency of 100 MS may have a negative impact on user experience. How can we measure the webpage loading speed? What is the true meaning of "Page load?

Navigation timing is a javascript API that accurately measures performance on the web. This API provides a simple way to obtain the precise and detailed time status of page navigation and loading events. Currently, it is available in ie9, chrome, and Firefox.

This articleArticleDescribes the navigation API and how to use the API to export time data.

Usage:

Open the console in chrome, enter performance in the command line, click it, and view its timing attribute. You will see the following:Code:

IfIEYes, you need to use <! Doctype HTML> Document declaration: the browser must be in standard mode.

Meaning of each attribute:

Each performance. Timing attribute indicates a page event (for example, when a page sends a request) or page loading (for example, when the DOM starts loading). The measurement starts from midnight on January 1, January 1, 1970 in milliseconds. If the result is 0, this event has not occurred (for example, redirectend or redirectstart ).

The meanings of these events are described in Microsoft's performance. Timing documentation and the more formal W3C editor's draft. Ie9 supports all attributes described in the API draft except secureconnectionstart time, And ie9 provides an additional msfirstpaint event, which starts with dcoument display and is triggered after loadeventend.

Here is a diagram of the sequence of the performance. Timing event from navigation timing draft:

Navigationstart:

When the load/unload action is triggered, you may also be prompted to close the current document (that is, press the Enter key in the URL address bar, the page is refreshed again, and the submit button is clicked ). If there is no previous document in the current window, the value of navigationstart isFetchstart.

Redirectstart:

It may be the start time of page redirection (if any) or 0.

Unloadeventstart:

If the requested document comes from the previous same-origin (same-origin policy) document, this attribute stores the time when the browser starts to uninstall the previous document. Otherwise (the previous document is not the same source or does not have the previous one), it is 0.

Unloadeventend:

Indicates the time when the previous document of the same source is uninstalled. If the previous document does not exist or is not of the same source, the value is 0.

Redirectend:

If redirection exists, redirectend indicates the time when the server response data is received after the last redirection..Otherwise, it is 0.

Fetchstart:

Fetchstart refers to the time value before the browser initiates any request. The browser checks the cache of the current document between fetchstart and domainlookupstart.

Domainlookupstart:

This attribute refers to the time before the browser starts to check the DNS of the current domain name. If DNS is not checked for any reason (that is, the browser uses a cache, persistent connection, or local resources), the value is equivalent to fetchstart.

Domainlookupend:

The time when the browser completes the DNS check. If DNS is not checked, its value is equivalent to fetchstart.

Connectstart:

The time when the browser starts to connect to the server. If a resource is taken from the cache (or the server does not establish a connection for any other reason, such as a persistent connection), its value is equivalent to domainlookupend.

Connectend:

When the browser is connected to the server. If no connection is established, its value is equivalent to domainlookupend.

Secureconnectionstart:

Optional. If the page uses https, the value is the time before the secure handshake. If this attribute is unavailable, undefined is returned. If this attribute is available but HTTPS is not used, 0 is returned.

Responsestart:

The time when the client receives the first byte of data returned from the server (or cached or local resources.

Responseend:

The time when the client receives the last byte of data returned from the server (or cached or local resources.

Domloading:

The time when the document object is created.

Dominteractive:

It refers to the time when the document Parsing is completed, including the blocked content loaded by the script tag in the "traditional mode" (except when the defer or async attribute is used for asynchronous loading ).

Domcontentloadedeventstart:

Before the domcontentloaded event is triggered, the browser completes the download and resolution of all scripts (including scripts with the defer attribute but async attribute not set.

Domcontentloadedeventend:

When the domcontentloaded event is completed. It is also the time when the domready event in the Javascript class library is triggered.

Domcomplete:

If there is no delayed loading event (loading of all images) to prevent the load event from occurring, the document. readystate attribute is set to "complete" at this time, which is domcomplete.

Loadeventstart:

This attribute returns the time when the load event occurred. If the load event has not yet occurred, 0 is returned.

Loadeventend:

This attribute returns the time point after the load event is completed. If the load event does not occur, 0 is returned.

Check the method by which the user comes to this page:

There are several ways to open a page. For example, enter a URL in the address bar, refresh the current page, and use history to move forward and backward. In this case, performance. navigation is useful. This API has two attributes:

• Redirectcount: number of page requests redirected
• Type: How the page is loaded.

The following lists three values of the type attribute:

• 0: you can click a link or enter a URL in the address bar of your browser to enter the page.
• 1: Page overloading.
• 2: Enter the page through the browser history forward or backward.

Eg: You passTo enter the page.

Real-time page performance test:

Through the navigation timing API, we can accurately and in real time obtain the page loading speed of real users in the actual network environment, instead of simply testing the page loading speed in the development environment and company network.

Page Performance Statistics:

We can even use xhr to send the performance. Timing data of users every time they browse the Web page to the server. This method is real-time, but the efficiency is relatively low. Alternatively, you can use local storage to store user page performance data locally and periodically package the data to the server for analysis. In this way, the navigation timing API implements a simple method to provide historical page performance data.

Appendix:

1. 2012.03.01: Kasia wrote a very good data visualization bookmarks.

2. Another chrome plug-in.

 

 

Source Document from: http://www.html5rocks.com/en/tutorials/webperformance/basics.

Refer:

1. W3 official navigation timing draft
2. Msdn navigation timing documentation

 

This work is licensed using the knowledge sharing signature-non-commercial use of the 3.0 mainland China license agreement.