Navigation Timing

This article is in need of a technical review.

The Navigation Timing API provides data that can be used to measure the performance of a website. Unlike other JavaScript-based mechanisms that have been for the same purpose this API can provide end-to-end latency data that can be more useful and accurate.

The following example shows how you can measure the perceived loading time:

function onLoad() { 
  var now = new Date().getTime();
  var page_load_time = now - performance.timing.navigationStart;
  console.log("User-perceived page loading time: " + page_load_time);
}

There are many measured events given in milliseconds that can be accessed through the PerformanceTiming interface. The list of events in order of occurrance are:

  • navigationStart
  • unloadEventStart
  • unloadEventEnd
  • redirectStart
  • redirectEnd
  • fetchStart
  • domainLookupStart
  • domainLookupEnd
  • connectStart
  • connectEnd
  • secureConnectionStart
  • requestStart
  • responseStart
  • responseEnd
  • domLoading
  • domInteractive
  • domContentLoadedEventStart
  • domContentLoadedEventEnd
  • domComplete
  • loadEventStart
  • loadEventEnd

The window.performance.navigation object stores two attributes that can be used to know if a page load is triggered by a redirect, back/forward button or normal URL load.

window.performance.navigation.type:

Constant Value Description
TYPE_NAVIGATENEXT 0 Navigation started by clicking on a link, or entering the URL in the user agent's address bar, or form submission, or initializing through a script operation other than the ones used by TYPE_RELOAD and TYPE_BACK_FORWARD as listed below.
TYPE_RELOAD 1 Navigation through the reload operation or the location.reload() method.
TYPE_BACK_FORWARD 2 Navigation through a history traversal operation.
TYPE_UNDEFINED 255 Any navigation types not defined by values above.

window.performance.navigation.redirectCount will indicate how many redirects have taken place until the final page has been reached, if any.

The Navigation Timing API can be used to gather performance data on the client side to be sent to a server via XHR as well as measure data that was very difficult to measure by other means such as time to unload a previous page, domain look up time, window.onload total time, etc.

Examples

Calculate the total time required to load a page:

var perfData = window.performance.timing; 
var pageLoadTime = perfData.loadEventEnd - perfData.navigationStart;

Calculate request response times:

var connectTime = perfData.responseEnd - perfData.requestStart;

Links

Browser compatibility

Feature Chrome** Firefox (Gecko)* Internet Explorer Opera* Safari (WebKit)
Basic support

6

7

 

9 15 Not supported
Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Basic support 4.0 15.0 ? ? ?

 

Document Tags and Contributors

Last updated by: teoli,