Navigation Timing API
Learning about the Navigation Timing API is surprisingly similar to learning “how the Internet works.” In fact, if I was asked to sketch “how the Internet works” as a job interview question, I’d probably draw a timeline of events pretty similar to this:
Image: W3C Navigation Timing
Which, of course, is how the Navigation Timing API views the world, too.
The Navigation Timing API is an API that tracks navigation and page load timing. It’s especially useful for gathering information about the wait time perceived by the end user. Timestamps from along the page-load timeline (see diagram above) are stored in an object in the browser window,
window.performance.timing. Doing some simple math using those timestamps can reveal the wait times hidden in parts of the process between clicking a link and seeing the fully-loaded page.
navigationStart timestamp is collected the moment that the previous document is unloaded and the new page fetch begins. The browser looks in the cache, does a DNS lookup if it can’t find an entry, connects to the identified server, sends a request, receives the response (in bytes), and then processes the response into the fully-loaded page. All of these steps, and the transitions between them, are identified by events fired off by the browser. The Navigation Timing API notes these events and stores them as start and end times inside
The Navigation Timing API ends with the window’s
load event, which fires when the DOM is complete and all images, scripts and links have loaded. However, many webpages continue to fire off AJAX calls after the page has loaded. AJAX calls might even replace additional page loads, as in the case of single-page apps where the full page loads only once.