The PerformanceFrameTiming
interface 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 {{domxref("PerformanceObserver")}} for "frame
" {{domxref("PerformanceEntry","performannce 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.
The PerformanceFrameTiming
interface has no properties, no methods nor any constructors. However, it qualifies and constrains the following {{domxref("PerformanceEntry")}} properties for "frame
" {{domxref("PerformanceEntry.entryType","performance entry types")}}: {{domxref("PerformanceEntry.name","name")}}, {{domxref("PerformanceEntry.entryType","entryType")}}, {{domxref("PerformanceEntry.startTime","startTime")}} and {{domxref("PerformanceEntry.duration","duration")}}.
Properties
This interface extends the following {{domxref("PerformanceEntry")}} properties (for "frame
" {{domxref ("PerformanceEntry.entryType","performance entry types")}}) by qualifying and constraining the properties as follows:
- {{domxref("PerformanceEntry.entryType")}}
- Set to "
frame
". - {{domxref("PerformanceEntry.name")}}
- Set to the document's address.
- {{domxref("PerformanceEntry.startTime")}}
- Set to the {{domxref("DOMHighResTimeStamp","timestamp")}} when the frame was started.
- {{domxref("PerformanceEntry.duration")}}
- Set to a {{domxref("DOMHighResTimeStamp","timestamp")}} indicating the difference between the
startTime
s of two successive frames.
Methods
This interface has no methods.
Example
See the example in Using the Frame Timing API.
Specifications
Specification | Status | Comment |
---|---|---|
{{SpecName('Frame Timing', '#performancereframetiming', 'PerformanceFrameTiming')}} | {{Spec2('Frame Timing')}} | Initial definition. |
Browser compatibility
Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
---|---|---|---|---|---|
PerformanceFrameTiming |
{{CompatNo}}[1] | {{CompatNo}}[2] | {{CompatNo}} | {{CompatNo}} | {{CompatNo}} |
Feature | Android | Firefox Mobile (Gecko) | Firefox OS | IE Phone | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|---|
PerformanceFrameTiming |
{{CompatNo}} | {{CompatNo}} | {{CompatNo}} | {{CompatNo}} | {{CompatNo}} | {{CompatNo}} |
[1] See Chrome bug 120796.
[2] See {{Bug("1158032")}}.
See also
- {{domxref("PerformanceObserver")}}
- Frame Rate (Firefox Performance Tool)
- Frame Timing (Overview)
- Using the Frame Timing API