This is an experimental technologyCheck 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 thestartTime
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 |
Frame TimingThe definition of 'PerformanceFrameTiming' in that specification. | Draft | Initial definition. |
Browser compatibility
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Update compatibility data on GitHub
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
|
Chrome No support No No support No Notes' See Chrome bug 120796 |
Edge No support No No support No Notes' See Chrome bug 120796 |
Firefox No support No No support No Notes' See bug 1158032 |
IE
No support No |
Opera
No support No |
Safari
No support No |
WebView Android No support No No support No Notes' See Chrome bug 120796 |
Chrome Android No support No No support No Notes' See Chrome bug 120796 |
Firefox Android
No support No |
Opera Android
No support No |
Safari iOS
No support No |
Samsung Internet Android No support No No support No Notes' See Chrome bug 120796 |
Legend
- No support
- No support
- Experimental. Expect behavior to change in the future.'
- Experimental. Expect behavior to change in the future.
- See implementation notes.'
- See implementation notes.
See also
PerformanceObserver
- Frame Rate (Firefox Performance Tool)
- Frame Timing (Overview)
- Using the Frame Timing API
PerformanceFrameTiming by Mozilla Contributors is licensed under CC-BY-SA 2.5.