Performance Timing

There are times when it’s good to have a sense of how long your code takes to execute. Maybe you’re troubleshooting performance or you’re concerned that parts of your code are not as fast as they could be.

The User Timing API allows for custom logging of activity in your page. It also provides a series of predefined events that we can measure against.

The basic tools that we get from the User Timing API provide two tools we can use to measure performance

performance.mark gives us a way to indicate when an event has started or finished

performance.measure creates a result between two given marks

Different APIs and specifications give you different performance events that you can capture and use as starting points for measurements.

domLoading fires the browser is about to start parsing the first received bytes of the HTML document

domInteractive triggers when the browser has finished parsing all of the HTML and DOM construction is complete

domContentLoaded marks the point when both the DOM is ready and there are no stylesheets that are blocking JavaScript execution – we may be able to construct the render tree.

Many JavaScript frameworks wait for this event before they start executing their own logic. For this reason, the browser captures the EventStart and EventEnd timestamps to allow us to track how long this execution took.

domComplete indicates all of the processing is complete and all of the resources on the page (images, etc.) have finished downloading

loadEvent as the final step in every page load the browser fires an onload event that can trigger additional application logic

The HTML specification dictates specific conditions for each and every event: when it should be fired, which conditions should be met, and so on. We’ll focus on a few key milestones related to the critical rendering path:

domInteractive marks when DOM is ready

domContentLoaded typically marks when both the DOM and CSSOM are done loading

If there is no parser blocking JavaScript then DOMContentLoaded will fire immediately after domInteractive

domComplete marks when the page and all of its subresources are ready.

The image below illustrates some of the events available and at what point in the load process they happen.