The Performance object

Performance indicators use Performance objects. You can obtain Performance from window. Performance.

Performance Can obtain Performance data (Timing) and memory data. Only the performance. Timing attribute is covered here; see links below for other apis.

Here’s a look at the meaning of each property in the order it’s triggered.

1. prompt for unloadLast page unloaded

  • navigationStart: Previous web page (not necessarily codomain with current page) in the same browser contextunloadTime stamp, if no previous page unload, withfetchStartValues are equal
  • unloadEventStart: Previous page (same domain as current page)unload Time stamp if there is no previous pageunloadOr if the previous page is in a different field than the current page, the value is 0
  • unloadEventEndAnd:unloadEventStartCorrespondingly, return to the previous pageunloadThe timestamp at which the event-bound callback function completes execution

2. The redirection

  • redirectStart: The time when the first HTTP redirect occurs. The value is 0 only when there is a redirect within the same domain name
  • redirectEnd: The time when the last HTTP redirect is complete. The value is 0 only when there is a redirect within the same domain name
  • fetchStart: The time when the browser is ready to grab the document using an HTTP request, before checking the local cache

3. The DNS

  • domainLookupStart: Indicates the time when DNS domain name query starts. If local cache (no DNS query is used) or persistent connection is used, the value is equal tofetchStartValues are equal
  • domainLookupEnd: Indicates the time when DNS domain name query is completed. If local cache (no DNS query is performed) or persistent connection is used, the value is equal tofetchStartValues are equal

4. TCP three-way handshake

  • connectStart: Indicates the time when the HTTP (TCP) connection is established. If the connection is persistent, the value is set tofetchStartIf an error occurred at the transport layer and the connection was re-established, the time at which the newly established connection was started is displayed
  • connectEnd: HTTP (TCP) Time when the connection is established (the handshake is completed), or if the connection is persistentfetchStartIf an error occurred at the transport layer and the connection was re-established, this displays the time when the newly established connection was completed
  • secureConnectionStart: Time when the HTTPS connection starts. If the connection is not secure, the value is 0

5. Request data

  • requestStart: The time when the HTTP request started reading the real document (the connection was completed), including reading from the local cache, and the time when the new connection was established if the connection error was reconnected
  • responseStart: The time when THE HTTP starts receiving the response (the first byte is fetched), including reading from the local cache
  • responseEnd: The time when the HTTP response is fully received (fetched to the last byte), including reading from the local cache

6. processing, JS execution, DOM parsing rendering

  • domLoading: The time to start parsing the render DOM treeDocument.readyStateintoloadingAnd will throwreadystatechangeRelated events
  • domInteractive: Time to finish parsing the DOM tree,Document.readyStateintointeractiveAnd will throwreadystatechangeRelated events
  • domContentLoadedEventStart: The time when a document occurs after DOM parsing is complete and the load of resources within the web page beginsDOMContentLoadedTime of event
  • domContentLoadedEventEnd: After DOM parsing is completed, the loading time of resources in the web page is completed (such as the loading and execution of JS scripts), and the time of documentsDOMContentLoadedThe end time of the event
  • domComplete: the time when the DOM tree is parsed and the resources are ready,Document.readyStateintocompleteAnd will throwreadystatechangeRelated events

7. loadEvents began to

  • loadEventStart:loadThe event is sent to the document, i.eloadThe time when the callback function starts executing, if no bindingloadEvent with a value of 0
  • loadEventEnd:loadEvent when the callback function completes execution, if no bindingloadEvent with a value of 0

If you look at the above properties, you might feel a bit familiar with the usual “what happens when a browser enters a URL” question, but Performance gets the timing right.

Ii. Calculation of performance indicators

Performance indicators include:

  1. DNS Connection Time
  2. TCP Connection Time
  3. Backend response time
  4. HTML page download time
  5. DOM time
  6. First loading time
  7. A full page time-consuming
  8. Parsing the DOM tree takes time

They are calculated as follows:

TimeOrigin = performance. Wx. TimeOrigin | | performance. The timing. FetchStart 1. The DNS connection time: domainLookupEnd - domainLookupStart; 2. TCP connection time: connectEnd - connectStart. ResponseStart (); DOM (); DOM (); domContentLoadedEventStart - responseEnd 6. First screen time (initial loading time) : domloading-timeOrigin 7. Home Time (Whole page Time) : loadEventEnd - timeOrigin 8. Parsing DOM tree takes time: domcomplete-dominteractiveCopy the code

Performance. The timing will be abandoned, instead PerformanceNavigationTiming, most of the API is the same, only the latter replaced by relative time, the former is a timestamp, namely, the absolute time.

Try the following code:

function showNavigationDetails() {
  // Get the first entry
  const [entry] = performance.getEntriesByType("navigation");
  // Show it in a nice table in the developer console
  console.table(entry.toJSON());
}
showNavigationDetails();
Copy the code

3. Related issues

1. For single-page applications like Vue, will the page load after route jump be calculated separately?

Don’t. Route jumps do not trigger an unload event. In addition, the experiment also found that the domloing and fetchStart times of performance printed on the page after the jump were the same as those on the previous page.

Therefore, the optimization of the page after the jump does not affect the time of the first screen, such as the means of pre-loading the secondary page.

2. Do the first screen time of different tools differ?

It’s very common. There are many ways to calculate the first screen time. Some people use navigationStart, while others loadEventStart, and others distinguish SSR and SPA apps.

The first screen time refers to the time consumed by the browser to display the first screen page, including DNS resolution time, TCP handshake time, resource loading time, DOM parsing time, etc. Any indicator that can contain these times can be used. After all, in use, it is more about horizontal and vertical comparison than comparison of indicator data itself.

3. How to reduce the first screen time?

From the concept of the first screen and the stages it contains, you can reduce the first screen time by reducing the number of steps involved.

Common methods include:

  • Lazy loading of images and JS, loading on demand
  • Use CDN resources
  • File compression and merging
  • Using http2
  • Use the cache

Iv. Relevant materials

  1. MDN-Performance
  2. W3C Editor’s Draft
  3. Performance – Front-end Performance monitoring tool
  4. Performance Optimization (Tools & apis)
  5. JS: Performance
  6. Front-end optimization – How to calculate white screen and first screen time
  7. Optimized front screen
  8. Front-end Performance {Performance}