PerformanceFrameTiming

This is an experimental technology
Check the Browser compatibility table carefully before using this in production.

PerformanceFrameTiming is an abstract interface that provides frame timing data about the browser's event loop. A frame represents the amount of work a browser does in one event loop such as processing DOM events, resizing, scrolling, rendering, CSS animations, etc.. A frame rate of 60fps (frames per second) for a 60Hz refresh rate is the target for a good responsive user experience. This means the browser should process a frame in about 16.7ms.

An application can register a PerformanceObserver for "frame" performance entry types and the observer can retrieve data about the duration of each frame event. This information can be used to help identify areas that take too long to provide a good user experience.

  <div id="interfaceDiagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveAspectRatio="xMinYMin meet"><a xlink:href="https://developer.mozilla.org/en-US/docs/Web/API/PerformanceFrameTiming" target="_top"><rect x="1" y="1" width="220" height="50" fill="#F4F7F8" stroke="#D4DDE4" stroke-width="2px" /><text  x="111" y="30" font-size="12px" font-family="Consolas,Monaco,Andale Mono,monospace" fill="#4D4E53" text-anchor="middle" alignment-baseline="middle">PerformanceFrameTiming</text></a></svg></div>

  a:hover text { fill: #0095DD; pointer-events: all;}

Properties

This interface has no properties but it extends the following PerformanceEntry properties (for "frame" performance entry types) by qualifying and constraining the properties as follows:

PerformanceEntry.entryType: Returns "frame".
PerformanceEntry.name: Returns the document's address.
PerformanceEntry.startTime: Returns the timestamp when the frame was started.
PerformanceEntry.duration: Returns a timestamp indicating the difference between the startTimes of two successive frames.

Methods

This interface has no methods.

Example

See the example in Using the Frame Timing API.

Specifications

Specification	Status	Comment
Frame Timing The definition of 'PerformanceFrameTiming' in that specification.	Draft	Initial definition.

Browser compatibility

Update compatibility data on GitHub

	Desktop						Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
`PerformanceFrameTiming` Experimental	Chrome No support No Notes No support No Notes Notes See Chrome bug 120796	Edge ?	Firefox No support No Notes No support No Notes Notes See bug 1158032	IE No support No	Opera No support No	Safari No support No	WebView Android No support No Notes No support No Notes Notes See Chrome bug 120796	Chrome Android No support No Notes No support No Notes Notes See Chrome bug 120796	Firefox Android No support No	Opera Android No support No	Safari iOS No support No	Samsung Internet Android ?

Legend

No support: No support
Compatibility unknown: Compatibility unknown
Experimental. Expect behavior to change in the future.: Experimental. Expect behavior to change in the future.
See implementation notes.: See implementation notes.