blob: 22be6268da84799b06959ad219a609bd5e778ad5 (
plain)
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
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
|
---
title: PerformancePaintTiming
slug: Web/API/PerformancePaintTiming
tags:
- API
- Interface
- Paint Timing
- Performance Timeline API
- PerformancePaintTiming
- Web Performance
- 渲染时机
- 渲染监测
translation_of: Web/API/PerformancePaintTiming
---
<p>{{SeeCompatTable}}{{APIRef("Performance Timeline API")}}</p>
<p><a href="/en-US/docs/Web/API/Paint Timing">Paint Timing</a> 提供的<strong><code>PerformancePaintTiming</code></strong>是一个提供页面在构建过程中的“绘制”（也称“渲染”）时间点信息的接口。“绘制”是指将渲染树转换为页面上像素的过程。</p>
<p>应用可以为名为“<code>paint</code>”的{{domxref("PerformanceEntry","performance entry 类型")}} 注册一个{{domxref("PerformanceObserver")}}，然后观察者可以获取绘制相关的事件发生的时间。以此来帮你找出那些花费太多时间去绘制的区域，而后提升用户体验。</p>
<p>{{InheritanceDiagram}}</p>
<h2 id="属性">属性</h2>
<p>这个接口没有属性，但是（为了"<code>paint</code>" {{domxref ("PerformanceEntry.entryType","performance entry 类型")}}）通过一些限制和约束 扩展了以下{{domxref("PerformanceEntry")}}属性</p>
<dl>
<dt>{{domxref("PerformanceEntry.entryType")}}</dt>
<dd>返回 "<code>paint</code>".</dd>
<dt>{{domxref("PerformanceEntry.name")}}</dt>
<dd>返回 <code>"first-paint"</code> 或<code>"first-contentful-paint"</code>.</dd>
<dt>{{domxref("PerformanceEntry.startTime")}}</dt>
<dd>当开始“绘制“时返回 {{domxref("DOMHighResTimeStamp","timestamp")}}.</dd>
<dt>{{domxref("PerformanceEntry.duration")}}</dt>
<dd>返回 0.</dd>
</dl>
<h2 id="方法">方法</h2>
<p>这个接口没有方法</p>
<h2 id="例子">例子</h2>
<pre class="brush: js">function showPaintTimings() {
if (window.performance) {
let performance = window.performance;
let performanceEntries = performance.getEntriesByType('paint');
performanceEntries.forEach( (performanceEntry, i, entries) => {
console.log("The time to " + performanceEntry.name + " was " + performanceEntry.startTime + " milliseconds.");
});
} else {
console.log('Performance timing isn\'t supported.');
}
}</pre>
<p>上面例子输出如下</p>
<pre>The time to first-paint was 2785.915 milliseconds.
The time to first-contentful-paint was 2787.460 milliseconds.</pre>
<h2 id="规范">规范</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('Paint Timing','#sec-PerformancePaintTiming','PerformancePaintTiming')}}</td>
<td>{{Spec2('Paint Timing')}}</td>
<td>Initial definition.</td>
</tr>
</tbody>
</table>
<h2 id="浏览器兼容性">浏览器兼容性</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>Basic support</td>
<td>{{CompatChrome(60)}}</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatOpera(47)}}</td>
<td>{{CompatUnknown}}</td>
</tr>
</tbody>
</table>
</div>
<div id="compat-mobile">
<table class="compat-table">
<tbody>
<tr>
<th>Feature</th>
<th>Android Webview</th>
<th>Chrome for Android</th>
<th>Firefox Mobile (Gecko)</th>
<th>Firefox OS</th>
<th>IE Mobile</th>
<th>Opera Mobile</th>
<th>Safari Mobile</th>
</tr>
<tr>
<td>Basic support</td>
<td>{{CompatChrome(60)}}</td>
<td>{{CompatChrome(60)}}</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatOperaMobile(47)}}</td>
<td>{{CompatUnknown}}</td>
</tr>
</tbody>
</table>
</div>
|
