blob: a397f4dda36fd4ca0d78c55a3ead665ce84df7a9 (
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
131
132
133
134
|
---
title: PerformanceObserver.observe()
slug: Web/API/PerformanceObserver/observe
tags:
- 性能
- 性能监测对象
- 接口
translation_of: Web/API/PerformanceObserver/observe
---
<div>{{APIRef("Performance Timeline API")}}</div>
<p>{{domxref("PerformanceObserver", "性能监测对象")}} 的 <strong><code>observe()</code></strong> 方法用于观察传入的参数中指定的性能条目类型的集合。当记录一个指定类型的性能条目时，性能监测对象的回调函数将会被调用。</p>
<h2 id="语法">语法</h2>
<pre class="syntaxbox"><em>observer</em>.observe(<em>options</em>);
</pre>
<h3 id="参数">参数</h3>
<p> </p>
<dl>
<dt><em>options</em></dt>
<dd>一个只装了单个键值对的对象，该键值对的键名规定为 <code>entryTypes</code>。<code>entryTypes</code> 的取值要求如下:</dd>
</dl>
<ul>
<li><code>entryTypes</code> 的值：一个放字符串的数组，字符串的有效值取值在{{domxref("PerformanceEntry.entryType", "性能条目类型")}} 中有详细列出。如果其中的某个字符串取的值无效，浏览器会自动忽略它。</li>
<li>另：若未传入 <code>options</code> 实参，或传入的 <code>options</code> 实参为空数组，会抛出 {{jsxref("TypeError")}}。</li>
</ul>
<dl>
<dt> </dt>
</dl>
<h2 id="示例">示例</h2>
<pre class="brush: js">/* 写法一 */
//直接往PerformanceObserver()入参匿名回调函数，成功new了一个PerformanceObserver类的，名为observer的对象
var observer = new PerformanceObserver(function(list, obj) {
var entries = list.getEntries();
for (var i=0; i < entries.length; i++) {
//处理 “mark” 和 “frame” 事件
}
});
//调用observer对象的observe()方法
observer.observe({entryTypes: ["mark", "frame"]});
/* 写法二 */
//预先声明回调函数perf_observer
function perf_observer(list, observer) {
//处理 “measure” 事件
}
//再将其传入PerformanceObserver()，成功new了一个PerformanceObserver类的，名为observer2的对象
var observer2 = new PerformanceObserver(perf_observer);
//调用observer2对象的observe()方法
observer2.observe({entryTypes: ["measure"]});
</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('Performance Timeline Level 2', '#dom-performanceobserver-observe', 'observe()')}}</td>
<td>{{Spec2('Performance Timeline Level 2')}}</td>
<td>Initial definition of <code>observe()</code> method.</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(52.0)}}</td>
<td>{{CompatGeckoDesktop(57)}}</td>
<td>{{CompatNo}}</td>
<td>{{CompatOpera("39")}}</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>Android Webview</th>
<th>Firefox Mobile (Gecko)</th>
<th>IE Phone</th>
<th>Opera Mobile</th>
<th>Safari Mobile</th>
<th>Chrome for Android</th>
</tr>
<tr>
<td>Basic support</td>
<td>{{CompatNo}}</td>
<td>{{CompatNo}}</td>
<td>{{CompatGeckoMobile(57)}}</td>
<td>{{CompatNo}}</td>
<td>
<p>{{CompatOperaMobile(39)}}</p>
</td>
<td>{{CompatNo}}</td>
<td>{{CompatChrome(52.0)}}</td>
</tr>
</tbody>
</table>
</div>
|
