initial commit

2 files changed, 311 insertions, 0 deletions

diff --git a/files/zh-cn/web/api/navigation_timing_api/index.html b/files/zh-cn/web/api/navigation_timing_api/index.html
new file mode 100644
index 0000000000..a0cc8c3d75
--- /dev/null
+++ b/files/zh-cn/web/api/navigation_timing_api/index.html
@@ -0,0 +1,191 @@
+---
+title: Navigation Timing API
+slug: Web/API/Navigation_timing_API
+tags:
+  - Navigation Timing API
+translation_of: Web/API/Navigation_timing_API
+---
+<p>{{DefaultAPISidebar("Navigation Timing")}}</p>
+
+<p><strong>Navigation Timing API</strong> 提供了可用于衡量一个网站性能的数据。与用于相同目的的其他基于JavaScript的机制不同，该API可以提供可以更有用和更准确的端到端延迟数据。</p>
+
+<p> </p>
+
+<h2 id="Concepts_and_usage">Concepts and usage</h2>
+
+<p>你可以使用Navigation Timing API在客户端收集性能数据，并用{{domxref("XMLHttpRequest")}} 或其它技术传送到服务端。同时，该API使你可以衡量之前难以获取的数据，如卸载前一个页面的时间，在域名解析上的时间，在执行{{event("load")}}事件处理器上花费的总时间等。</p>
+
+<p> </p>
+
+<h2 id="Interfaces">Interfaces</h2>
+
+<p>{{domxref("Performance")}}</p>
+
+<p>返回一个Performance对象。该对象由High Resolution Time API定义，Navigation Timing API 在此基础上增加了两个属性：{{domxref("Performance.timing", "timing")}} 和 {{domxref("Performance.navigation", "navigation")}}</p>
+
+<p>{{domxref("PerformanceNavigationTiming")}}</p>
+
+<p>提供了方法和属性来存取关于游览器文档navigation事件的相关数据。如文档实际加载/卸载的时间。</p>
+
+<p>{{deprecated_inline}} {{domxref("PerformanceTiming")}}</p>
+
+<p>曾被用来获取{{domxref("Performance.timing", "timing")}}的值，用来衡量页面性能。</p>
+
+<p>{{deprecated_inline}}  {{domxref("PerformanceNavigation")}}</p>
+
+<p>曾被用来获取{{domxref("Performance.navigation", "navigation")}}的值，用来描述加载相关的操作。</p>
+
+<p> </p>
+
+<p> </p>
+
+<p>以下示例显示了如何测量感知加载时间：</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>URL<code> 加载。</code></p>
+
+<p>window.performance.navigation.type：</p>
+
+<table class="standard-table" style="font-size: 14px;">
+ <thead>
+  <tr>
+   <th scope="col">Constant</th>
+   <th scope="col">Value</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><a name="const_next"><code>TYPE_NAVIGATE</code></a></td>
+   <td>0</td>
+   <td>
+    <p>导航开始于点击链接、或者在用户代理中输入 URL、或者表单提交、或者通过除下表中 TYPE_RELOAD 和 TYPE_BACK_FORWARD 的脚本初始化操作。</p>
+   </td>
+  </tr>
+  <tr>
+   <td><a name="const_next_no_duplicate"><code>TYPE_RELOAD</code></a></td>
+   <td>1</td>
+   <td>
+    <p>通过刷新操作或者 location.reload() 方法导航。</p>
+   </td>
+  </tr>
+  <tr>
+   <td><a name="const_prev"><code>TYPE_BACK_FORWARD</code></a></td>
+   <td>2</td>
+   <td>
+    <p>通过历史遍历操作导航。</p>
+   </td>
+  </tr>
+  <tr>
+   <td><a name="const_prev_no_duplicate"><code>TYPE_UNDEFINED</code></a></td>
+   <td>255</td>
+   <td>
+    <p>其他非以上类型的导航。</p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<p><code>window.performance.navigation.redirectCount 表示到达最终页面前，重定向的次数（如果有的话）。</code></p>
+
+<p>Navigation Timing API 可以用于收集客户端性能数据，然后通过 XHR 发送给服务端。还可以计算那些其他方法难以计算的数据，如卸载( unload )上一个页面的时间、域名查找时间、window.onload 的总时间等等。</p>
+
+<h2 id="示例">示例</h2>
+
+<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>
+
+<h2 id="Browser_Compatibility" name="Browser_Compatibility">规范</h2>
+
+<ul>
+ <li><a class="external" href="http://www.w3.org/TR/navigation-timing/" title="http://www.w3.org/TR/navigation-timing/">https://w3c.github.io/navigation-timing/</a></li>
+</ul>
+
+<h2 id="浏览器兼容性">浏览器兼容性</h2>
+
+<p>{{ CompatibilityTable }}</p>
+
+<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</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>6.0</td>
+   <td>{{ CompatGeckoDesktop("7") }}</td>
+   <td>9</td>
+   <td>15.0</td>
+   <td>8</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>4.0</td>
+   <td>{{ CompatGeckoDesktop("15") }}</td>
+   <td>9</td>
+   <td>15.0</td>
+   <td>8</td>
+  </tr>
+ </tbody>
+</table>
+</div>
diff --git a/files/zh-cn/web/api/navigation_timing_api/using_navigation_timing/index.html b/files/zh-cn/web/api/navigation_timing_api/using_navigation_timing/index.html
new file mode 100644
index 0000000000..6f8c12dcf9
--- /dev/null
+++ b/files/zh-cn/web/api/navigation_timing_api/using_navigation_timing/index.html
@@ -0,0 +1,120 @@
+---
+title: Using Navigation Timing
+slug: Web/API/Navigation_timing_API/Using_Navigation_Timing
+tags:
+  - Navigation Timing
+  - Navigation Timing API
+  - Optimization
+  - Performance
+translation_of: Web/API/Navigation_timing_API/Using_Navigation_Timing
+---
+<p>{{DefaultAPISidebar("Navigation Timing")}}</p>
+
+<p>Navigation Timing 接口使你可以轻松获取详细且高度准确的计时信息，以帮助从你的网站代码或资源隔离出性能问题。与其他工具或库不同，Navigation Timing 接口使你可以收集这些只有浏览器才能提供的信息，其准确性要比其他技术大大提高。它还具有能够提供用户所感知的计时信息而不是与用户体验无关的数据的优势。</p>
+
+<h2 id="收集计时信息">收集计时信息</h2>
+
+<p>使用该API就像使用{{domxref("window.performance")}}获取{{domxref("Performance")}}对象并在返回的对象中查找所需内容一样简单。比如，为了测量页面的感知到的加载时间：</p>
+
+<pre>window.addEventListener("load", function() {
+  let now = new Date().getTime();
+  let loadingTime = now - performance.timing.navigationStart;
+
+  document.querySelector(".output").innerText =
+        loadingTime + " ms";
+}, false);</pre>
+
+<p>在发生{{event("load")}}事件时执行的该代码从当前时间中减去浏览器导航开始时记录的时间({{domxref("PerformanceTiming.navigationStart", "performance.timing.navigationStart")}})，并通过将该信息插入到元素中，输出到屏幕。</p>
+
+<div class="hidden">
+<h4 id="HTML">HTML</h4>
+
+<pre>&lt;div class="output"&gt;
+&lt;/div&gt;</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre>.output {
+  border: 1px solid #bbb;
+  font: 16px "Open Sans", "Helvetica", "Arial", sans-serif;
+}</pre>
+</div>
+
+<p>结合适当的HTML和CSS，结果就是：</p>
+
+<p>{{EmbedLiveSample("Collecting_timing_information", 500, 80)}}</p>
+
+<p>列出的值适用于上面展示了示例的{{HTMLElement("iframe")}}。</p>
+
+<p>你可以在{{domxref("PerformanceTiming")}}中查找可用的计时值的列表，请参见{{domxref("PerformanceTiming")}}接口的“<a href="https://wiki.developer.mozilla.org/zh-CN/docs/Web/API/PerformanceTiming">属性</a>”部分。</p>
+
+<h2 id="确定导航类型">确定导航类型</h2>
+
+<p>为了将从 {{domxref("PerformanceTiming")}}获取到的计时信息放入正确的观点，你需要更多地了解发生了哪种加载操作。特别是你需要知道：</p>
+
+<ul>
+ <li>这是加载还是重新加载？</li>
+ <li>这是历史的导航还是前进或后退？</li>
+ <li>完成导航需要多少个（如果有）重定向？</li>
+</ul>
+
+<p>此信息由{{domxref("Performance.navigation")}}属性提供，该属性返回包含所需信息的{{domxref("PerformanceNavigation")}}对象。</p>
+
+<p>让我们将此信息添加到上面的示例中。 新代码如下所示：</p>
+
+<pre>window.addEventListener("load", function() {
+  let now = new Date().getTime();
+  let loadingTime = now - performance.timing.navigationStart;
+
+  output = "Load time: " + loadingTime + " ms&lt;br/&gt;";
+  output += "Navigation type: ";
+
+  switch(performance.navigation.type) {
+      case PerformanceNavigation.TYPE_NAVIGATE:
+        output += "Navigation";
+      break;
+    case PerformanceNavigation.TYPE_RELOAD:
+        output += "Reload";
+      break;
+    case PerformanceNavigation.TYPE_BACK_FORWARD:
+        output += "History";
+      break;
+    default:
+        output += "Unknown";
+      break;
+  }
+
+  output += "&lt;br/&gt;Redirects: " +
+      performance.navigation.redirectCount;
+  document.querySelector(".output").innerHTML = output;
+}, false);</pre>
+
+<p>这通过查看<code>performance.navigation</code>对象的内容来修改了前面的示例。{{domxref("PerformanceNavigation.type", "performance.navigation.type")}}指示发生了哪种加载操作：导航，重新加载或浏览器历史记录的切换。我们还从{{domxref("PerformanceNavigation.redirectCount", "performance.navigation.redirectCount")}}获取导航期间发生的重定向次数。就像以前的页面加载时间一样，此信息通过插入到具有<code>"output"</code>类的元素中输出到屏幕上。</p>
+
+<div class="hidden">
+<h4 id="HTML_2">HTML</h4>
+
+<pre>&lt;div class="output"&gt;
+&lt;/div&gt;</pre>
+
+<h4 id="CSS_2">CSS</h4>
+
+<pre>.output {
+  border: 1px solid #bbb;
+  font: 16px "Open Sans", "Helvetica", "Arial", sans-serif;
+}</pre>
+</div>
+
+<p>使用此代码后，结果如下所示：</p>
+
+<p>{{EmbedLiveSample("Determining_navigation_type", 500, 120)}}</p>
+
+<p>列出的值适用于展示示例的 {{HTMLElement("iframe")}} 。</p>
+
+<h2 id="也可以看看">也可以看看</h2>
+
+<ul>
+ <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/API/Navigation_timing_API">Navigation Timing API</a></li>
+ <li>{{domxref("window.performance")}}</li>
+ <li>{{domxref("Performance")}}, {{domxref("PerformanceTiming")}}, and {{domxref("PerformanceNavigation")}}</li>
+</ul>