---
title: Performance API
slug: Web/API/Performance_API
tags:
  - web性能
  - 性能
translation_of: Web/API/Performance_API
---
<div>{{DefaultAPISidebar("High Resolution Time")}}</div>

<p><a href="https://www.w3.org/TR/hr-time/">高时间采样率</a>标准定义了{{domxref("Performance")}}接口，该接口支持应用程序中客户端的延时测量。{{domxref("Performance")}}接口被认为是<em>高采样率</em>的，因为其精确度可达千分之一毫秒（受硬件或软件限制）。这些接口支持许多使用情形，包括计算帧速率（在动画中可能很重要）和基准测试（例如加载资源的时间）。</p>

<p>由于平台的系统时钟会受到各种时滞（例如NTP调整）的影响，该接口支持单调时钟，即一直增加的时钟。 鉴于这个原因，Performance API定义了{{domxref("DOMHighResTimeStamp")}}类型，而不是使用{{jsxref("Date.now","Date.now()")}}接口。</p>

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

<p>{{domxref("DOMHighResTimeStamp")}}类型，顾名思义，表示高采样率的时间戳。 此类型是 <code>double</code> ，由性能接口使用。 该值可以是离散时间戳，也可以是两个离散时间戳之间的时间间隔。</p>

<p><code>DOMHighResTimeStamp</code> 的单位是毫秒，应精确到5 µs（微秒）。 但是，如果浏览器无法提供精确到5微秒的时间数值（例如由于硬件或软件限制），则浏览器可以将该值表示为精确到毫秒的时间（以毫秒为单位）。</p>

<h2 id="方法">方法</h2>

<p><code>{{domxref("Performance")}}</code> 接口具有两个方法。</p>

<p>{{domxref("Performance.now","now()")}} 方法返回一个{{domxref("DOMHighResTimeStamp")}}，其值取决于{{domxref("PerformanceTiming.navigationStart","navigation start")}}和作用域。如果作用域是window，则值是创建浏览器上下文的时间；如果作用域是{{domxref("Worker","worker")}}，则值是创建worker的时间。</p>

<p>{{domxref("Performance.toJSON","toJSON()")}}方法返回{{domxref("Performance")}}对象的序列化结果，包含可以被序列化的属性。</p>

<h2 id="属性">属性</h2>

<p><code>{{domxref("Performance")}}</code>接口具有两个属性。</p>

<p>{{domxref("Performance.timing","timing")}}属性返回一个{{domxref("PerformanceTiming")}}对象，其中包含与延时相关的性能信息，例如导航开始的时间，重定向的开始时间和结束时间，响应的开始时间和结束时间等。</p>

<p><code>{{domxref("Performance.navigation","navigation")}}</code> 属性返回一个{{domxref("PerformanceNavigation")}}对象，该对象表示在给定浏览上下文中发生的导航类型，例如从历史记录导航到的页面，通过跟随链接导航到的页面等。</p>

<h2 id="接口">接口</h2>

<dl>
 <dt>{{domxref('Performance')}}</dt>
 <dd>提供方法和属性，包含给定页面与计时相关的性能信息。</dd>
 <dt>{{domxref('PerformanceEntry')}}</dt>
 <dd>提供方法和属性，将单个性能指标封装为性能时间轴的一部分。</dd>
 <dt>{{domxref('PerformanceFrameTiming')}}</dt>
 <dd>提供方法和属性，包含有关浏览器事件循环的帧计时数据。</dd>
 <dt>{{domxref('PerformanceMark')}}</dt>
 <dd>条目类型为"<code>mark</code>"的{{domxref('PerformanceEntry')}}抽象接口，该类型的条目通过调用{{domxref("Performance.mark","mark()")}}将命名的{{domxref("DOMHighResTimeStamp")}}（mark）添加到浏览器的性能时间轴来创建。</dd>
 <dt>{{domxref('PerformanceMeasure')}}</dt>
 <dd>条目类型为"<code>measure</code>"的{{domxref('PerformanceEntry')}}抽象接口，该类型的条目通过调用{{domxref("Performance.measure","measure()")}}在浏览器的性能时间轴的两个标记之间添加一个命名的{{domxref("DOMHighResTimeStamp")}}（measure）来创建。</dd>
 <dt>{{domxref('PerformanceNavigationTiming')}}</dt>
 <dd>提供方法和属性，用于存储和检索有关浏览器文档导航事件的<a href="/en-US/docs/Web/API/DOMHighResTimeStamp">高采样率时间戳</a>或其他指标。</dd>
 <dt>{{domxref('PerformanceObserver')}}</dt>
 <dd>提供方法和属性，用于观察性能测量事件，并在浏览器的性能时间轴中记录新的{{domxref('PerformanceEntry')}}时进行通知。</dd>
 <dt>{{domxref('PerformanceResourceTiming')}}</dt>
 <dd>提供方法和属性，用于检索和分析有关应用程序资源加载的详细网络计时数据。</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>如{{domxref("Performance")}}接口的“<a href="/Web/API/Performance#Browser_compatibility">浏览器兼容性</a>”表所示，大部分接口由桌面浏览器广泛实现。</p>

<p>要测试你的浏览器对{{domxref("Performance")}}接口的支持，请运行 <code><a href="http://mdn.github.io/web-performance/perf-api-support.html">perf-api-support</a></code> 应用。</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>