javascriptapitimingnavigation-timing-api

Navigation Timing API events not firing in order


I'm using the Navigation Timing API to get load events from a page. I've added the snippet of JS below to output the information. One thing I noticed that was strange was that the loadEventEnd time came back sooner than the loadEventStart time when I check the console. I would think that shouldn't be possible.

var startTime = new Date().getTime();
// retrieve the performance object in a cross browser way. Check window.performance first.
window.performance = window.performance || window.mozPerformance || window.msPerformance || window.webkitPerformance || {};
var timing = window.performance.timing || {};
var navigation = window.performance.navigation || {};

// if the Navigation Timing API is supported
if (window.performance && window.performance.timing) {
    pageRequestStart = timing.requestStart;
    pageResponseStart = timing.responseStart;
    pageResponseEnd = timing.responseEnd;
    pageLoadEventStart = timing.loadEventStart;
    pageLoadEventEnd = timing.loadEventEnd;
    pageLoadTime = timing.navigationStart;
}
var timingOutput =
    "requestStart: " + pageRequestStart + "\n"
    + "responseStart: " + pageResponseStart + "\n"
    + "responseEnd: " + pageResponseEnd + "\n"
    + "loadEventStart: " + pageLoadEventStart + "\n"
    + "loadEventEnd: " + pageLoadEventEnd + "\n"
    + "navigationStart: " + pageLoadTime;
console.log(timingOutput);

Solution

  • While I'm not sure of the specifics of your case, the NavigationTiming APIs are fairly new to IE, Chrome, Firefox and Opera. During development of the specification and implementation in the browsers, many small bugs were seen similar to what you describe above due to various implementation differences between the browsers.

    It's likely the bug you saw has been fixed in recent browser versions. If you're still seeing the issue consistently on a browser you're running, you can try the W3C webperf test cases for NavigationTiming to see if anything fails.