blob: f72c2a91b9a7d5b4f8b722bd3324ea3116ae2d9d (
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
|
---
title: 내비게이션 타이밍(Navigation Timing)
slug: Web/API/Navigation_timing_API
translation_of: Web/API/Navigation_timing_API
original_slug: Navigation_timing
---
<p><strong>Navigation Timing API</strong>는 웹 사이트의 성능을 측정하는 데 사용할 수 있는 데이터를 제공합니다. 같은 목적에 사용했던 다른 JavaScript 기반 메커니즘과 다르게 이 API는 더 유용하고 정확한 종단 간(end-to-end) 대기 시간(latency)을 제공할 수 있습니다.</p>
<p>다음 예제는 지각하는(perceived) 로딩 시간을 측정하는 법을 보여줍니다.</p>
<pre>function onLoad() {
var now = new Date().getTime();
var page_load_time = now - performance.timing.navigationStart;
console.log("User-perceived page loading time: " + page_load_time);
}
</pre>
<p>{{domxref("PerformanceTiming")}} 인터페이스로 접근할 수 있는 밀리 초 단위로 주어진 측정된 이벤트가 많이 있습니다. 발생하는 순서로 된 이벤트 목록입니다.</p>
<ul>
<li>navigationStart</li>
<li>unloadEventStart</li>
<li>unloadEventEnd</li>
<li>redirectStart</li>
<li>redirectEnd</li>
<li>fetchStart</li>
<li>domainLookupStart</li>
<li>domainLookupEnd</li>
<li>connectStart</li>
<li>connectEnd</li>
<li>secureConnectionStart</li>
<li>requestStart</li>
<li>responseStart</li>
<li>responseEnd</li>
<li>domLoading</li>
<li>domInteractive</li>
<li>domContentLoadedEventStart</li>
<li>domContentLoadedEventEnd</li>
<li>domComplete</li>
<li>loadEventStart</li>
<li>loadEventEnd</li>
</ul>
<p><code>window.performance.navigation</code> 객체는 리다이렉트(redirect), 앞/뒤 버튼, 혹은 보통의 URL 로딩이 어떤 페이지 로드를 일으키는지(trigger) 아는 데 사용할 수 있는 두 속성을 저장합니다.</p>
<p>window.performance.navigation.type:</p>
<table class="standard-table" style="font-size: 14px;">
<thead>
<tr>
<th scope="col">상수</th>
<th scope="col">값</th>
<th scope="col">설명</th>
</tr>
</thead>
<tbody>
<tr>
<td><a name="const_next"><code>TYPE_NAVIGATENEXT</code></a></td>
<td>0</td>
<td>아래 목록의 TYPE_RELOAD과 TYPE_BACK_FORWARD가 사용하는 것 외에, 링크 클릭하기, 사용자 에이전트(UA) 주소 바에 URL 입력하기, 폼 전송, 스크립트 연산으로 초기화하기로 시작한 내비게이션.</td>
</tr>
<tr>
<td><a name="const_next_no_duplicate"><code>TYPE_RELOAD</code></a></td>
<td>1</td>
<td>리로드(reload) 연산 혹은 location.reload() 메소드를 통한 내비게이션.</td>
</tr>
<tr>
<td><a name="const_prev"><code>TYPE_BACK_FORWARD</code></a></td>
<td>2</td>
<td>히스토리 순회(traversal) 연산을 통한 내비게이션</td>
</tr>
<tr>
<td><a name="const_prev_no_duplicate"><code>TYPE_UNDEFINED</code></a></td>
<td>255</td>
<td>위 값으로 정의되지 않는 어떠한 내비게이션 타입.</td>
</tr>
</tbody>
</table>
<p><code>window.performance.navigation.redirectCount</code>는 마지막 페이지에 도달할 때까지, 만일 있다면 몇 번의 리다이렉션이 일어났는지를 나타냅니다.</p>
<p>Navigation Timing API는 XHR로 서버에 보낸 클라이언트 쪽 성능 데이터를 모을 뿐 아니라 이전 페이지 언로드(unload) 시간, 도메인 룩업(look up) 시간, window.onload 전체 시간 등 다른 방법으로 측정하기 매우 어려운 데이터를 측정하는 데 사용할 수 있습니다.</p>
<h3 id="예제">예제</h3>
<p>어떤 페이지를 로딩하는 데 필요한 전체 시간 계산하기.</p>
<pre>var perfData = window.performance.timing;
var pageLoadTime = perfData.loadEventEnd - perfData.navigationStart;
</pre>
<p>요청 응답 시간 계산하기.</p>
<pre>var connectTime = perfData.responseEnd - perfData.requestStart;</pre>
<h3 id="Browser_Compatibility" name="Browser_Compatibility">링크</h3>
<ul>
<li><a class="external" href="http://webtimingdemo.appspot.com/" title="http://webtimingdemo.appspot.com/">Test Page</a></li>
<li><a class="external" href="http://w3c-test.org/webperf/specs/NavigationTiming/" title="http://w3c-test.org/webperf/specs/NavigationTiming/">http://w3c-test.org/webperf/specs/NavigationTiming/</a></li>
<li><a class="external" href="http://www.w3.org/TR/navigation-timing/" title="http://www.w3.org/TR/navigation-timing/">http://www.w3.org/TR/navigation-timing/</a></li>
</ul>
<h3 id="Browser_Compatibility" name="Browser_Compatibility">브라우저 호환</h3>
<h3 id="Window.performance.timing"><code>Window.performance.timing</code></h3>
<p>{{Compat("api.PerformanceTiming")}}</p>
|
