User Timing API

The User Timing API lets frontend applications record custom timestamps and durations for application-defined work. Its main tools, `performance.mark()` and `performance.measure()`, help you inspect how long specific operations take.

`performance.mark()` creates a named timestamp in the browser's performance timeline. You can place marks before and after an operation, such as rendering, data processing, or an asynchronous workflow.

`performance.measure()` creates a duration between marks, or between a mark and a suitable performance-timeline boundary. The resulting measurement can be inspected with `performance.getEntriesByType("measure")` or related Performance API methods.

User Timing is useful because browser-provided metrics do not describe every application-specific operation. For example, you can measure how long a component's initialization, data transformation, or client-side interaction takes without manually calculating timestamps.

Performance entries can also be observed with `PerformanceObserver`, which is useful when instrumentation should react to newly created entries. User Timing measures are diagnostic instrumentation; they do not themselves optimize the code being measured.

Key points

• `performance.mark()` records a named point in the performance timeline.
• `performance.measure()` records a duration between timing points.
• Use meaningful mark names to make measurements easy to interpret.
• Inspect entries with `performance.getEntriesByType()` or observe them with `PerformanceObserver`.
• User Timing measures application-specific work rather than replacing browser performance metrics.

Interview questions

How would you inspect a custom performance measurement?

You can retrieve performance entries using methods such as `performance.getEntriesByType()` or `performance.getEntriesByName()`. For example, a measure entry has a `duration` value that represents the measured interval. If the application needs to react to entries as they are produced, `PerformanceObserver` can be used.

What is the User Timing API used for?

It lets an application add its own performance instrumentation to the browser's performance timeline. You can mark important points in application code and measure the duration between them. This is useful for investigating work that browser-generated metrics do not describe directly.

What is the difference between `performance.mark()` and `performance.measure()`?

`performance.mark()` creates a named timing point. `performance.measure()` creates a duration entry based on timing points or supported timing boundaries. A common pattern is to place two marks around an operation and then measure between them.

Why use User Timing instead of manually subtracting two timestamps?

Manual timestamp subtraction can work, but User Timing gives the measurement a named entry in the browser's performance timeline. That makes the instrumentation easier to inspect alongside other performance entries and tools. It also provides a standard mechanism for observing and querying custom performance data.