---
title: Performance API
slug: Web/API/Performance_API
tags:
  - NeedsContent
  - Web パフォーマンス
  - ガイド
  - パフォーマンス
  - 概要
translation_of: Web/API/Performance_API
---
<div>{{DefaultAPISidebar("High Resolution Time")}}</div>

<p><strong>High Resolution Time</strong> 規格は、アプリケーション内でクライアント側の待ち時間測定をサポートする {{domxref("Performance")}} インターフェイスを定義しています。{{domxref("Performance")}} インターフェイスは 1000 分の 1 ミリ秒の精度であるため、高解像度と見なされます (ハードウェアまたはソフトウェアの制約を受けます)。これらのインターフェイスは、フレームレートの計算 (アニメーションでは潜在的に重要) やベンチマーク (リソースのロード時間など) を含む、さまざまな使用例をサポートしています。</p>

<p>Since a platform's <em>system clock</em> is subject to various <em>skews</em> (such as NTP adjustments), the interfaces support a <em>monotonic clock</em> i.e. a clock that is always increasing. As such, the <code>Performance</code> API defines a {{domxref("DOMHighResTimeStamp")}} type rather than using the {{jsxref("Date.now","Date.now()")}} interface.</p>

<h2 id="DOMHighResTimeStamp">DOMHighResTimeStamp</h2>

<p>The {{domxref("DOMHighResTimeStamp")}} type, as its name implies, represents a high resolution point in time. This type is a <code>double</code> and is used by the performance interfaces. The value could be a discrete point in time or the difference in time between two discrete points in time.</p>

<p>The unit of <code>DOMHighResTimeStamp</code> is milliseconds and should be accurate to 5 µs (microseconds). However, If the browser is unable to provide a time value accurate to 5 microseconds (because, for example, due to hardware or software constraints), the browser can represent a the value as a time in milliseconds accurate to a millisecond.</p>

<h2 id="メソッド">メソッド</h2>

<p>The <code>{{domxref("Performance")}}</code> interface has two methods. The {{domxref("Performance.now","now()")}} method returns a {{domxref("DOMHighResTimeStamp")}} whose value that depends on the {{domxref("PerformanceTiming.navigationStart","navigation start")}} and scope. If the scope is a window, the value is the time the browser context was created and if the scope is a {{domxref("Worker","worker")}}, the value is the time the worker was created.</p>

<p>The {{domxref("Performance.toJSON","toJSON()")}} method returns a serialization of the {{domxref("Performance")}} object, for those attributes that can be serialized.</p>

<h2 id="プロパティ">プロパティ</h2>

<p>The <code>{{domxref("Performance")}}</code> interface has two properties. The {{domxref("Performance.timing","timing")}} property returns a {{domxref("PerformanceTiming")}} object containing latency-related performance information such as the start of navigation time, start and end times for redirects, start and end times for responses, etc.</p>

<p>The <code>{{domxref("Performance.navigation","navigation")}}</code> property returns a {{domxref("PerformanceNavigation")}} object representing the type of navigation that occurs in the given browsing context, such as the page was navigated to from history, the page was navigated to by following a link, etc.</p>

<h2 id="インターフェイス">インターフェイス</h2>

<dl>
 <dt>{{domxref('Performance')}}</dt>
 <dd>Provides methods and properties containing timing-related performance information for the given page.</dd>
 <dt>{{domxref('PerformanceEntry')}}</dt>
 <dd>Provides methods and properties the encapsulate a single performance metric that is part of the performance timeline.</dd>
 <dt>{{domxref('PerformanceFrameTiming')}}</dt>
 <dd>Provides methods and properties containing frame timing data about the browser's event loop.</dd>
 <dt>{{domxref('PerformanceMark')}}</dt>
 <dd>An abstract interface for <a href="https://developer.mozilla.org/en-US/docs/Web/API/PerformanceEntry" title="The PerformanceEntry object encapsulates a single performance metric that is part of the performance timeline. A performance entry can be directly created by making a performance mark or measure (for example by calling the mark() method) at an explicit point in an application. Performance entries are also created in indirect ways such as loading a resource (such as an image)."><code>performance entries</code></a> with an <a href="https://developer.mozilla.org/en-US/docs/Web/API/PerformanceEntry/entryType" title="The entryType property returns the performance entry's type. The valid entryType values are:"><code>entry type</code></a> of "<code>mark</code>". Entries of this type are created by calling <a href="https://developer.mozilla.org/en-US/docs/Web/API/Performance/mark" title="The mark() method creates a timestamp in the browser's performance entry buffer with the given name. The application defined timestamp can be retrieved by one of the Performance interface's getEntries*() methods (getEntries(), getEntriesByName() or getEntriesByType())."><code>performance.mark()</code></a> to add a named <a href="https://developer.mozilla.org/en-US/docs/Web/API/DOMHighResTimeStamp" title="The DOMHighResTimeStamp type is a double and is used to store a time value. The value could be a discrete point in time or the difference in time between two discrete points in time. The unit is milliseconds and should be accurate to 5 µs (microseconds). However, if the browser is unable to provide a time value accurate to 5 microseconds (due, for example, to hardware or software constraints), the browser can represent the value as a time in milliseconds accurate to a millisecond."><code>DOMHighResTimeStamp</code></a> (the mark) to the browser's performance timeline.</dd>
 <dt>{{domxref('PerformanceMeasure')}}</dt>
 <dd>An abstract interface for <a href="https://developer.mozilla.org/en-US/docs/Web/API/PerformanceEntry" title="The PerformanceEntry object encapsulates a single performance metric that is part of the performance timeline. A performance entry can be directly created by making a performance mark or measure (for example by calling the mark() method) at an explicit point in an application. Performance entries are also created in indirect ways such as loading a resource (such as an image)."><code>performance entries</code></a> with an <a href="https://developer.mozilla.org/en-US/docs/Web/API/PerformanceEntry/entryType" title="The entryType property returns the performance entry's type. The valid entryType values are:"><code>entry type</code></a> of "<code>measure</code>". Entries of this type are created by calling <a href="https://developer.mozilla.org/en-US/docs/Web/API/Performance/measure" title="The measure() method creates a named timestamp in the browser's performance entry buffer between two specified marks (known as the start mark and end mark, respectively). The named timestamp is referred to as a measure."><code>performance.measure()</code></a> to add a named<a href="https://developer.mozilla.org/en-US/docs/Web/API/DOMHighResTimeStamp" title="The DOMHighResTimeStamp type is a double and is used to store a time value. The value could be a discrete point in time or the difference in time between two discrete points in time. The unit is milliseconds and should be accurate to 5 µs (microseconds). However, if the browser is unable to provide a time value accurate to 5 microseconds (due, for example, to hardware or software constraints), the browser can represent the value as a time in milliseconds accurate to a millisecond."><code>DOMHighResTimeStamp</code></a> (the measure) between two marks to the browser's performance timeline.</dd>
 <dt>{{domxref('PerformanceNavigationTiming')}}</dt>
 <dd>Provides methods and properties to store and retrieve <a href="https://developer.mozilla.org/en-US/docs/Web/API/DOMHighResTimeStamp" title="The DOMHighResTimeStamp type is a double and is used to store a time value. The value could be a discrete point in time or the difference in time between two discrete points in time. The unit is milliseconds and should be accurate to 5 µs (microseconds). However, if the browser is unable to provide a time value accurate to 5 microseconds (due, for example, to hardware or software constraints), the browser can represent the value as a time in milliseconds accurate to a millisecond."><code>high resolution timestamps</code></a> or metrics regarding the browser's document navigation events. </dd>
 <dt>{{domxref('PerformanceObserver')}}</dt>
 <dd>Provides methods and properties used to observe performance measurement events and be notified of new <a href="https://developer.mozilla.org/en-US/docs/Web/API/PerformanceEntry" title="The PerformanceEntry object encapsulates a single performance metric that is part of the performance timeline. A performance entry can be directly created by making a performance mark or measure (for example by calling the mark() method) at an explicit point in an application. Performance entries are also created in indirect ways such as loading a resource (such as an image).">performance entries</a> as they are recorded in the browser's performance timeline.</dd>
 <dt>{{domxref('PerformanceResourceTiming')}}</dt>
 <dd>Provides methods and properties for retrieving and analyzing detailed network timing data regarding the loading of an application's resources.</dd>
</dl>

<h2 id="仕様">仕様</h2>

<table class="standard-table">
 <tbody>
  <tr>
   <th scope="col">仕様書</th>
   <th scope="col">ステータス</th>
   <th scope="col">コメント</th>
  </tr>
  <tr>
   <td>{{SpecName('Highres Time')}}</td>
   <td>{{Spec2('Highres Time')}}</td>
   <td>Initial definition.</td>
  </tr>
  <tr>
   <td>{{SpecName('Highres Time Level 2')}}</td>
   <td>{{Spec2('Highres Time Level 2')}}</td>
   <td>Adds <code>performance</code> attribute on <code>Window</code> and <code>WorkerGlobalScope</code>.</td>
  </tr>
  <tr>
   <td>{{SpecName('Highres Time Level 3')}}</td>
   <td>{{Spec2('Highres Time Level 3')}}</td>
   <td>Add <code>timeOrigin</code> property to <code>Performance</code> interface.</td>
  </tr>
  <tr>
   <td>{{SpecName('Frame Timing')}}</td>
   <td>{{Spec2('Frame Timing')}}</td>
   <td>Adds <code>PerformanceFrameTiming</code> interface.</td>
  </tr>
  <tr>
   <td>{{SpecName('Navigation Timing')}}</td>
   <td>{{Spec2('Navigation Timing')}}</td>
   <td>Adds the <code>PerformanceTiming</code> and <code>PerformanceNavigation</code> interfaces. Adds <code>timing</code> and <code>navigation</code> properties to the <code>Performance</code> interface.</td>
  </tr>
  <tr>
   <td>{{SpecName('Navigation Timing Level 2')}}</td>
   <td>{{Spec2('Navigation Timing Level 2')}}</td>
   <td>Adds the <code>PerformanceNavigationTiming</code> interface. Obsolete's the the <code>PerformanceTiming</code> interface, the <code>PerformanceNavigation</code> interface, as well as the <code>timing</code> and <code>navigation</code> properties to the <code>Performance</code> interface.</td>
  </tr>
  <tr>
   <td>{{SpecName('Performance Timeline')}}</td>
   <td>{{Spec2('Performance Timeline')}}</td>
   <td>Adds the <code>PerformanceEntry</code> interface, the <code>PerformanceEntryList</code> type, as well as the <code>getEntries()</code>, <code>getEntriesByType()</code>, and <code>getEntriesByName()</code> methods on the <code>Performance</code> interface.</td>
  </tr>
  <tr>
   <td>{{SpecName('Performance Timeline Level 2')}}</td>
   <td>{{Spec2('Performance Timeline Level 2')}}</td>
   <td>Adds serializer to the <code>PerformanceEntry</code> interface as well as adding the <code>PerformanceObserver</code> interface and callback</td>
  </tr>
  <tr>
   <td>{{SpecName('Resource Timing')}}</td>
   <td>{{Spec2('Resource Timing')}}</td>
   <td>Adds the <code>PerformanceResourceTiming</code> interface. Adds the <code>clearResourceTimings()</code> method, the <code>setResourceTimingBufferSize()</code> method, and the <code>onresourcetimingbufferfull</code> event handler to the <code>Performance</code> interface. Also adds the <code>Timing-Allow-Origin</code> response header.</td>
  </tr>
  <tr>
   <td>{{SpecName('Resource Timing 2')}}</td>
   <td>{{Spec2('Resource Timing 2')}}</td>
   <td>Adds the <code>nextHopProtocol</code>, <code>workerStart</code>, <code>transferSize</code>, <code>encodedBodySize</code>, and <code>decodedBodySize</code> properties to the <code>PerformanceResourceTiming</code> interface. </td>
  </tr>
  <tr>
   <td>{{SpecName('Resource Timing 3')}}</td>
   <td>{{Spec2('Resource Timing 3')}}</td>
   <td> </td>
  </tr>
  <tr>
   <td>{{SpecName('User Timing')}}</td>
   <td>{{Spec2('User Timing')}}</td>
   <td>Adds <code>mark()</code>, <code>clearMarks()</code>, <code>measure()</code> and <code>clearMeasures()</code> methods to the <code>Performance</code> interface. Adds the <code>PerformanceMark</code> and <code>PeformanceMeasure</code> interfaces.</td>
  </tr>
  <tr>
   <td>{{SpecName('User Timing Level 2')}}</td>
   <td>{{Spec2('User Timing Level 2')}}</td>
   <td> </td>
  </tr>
 </tbody>
</table>

<h2 id="実装状況">実装状況</h2>

<p>As shown in the {{domxref("Performance")}} interface's <a href="/Web/API/Performance#Browser_compatibility">Browser Compatibility</a> table, most of these interfaces are broadly implemented by desktop browsers.</p>

<p>To test your browser's support for the {{domxref("Performance")}} interface, run the <code><a href="http://mdn.github.io/web-performance/perf-api-support.html">perf-api-support</a></code> application.</p>

<h2 id="あわせて参照">あわせて参照</h2>

<ul>
 <li><a href="http://w3c.github.io/perf-timing-primer/">A Primer for Web Performance Timing APIs</a></li>
</ul>