1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
|
---
title: Resource Timing API
slug: Web/API/Resource_Timing_API
translation_of: Web/API/Resource_Timing_API
---
<div>{{DefaultAPISidebar("Resource Timing API")}}</div>
<div> </div>
<div>通过<strong><code>Resource Timing API</code></strong>可以获取和分析应用资源加载的详细网络计时数据, 应用程序可以</div>
<div>使用时间度量标准来确定加载特定资源所需要的时间, 比如 {{domxref("XMLHttpRequest")}}, {{SVGElement("SVG","SVG element")}}, 图片, 或者脚本.</div>
<div> </div>
<p><code><strong>Resource Timing API</strong></code>为网络事件(如重定向的开始和结束事件, DNS查找的开始和结束事件, 请求开始, 响应开始和结束时间等)生成有高分辨率时间戳( {{domxref("DOMHighResTimeStamp","high-resolution timestamps", "", 1)}} )的资源加载时间线, 并提供了资源大小和资源类型.</p>
<p>本文档是Resource Timing API的概述. 更多详细信息, 请查阅每个接口的参考说明, <a href="/Web/API/Resource_Timing/Using_Resource_Timing">Using Resource Timing</a> 和 {{anch("See_Also","附录")}} 的参考链接. 有关资源时序处理模型的图示，请参阅 <a href="https://w3c.github.io/resource-timing/#process">resource timing phases</a> .</p>
<p class="note"><code>PerformanceResourceTiming</code> 接口只统计{{domxref("PerformanceEntry","performance entries", "", 1)}} 中 {{domxref("PerformanceEntry.entryType","entryType")}} 为"<code>resource</code>"类型的 {{domxref("PerformanceEntry")}}</p>
<h2 id="高分辨率时间戳">高分辨率时间戳</h2>
<p>一些 <code><strong>Resource Timing</strong></code> 属性返回高分辨率时间戳, 顾名思义, 代表了高分辨率的时间点. 高分辨率时间戳类型是<code>{{domxref("DOMHighResTimeStamp")}}</code>, 用双精度数字(double)表示, 它的值是一个离散的时间点或者两个离散时间点之间的时间差.</p>
<p><code>DOMHighResTimeStamp</code>的单位是毫秒(ms), 并且应该可以准确到 5 微秒(µs). 但是, 如果浏览器无法以提供精确到5微秒的时间值(如软硬件限制), 则可以将该值表示为以毫秒为单位的精确到毫秒的时间。</p>
<h2 id="资源载入时间戳">资源载入时间戳</h2>
<p>应用程序可以获得用于加载资源的各个阶段的时间戳. 处理模型中的第一个属性是 {{domxref("PerformanceEntry.startTime","startTime")}} , 它在资源加载过程开始之前立即返回时间. {{domxref("PerformanceResourceTiming.fetchStart","fetchStart")}} 跟踪和重定向处理(如果适用)，并在DNS查找之前进行. 下个阶段是{{domxref('PerformanceResourceTiming.connectStart','connectStart')}} 和 {{domxref('PerformanceResourceTiming.connectEnd','connectEnd')}} 分别是开始连接到服务器和连接建立完成的时间戳. 最后三个按顺序分别是: {{domxref('PerformanceResourceTiming.requestStart','requestStart')}} - 在浏览器开始向服务器请求资源时; {{domxref('PerformanceResourceTiming.responseStart','responseStart')}} - 资源请求首包返回时; and {{domxref('PerformanceResourceTiming.responseEnd','responseEnd')}} - 资源全部接收完成时. 如果资源是通过安全连接加载的 {{domxref('PerformanceResourceTiming.secureConnectionStart','secureConnectionStart')}} 的值将会在connectStart和connectEnd之间.</p>
<div class="note">
<p>当 {{Glossary("CORS")}} 生效时, 除非服务器的访问策略允许共享这些值，否则这些值中的许多将返回为零. 这需要提供资源的服务器发送 <code>Timing-Allow-Origin</code> HTTP 响应头并且指定origin[s]来源才能允许获取这些被限制的时间戳 .</p>
<p>在非web页面本身的域名下，这些属性在默认都会返回0值 : <code>redirectStart</code>, <code>redirectEnd</code>, <code>domainLookupStart</code>, <code>domainLookupEnd</code>, <code>connectStart</code>, <code>connectEnd</code>, <code>secureConnectionStart</code>, <code>requestStart</code>, 和 <code>responseStart</code>.</p>
</div>
<p>The <code>{{domxref("PerformanceResourceTiming")}}</code> interface also includes several network timing properties. The {{domxref("PerformanceResourceTiming.redirectStart","redirectStart")}} and {{domxref("PerformanceResourceTiming.redirectEnd","redirectEnd")}} properties return {{domxref("DOMHighResTimeStamp","timestamps")}} for redirect start and end times, respectively. Likewise, the The {{domxref("PerformanceResourceTiming.domainLookupStart","domainLookupStart")}} and {{domxref("PerformanceResourceTiming.domainLookupEnd","domainLookupEnd")}} properties return {{domxref("DOMHighResTimeStamp","timestamps")}} for DNS lookup start and end times, respectively.</p>
<p><em>This would be a nice place to have a diagram showing the relationships between these segments of the resource loading time.</em></p>
<h2 id="Resource_size">Resource size</h2>
<p> {{domxref("PerformanceResourceTiming")}}接口有三个属性用来获取一个资源的数据大小。 {{domxref('PerformanceResourceTiming.transferSize','transferSize')}} 属性返回所获得的资源大小，包含响应头加上响应体。</p>
<p>The {{domxref('PerformanceResourceTiming.encodedBodySize','encodedBodySize')}} property returns the size (in octets) received from the fetch (HTTP or cache), of the <em>payload body</em>, <strong>before</strong> removing any applied content-codings. {{domxref('PerformanceResourceTiming.decodedBodySize','decodedBodySize')}} returns the size (in octets) received from the fetch (HTTP or cache) of the <em>message body</em>, <strong>after</strong> removing any applied content-codings.</p>
<h2 id="Other_properties">Other properties</h2>
<p>The {{domxref('PerformanceResourceTiming.nextHopProtocol','nextHopProtocol')}} property returns the <em>network protocol</em> used to fetch the resource.</p>
<p>The {{domxref('PerformanceResourceTiming.initiatorType','initiatorType')}} property returns the <em>type</em> of resource that initiated the performance entry such as "<code>css</code>" for a CSS resource, "<code>xmlhttprequest</code>" for an XMLHttpRequest and "<code>img</code>" for an image (such as a JPEG).</p>
<p>If the current context is a {{domxref("Worker","worker")}}, the {{domxref('PerformanceResourceTiming.workerStart','workerStart')}} property can be used to obtain a {{domxref("DOMHighResTimeStamp")}} when the worker was started.</p>
<h2 id="Methods">Methods</h2>
<p>The Resource Timing API includes two methods that extend the {{domxref("Performance")}} interface. The {{domxref("Performance.clearResourceTimings","clearResourceTimings()")}} method removes all "<code>resource</code>" type performance entries from the browser's <em>resource</em> performance entry buffer. The {{domxref("Performance.setResourceTimingBufferSize","setResourceTimingBufferSize()")}} method sets the resource performance entry buffer size to the specified number of resource {{domxref("PerformanceEntry","performance entries")}}.</p>
<p>The {{domxref("PerformanceResourceTiming")}} interface's {{domxref("PerformanceResourceTiming.toJSON","toJSON()")}} method returns a JSON serialization of a "<code>resource</code>" type {{domxref("PerformanceEntry","performance entry")}}.</p>
<h2 id="Implementation_status">Implementation status</h2>
<p>As shown in the {{domxref("PerformanceResourceTiming")}} interface's <a href="/Web/API/PerformanceResourceTiming#Browser_compatibility">Browser Compatibility</a> table, most of these interfaces are broadly implemented by desktop browsers. However, note that some properties have little to no implementation so see each property's "Browser compatibility" section for more specific interoperability data.</p>
<p>To test your browser's support for these interfaces, run the <code><a href="https://mdn.github.io/dom-examples/performance-apis/perf-api-support.html">perf-api-support</a></code> application.</p>
<h2 id="附录">附录</h2>
<ul>
<li><a href="https://w3c.github.io/resource-timing/">Resource Timing Standard</a>; W3C Editor's Draft</li>
<li><a href="http://caniuse.com/#search=resource-timing">CanIUse data</a></li>
<li><a href="http://www.stevesouders.com/blog/2014/08/21/resource-timing-practical-tips/">Resource Timing practical tips</a>; Steve Souders; 2014 August 21</li>
<li><a href="http://googledevelopers.blogspot.ca/2013/12/measuring-network-performance-with.html">Measuring network performance with Resource Timing API</a>; Ilya Grigorik; 2013 December 11</li>
<li><a href="http://siusin.github.io/perf-timing-primer/">A Primer for Web Performance Timing APIs</a>; Xiaoqian Wu; W3C Editor's Draft</li>
</ul>
|
