aboutsummaryrefslogtreecommitdiff
path: root/files/ko/web/api/performanceentry/index.html
blob: 35c6271781b12a5d23a004e695db4b157065ca62 (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
135
136
137
138
139
140
141
142
---
title: PerformanceEntry
slug: Web/API/PerformanceEntry
translation_of: Web/API/PerformanceEntry
---
<div>{{APIRef("Performance Timeline API")}}</div>

<p><span class="seoSummary"><strong><code>PerformanceEntry</code></strong> 객체는 <em>performance timeline</em> 상의 단일 성능 수치를 캡슐화 합니다. <em>performance entry</em>는 응용프로그램의 특정 지점에서 performance <em>{{domxref("PerformanceMark","mark")}}</em><em>{{domxref("PerformanceMeasure","measure")}}</em>를 생성함으로써 (예를 들면 {{domxref("Performance.mark","mark()")}}를 호출하는 방법으로) 직접적으로 만들어질 수 있습니다. 또는 (이미지와 같은) 리소스를 로딩하는 등의 간접적인 방법으로 생성되기도 합니다.</span></p>

<p><code>PerformanceEntry</code> 인스턴스는 항상 다음 서브타입들 중 하나를 따릅니다:</p>

<ul>
 <li>{{domxref("PerformanceMark")}}</li>
 <li>{{domxref("PerformanceMeasure")}}</li>
 <li>{{domxref("PerformanceFrameTiming")}}</li>
 <li>{{domxref("PerformanceNavigationTiming")}}</li>
 <li>{{domxref("PerformanceResourceTiming")}}</li>
 <li>{{domxref("PerformancePaintTiming")}}</li>
</ul>

<p>{{AvailableInWorkers}}</p>

<h2 id="Properties">Properties</h2>

<dl>
 <dt>{{domxref("PerformanceEntry.name")}} {{readonlyInline}}</dt>
 <dd>A value that further specifies the value returned by the {{domxref("PerformanceEntry.entryType")}} property. The value of both depends on the subtype. See property page for valid values.</dd>
 <dt>{{domxref("PerformanceEntry.entryType")}} {{readonlyInline}}</dt>
 <dd>A {{domxref("DOMString")}} representing the type of performance metric such as, for example, "<code>mark</code>". See property page for valid values.</dd>
 <dt>{{domxref("PerformanceEntry.startTime")}} {{readonlyInline}}</dt>
 <dd>A {{domxref("DOMHighResTimeStamp")}} representing the starting time for the performance metric.</dd>
 <dt>{{domxref("PerformanceEntry.duration")}} {{readonlyInline}}</dt>
 <dd>A {{domxref("DOMHighResTimeStamp")}} representing the time value of the duration of the performance event.</dd>
</dl>

<h2 id="Methods">Methods</h2>

<dl>
 <dt>{{domxref("PerformanceEntry.toJSON","PerformanceEntry.toJSON()")}}</dt>
 <dd>Returns a JSON representation of the <code>PerformanceEntry</code> object.</dd>
</dl>

<h2 id="Example">Example</h2>

<p>The following example checks all <code>PerformanceEntry</code> properties to see if the browser supports them and if so, write their values to the console.</p>

<pre class="brush: js">function print_PerformanceEntries() {
  // Use getEntries() to get a list of all performance entries
  var p = performance.getEntries();
  for (var i=0; i &lt; p.length; i++) {
    console.log("PerformanceEntry[" + i + "]");
    print_PerformanceEntry(p[i]);
  }
}
function print_PerformanceEntry(perfEntry) {
  var properties = ["name",
                    "entryType",
                    "startTime",
                    "duration"];

  for (var i=0; i &lt; properties.length; i++) {
    // Check each property
    var supported = properties[i] in perfEntry;
    if (supported) {
      var value = perfEntry[properties[i]];
      console.log("... " + properties[i] + " = " + value);
    } else {
      console.log("... " + properties[i] + " is NOT supported");
    }
  }
}
</pre>

<h2 id="Specifications">Specifications</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('Resource Timing 3')}}</td>
   <td>{{Spec2('Resource Timing 3')}}</td>
   <td></td>
  </tr>
  <tr>
   <td>{{SpecName('Resource Timing 2')}}</td>
   <td>{{Spec2('Resource Timing 2')}}</td>
   <td></td>
  </tr>
  <tr>
   <td>{{SpecName('Resource Timing')}}</td>
   <td>{{Spec2('Resource Timing')}}</td>
   <td>Adds the {{domxref("PerformanceResourceTiming")}} interface and the <code>resource</code> value for <code>entryType</code>.</td>
  </tr>
  <tr>
   <td>{{SpecName('Navigation Timing Level 2')}}</td>
   <td>{{Spec2('Navigation Timing Level 2')}}</td>
   <td></td>
  </tr>
  <tr>
   <td>{{SpecName('Navigation Timing')}}</td>
   <td>{{Spec2('Navigation Timing')}}</td>
   <td>Adds the {{domxref("PerformanceNavigationTiming")}} interface and the <code>navigation</code> value for <code>entryType</code>.</td>
  </tr>
  <tr>
   <td>{{SpecName('User Timing Level 2')}}</td>
   <td>{{Spec2('User Timing Level 2')}}</td>
   <td></td>
  </tr>
  <tr>
   <td>{{SpecName('User Timing')}}</td>
   <td>{{Spec2('User Timing')}}</td>
   <td>Adds the {{domxref("PerformanceMark")}} and {{domxref("PerformanceMeasure")}} interfaces as well as the <code>mark</code> and <code>measure</code> values for <code>entryType</code>.</td>
  </tr>
  <tr>
   <td>{{SpecName('Frame Timing')}}</td>
   <td>{{Spec2('Frame Timing')}}</td>
   <td>Adds the {{domxref('PerformanceFrameTiming')}} interface and the <code>frame</code> value for <code>entryType</code>.</td>
  </tr>
  <tr>
   <td>{{SpecName('Performance Timeline Level 2', '#dom-performanceentry', 'PerformanceEntry')}}</td>
   <td>{{Spec2('Performance Timeline Level 2')}}</td>
   <td>Added <code>toJSON()</code> serializer method.</td>
  </tr>
  <tr>
   <td>{{SpecName('Performance Timeline', '#dom-performanceentry', 'PerformanceEntry')}}</td>
   <td>{{Spec2('Performance Timeline')}}</td>
   <td>Initial definition.</td>
  </tr>
 </tbody>
</table>

<h2 id="Browser_compatibility">Browser compatibility</h2>

<div>


<p>{{Compat("api.PerformanceEntry")}}</p>
</div>