Resource Timing Buffer

The Resource Timing buffer controls how many resource timing entries the browser retains for inspection through the Performance API. Frontend code can increase the buffer when monitoring pages with many resource loads so entries are less likely to be dropped before they are read.

Resource Timing records performance information about resources such as scripts, stylesheets, images, and fetch requests. These entries are exposed through the browser's Performance API, commonly via `performance.getEntriesByType("resource")` or related methods.

The browser maintains a finite resource timing buffer. `performance.setResourceTimingBufferSize(size)` requests a new buffer capacity, allowing more resource timing entries to be retained. The API affects the number of entries that can be stored; it does not make individual network requests faster.

When the buffer becomes full, new resource timing entries may not be added. Code that needs to observe a long-lived page or a large number of resources should therefore consider increasing the capacity early or consuming entries as appropriate.

The `resourcetimingbufferfull` event can notify code that the resource timing buffer has reached capacity. `performance.clearResourceTimings()` removes the currently stored resource timing entries, which can free capacity for later measurements.

Key points

• Resource Timing entries describe performance characteristics of loaded resources.
• `setResourceTimingBufferSize()` controls the requested capacity of the resource timing buffer.
• A full buffer can prevent additional resource timing entries from being retained.
• `resourcetimingbufferfull` can signal that the buffer has reached capacity.
• `clearResourceTimings()` removes stored resource timing entries.

Interview questions

What is the Resource Timing buffer used for?

It is the browser-managed capacity for retaining Resource Timing entries. Those entries contain performance information about resources loaded by a page. JavaScript can inspect them through the Performance API. The buffer matters because a page that loads many resources can otherwise run out of space for additional entries.

How would you increase the Resource Timing buffer?

Call `performance.setResourceTimingBufferSize()` with the desired capacity. For example, `performance.setResourceTimingBufferSize(500)` requests capacity for 500 resource timing entries. This is useful when performance instrumentation needs to retain measurements from pages with many resource loads. It changes retention capacity rather than network behavior.

What should you do if the Resource Timing buffer becomes full?

Instrumentation can listen for the `resourcetimingbufferfull` event to detect that the buffer has reached capacity. If older measurements are no longer needed, `performance.clearResourceTimings()` can remove the retained entries. Code can also request a larger buffer when appropriate. The right approach depends on whether the application needs historical measurements or only recent data.

Why might a performance-monitoring application increase the Resource Timing buffer early?

A long-lived application can accumulate resource timing entries as it dynamically loads scripts, images, styles, and other resources. If the buffer reaches capacity before instrumentation processes or clears entries, later measurements may not be retained. Increasing capacity early reduces the chance of losing measurements during high resource activity. A production design should still consider periodic collection and clearing rather than relying on an indefinitely large buffer.

Does increasing the Resource Timing buffer make resource loading faster?

No. The buffer controls how many timing entries are retained for inspection. It does not change the browser's network scheduling or the underlying resource request. Increasing it is a measurement and observability decision. Its benefit is preserving more performance data for analysis.