Please note, this is a STATIC archive of website developer.mozilla.org from 03 Nov 2016, cach3.com does not collect or store any user information, there is no "phishing" involved.

Revision 976251 of PerformanceFrameTiming

  • Revision slug: Web/API/PerformanceFrameTiming
  • Revision title: PerformanceFrameTiming
  • Revision id: 976251
  • Created:
  • Creator: AFBarstow
  • Is current revision? No
  • Comment Bug fix

Revision Content

{{APIRef("Frame Timing API")}}{{SeeCompatTable}}

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 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
{{SpecName('Frame Timing', '#performancereframetiming', 'PerformanceFrameTiming')}} {{Spec2('Frame Timing')}} Initial definition.

Browser compatibility

{{CompatibilityTable}}
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

Revision Source

<div>{{APIRef("Frame Timing API")}}{{SeeCompatTable}}</div>

<p>The <strong><code>PerformanceFrameTiming</code></strong> interface provides <em>frame</em> timing data about the browser's event loop. A <em>frame</em> represents the amount of work a browser does in <a href="https://html.spec.whatwg.org/multipage/webappapis.html#processing-model-8">one event loop</a> such as processing DOM events, resizing, scrolling, rendering, CSS animations, etc. A <em>frame rate</em> of 60fps (frames per second) for a 60Hz refresh rate is the target for a good <em>responsive</em> user experience. This means the browser should process a frame in about 16.7ms.</p>

<p>An application can register a {{domxref("PerformanceObserver")}} for "<code>frame</code>" {{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.</p>

<p class="note">The <code>PerformanceFrameTiming</code> interface has no properties, no methods nor any constructors. However, it qualifies and constrains the following {{domxref("PerformanceEntry")}} properties for "<code>frame</code>" {{domxref("PerformanceEntry.entryType","performance entry types")}}: {{domxref("PerformanceEntry.name","name")}}, {{domxref("PerformanceEntry.entryType","entryType")}}, {{domxref("PerformanceEntry.startTime","startTime")}} and {{domxref("PerformanceEntry.duration","duration")}}.</p>

<h2 id="Properties">Properties</h2>

<p>This interface extends the following {{domxref("PerformanceEntry")}} properties (for "<code>frame</code>" {{domxref ("PerformanceEntry.entryType","performance entry types")}}) by qualifying and constraining the properties as follows:</p>

<dl>
 <dt>{{domxref("PerformanceEntry.entryType")}}</dt>
 <dd>Set to "<code>frame</code>".</dd>
 <dt>{{domxref("PerformanceEntry.name")}}</dt>
 <dd>Set to the <a href="https://dom.spec.whatwg.org/#concept-document-url">document's address</a>.</dd>
 <dt>{{domxref("PerformanceEntry.startTime")}}</dt>
 <dd>Set to the {{domxref("DOMHighResTimeStamp","timestamp")}} when the frame was started.</dd>
 <dt>{{domxref("PerformanceEntry.duration")}}</dt>
 <dd>Set to a {{domxref("DOMHighResTimeStamp","timestamp")}} indicating the difference between the <code>startTime</code>s of two successive frames.</dd>
</dl>

<h2 id="Methods">Methods</h2>

<p>This interface has no methods.</p>

<h2 id="Example">Example</h2>

<p>See the example in <a href="/Web/API/Frame_Timing_API/Using_the_Frame_Timing_API">Using the Frame Timing API</a>.</p>

<h2 id="Specifications">Specifications</h2>

<table class="standard-table">
 <tbody>
  <tr>
   <th scope="col">Specification</th>
   <th scope="col">Status</th>
   <th scope="col">Comment</th>
  </tr>
  <tr>
   <td>{{SpecName('Frame Timing', '#performancereframetiming', 'PerformanceFrameTiming')}}</td>
   <td>{{Spec2('Frame Timing')}}</td>
   <td>Initial definition.</td>
  </tr>
 </tbody>
</table>

<h2 id="Browser_compatibility">Browser compatibility</h2>

<div>{{CompatibilityTable}}</div>

<div id="compat-desktop">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Feature</th>
   <th>Chrome</th>
   <th>Firefox (Gecko)</th>
   <th>Internet Explorer</th>
   <th>Opera</th>
   <th>Safari (WebKit)</th>
  </tr>
  <tr>
   <td><code>PerformanceFrameTiming</code></td>
   <td>{{CompatNo}}<sup>[1]</sup></td>
   <td>{{CompatNo}}<sup>[2]</sup></td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
  </tr>
 </tbody>
</table>
</div>

<div id="compat-mobile">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Feature</th>
   <th>Android</th>
   <th>Firefox Mobile (Gecko)</th>
   <th>Firefox OS</th>
   <th>IE Phone</th>
   <th>Opera Mobile</th>
   <th>Safari Mobile</th>
  </tr>
  <tr>
   <td><code>PerformanceFrameTiming</code></td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
  </tr>
 </tbody>
</table>
</div>

<p>[1] See <a href="https://code.google.com/p/chromium/issues/detail?id=120796">Chrome bug 120796</a>.</p>

<p>[2] See {{Bug("1158032")}}.</p>

<h2 id="See_also">See also</h2>

<ul>
 <li>{{domxref("PerformanceObserver")}}</li>
 <li><a href="/docs/Tools/Performance/Frame_rate">Frame Rate (Firefox Performance Tool)</a></li>
 <li><a href="/Web/API/Frame_Timing">Frame Timing (Overview)</a></li>
 <li><a href="/Web/API/Frame_Timing_API/Using_the_Frame_Timing_API">Using the Frame Timing API</a></li>
</ul>
Revert to this revision