1 files changed, 137 insertions, 0 deletions
diff --git a/files/ko/web/api/navigation_timing_api/index.html b/files/ko/web/api/navigation_timing_api/index.html
new file mode 100644
index 0000000000..c9a0c1465b
--- /dev/null
+++ b/files/ko/web/api/navigation_timing_api/index.html
@@ -0,0 +1,137 @@
+---
+title: 내비게이션 타이밍(Navigation Timing)
+slug: Navigation_timing
+translation_of: Web/API/Navigation_timing_API
+---
+<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>
+<p style="margin-top: 0px; margin-right: 0px; margin-bottom: 1.286em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;">{{ CompatibilityTable() }}</p>
+<div id="compat-desktop">
+ <table class="compat-table" style="font-size: 14px; margin-bottom: 1.286em; border-collapse: collapse; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted;">
+  <tbody>
+   <tr>
+    <th style="font-family: inherit; font-size: inherit; color: inherit; padding-top: 0px; padding-right: 5px; padding-bottom: 0px; padding-left: 5px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; background-clip: initial; background-color: rgb(238, 238, 238); text-align: left; font-weight: bold;">Feature</th>
+    <th style="font-family: inherit; font-size: inherit; color: inherit; padding-top: 0px; padding-right: 5px; padding-bottom: 0px; padding-left: 5px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; background-clip: initial; background-color: rgb(238, 238, 238); text-align: left; font-weight: bold;">Chrome**</th>
+    <th style="font-family: inherit; font-size: inherit; color: inherit; padding-top: 0px; padding-right: 5px; padding-bottom: 0px; padding-left: 5px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; background-clip: initial; background-color: rgb(238, 238, 238); text-align: left; font-weight: bold;">Firefox (Gecko)*</th>
+    <th style="font-family: inherit; font-size: inherit; color: inherit; padding-top: 0px; padding-right: 5px; padding-bottom: 0px; padding-left: 5px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; background-clip: initial; background-color: rgb(238, 238, 238); text-align: left; font-weight: bold;">Internet Explorer</th>
+    <th style="font-family: inherit; font-size: inherit; color: inherit; padding-top: 0px; padding-right: 5px; padding-bottom: 0px; padding-left: 5px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; background-clip: initial; background-color: rgb(238, 238, 238); text-align: left; font-weight: bold;">Opera*</th>
+    <th style="font-family: inherit; font-size: inherit; color: inherit; padding-top: 0px; padding-right: 5px; padding-bottom: 0px; padding-left: 5px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; background-clip: initial; background-color: rgb(238, 238, 238); text-align: left; font-weight: bold;">Safari (WebKit)</th>
+   </tr>
+   <tr>
+    <td style="font-family: inherit; font-size: inherit; color: inherit; padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; text-align: left; background-clip: initial; background-color: rgb(255, 255, 255); vertical-align: top; word-wrap: break-word;">Basic support</td>
+    <td style="font-family: inherit; font-size: inherit; color: inherit; padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; text-align: left; background-clip: initial; background-color: rgb(255, 255, 255); vertical-align: top; word-wrap: break-word;">
+     <p style="margin-top: 0px; margin-right: 0px; margin-bottom: 1.286em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;">6</p>
+    </td>
+    <td style="font-family: inherit; font-size: inherit; color: inherit; padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; text-align: left; background-clip: initial; background-color: rgb(255, 255, 255); vertical-align: top; word-wrap: break-word;">
+     <p style="margin-top: 0px; margin-right: 0px; margin-bottom: 1.286em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;">7</p>
+     <p style="margin-top: 0px; margin-right: 0px; margin-bottom: 1.286em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;"> </p>
+    </td>
+    <td style="font-family: inherit; font-size: inherit; color: inherit; padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; text-align: left; background-clip: initial; background-color: rgb(255, 255, 255); vertical-align: top; word-wrap: break-word;">9</td>
+    <td style="font-family: inherit; font-size: inherit; color: inherit; padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; text-align: left; background-clip: initial; background-color: rgb(255, 255, 255); vertical-align: top; word-wrap: break-word;">15</td>
+    <td style="font-family: inherit; font-size: inherit; color: inherit; padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; text-align: left; background-clip: initial; background-color: rgb(255, 255, 255); vertical-align: top; word-wrap: break-word;">{{ CompatNo() }}</td>
+   </tr>
+  </tbody>
+ </table>
+</div>
+<div id="compat-mobile">
+ <table class="compat-table" style="font-size: 14px; margin-bottom: 1.286em; border-collapse: collapse; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted;">
+  <tbody>
+   <tr>
+    <th style="font-family: inherit; font-size: inherit; color: inherit; padding-top: 0px; padding-right: 5px; padding-bottom: 0px; padding-left: 5px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; background-clip: initial; background-color: rgb(238, 238, 238); text-align: left; font-weight: bold;">Feature</th>
+    <th style="font-family: inherit; font-size: inherit; color: inherit; padding-top: 0px; padding-right: 5px; padding-bottom: 0px; padding-left: 5px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; background-clip: initial; background-color: rgb(238, 238, 238); text-align: left; font-weight: bold;">Android</th>
+    <th style="font-family: inherit; font-size: inherit; color: inherit; padding-top: 0px; padding-right: 5px; padding-bottom: 0px; padding-left: 5px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; background-clip: initial; background-color: rgb(238, 238, 238); text-align: left; font-weight: bold;">Firefox Mobile (Gecko)</th>
+    <th style="font-family: inherit; font-size: inherit; color: inherit; padding-top: 0px; padding-right: 5px; padding-bottom: 0px; padding-left: 5px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; background-clip: initial; background-color: rgb(238, 238, 238); text-align: left; font-weight: bold;">IE Phone</th>
+    <th style="font-family: inherit; font-size: inherit; color: inherit; padding-top: 0px; padding-right: 5px; padding-bottom: 0px; padding-left: 5px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; background-clip: initial; background-color: rgb(238, 238, 238); text-align: left; font-weight: bold;">Opera Mobile</th>
+    <th style="font-family: inherit; font-size: inherit; color: inherit; padding-top: 0px; padding-right: 5px; padding-bottom: 0px; padding-left: 5px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; background-clip: initial; background-color: rgb(238, 238, 238); text-align: left; font-weight: bold;">Safari Mobile</th>
+   </tr>
+   <tr>
+    <td style="font-family: inherit; font-size: inherit; color: inherit; padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; text-align: left; background-clip: initial; background-color: rgb(255, 255, 255); vertical-align: top; word-wrap: break-word;">Basic support</td>
+    <td style="font-family: inherit; font-size: inherit; color: inherit; padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; text-align: left; background-clip: initial; background-color: rgb(255, 255, 255); vertical-align: top; word-wrap: break-word;">4.0</td>
+    <td style="font-family: inherit; font-size: inherit; color: inherit; padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; text-align: left; background-clip: initial; background-color: rgb(255, 255, 255); vertical-align: top; word-wrap: break-word;">15.0</td>
+    <td style="font-family: inherit; font-size: inherit; color: inherit; padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; text-align: left; background-clip: initial; background-color: rgb(255, 255, 255); vertical-align: top; word-wrap: break-word;">{{ CompatUnknown() }}</td>
+    <td style="font-family: inherit; font-size: inherit; color: inherit; padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; text-align: left; background-clip: initial; background-color: rgb(255, 255, 255); vertical-align: top; word-wrap: break-word;">{{ CompatUnknown() }}</td>
+    <td style="font-family: inherit; font-size: inherit; color: inherit; padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; text-align: left; background-clip: initial; background-color: rgb(255, 255, 255); vertical-align: top; word-wrap: break-word;">{{ CompatUnknown() }}</td>
+   </tr>
+  </tbody>
+ </table>
+</div>
+<p> </p>