Web API Cookbook

Chapter 15. Measuring Performance

Introduction

There are many third-party tools for measuring performance in a JavaScript app, but the browser also has some handy tools built in for capturing performance metrics.

The Navigation Timing API is used to capture performance data about the initial page load. You can inspect how long the page took to load, how long it took for the DOM to become interactive, and more. It returns a set of timestamps that indicate when each event happened during the page load.

The Resource Timing API lets you inspect how long it took to download resources and make network requests. This covers page resources such as HTML files, CSS files, JavaScript files, and images. It also covers asynchronous requests such as those made with the Fetch API.

The User Timing API is a way to calculate the elapsed time of arbitrary operations. You can create performance marks, which are points in time, and measures, which are calculated durations between marks.

All of these APIs create performance entries in a buffer on the page. This is a single collection of all types of performance entries. You can inspect this buffer at any time, and you can also use PerformanceObserver to listen asynchronously for new performance entries to be added.

Performance entries use high-precision timestamps. Time is measured in milliseconds, but can also contain fractional portions that, in some browsers, can have microsecond accuracy. In the browser, these timestamps are stored as DOMHighResTimeStamp ...