initial commit

2 files changed, 284 insertions, 0 deletions

diff --git a/files/ja/web/api/resource_timing_api/index.html b/files/ja/web/api/resource_timing_api/index.html
new file mode 100644
index 0000000000..4f76b911b0
--- /dev/null
+++ b/files/ja/web/api/resource_timing_api/index.html
@@ -0,0 +1,70 @@
+---
+title: Resource Timing API
+slug: Web/API/Resource_Timing_API
+translation_of: Web/API/Resource_Timing_API
+---
+<div>{{DefaultAPISidebar("Resource Timing API")}}</div>
+
+<p><strong><code>Resource Timing</code></strong> インターフェイスは、アプリケーションの<em>リソース</em>のロードに関する詳細なネットワークタイミングデータの取得と分析を可能にします。<span class="tlid-translation translation" lang="ja"><span title="">アプリケーションはタイミングメトリックを使用して、たとえば、</span></span>{{domxref("XMLHttpRequest")}}<span class="tlid-translation translation" lang="ja"><span title="">、</span></span>{{SVGElement("SVG","SVG element")}}<span class="tlid-translation translation" lang="ja"><span title="">、画像、スクリプトなど特定のリソースをロードするのにかかる時間を決定できます。</span></span></p>
+
+<p>インターフェイスのプロパティは、リダイレクトの開始時間と終了時間、DNS ルックアップの開始時間と終了時間、リクエストの開始時間、レスポンスの開始時間と終了時間などネットワークイベントに対して {{domxref("DOMHighResTimeStamp","high-resolution timestamps", "", 1)}} のリソースロードタイムラインを作成します。このインタフェースには、取得したリソースのサイズや取得を開始したリソースの種類に関するデータを提供するその他のプロパティも含まれています。</p>
+
+<p>このドキュメントでは、<code>Resource Timing</code> インターフェイスの概要を説明します。例を含むインターフェイスの詳細については、各インターフェイスのリファレンスページ、<a href="/ja/docs/Web/API/Resource_Timing_API/Using_the_Resource_Timing_API">リソースタイミング API の使用</a>、および {{anch("あわせて参照")}} セクションの参照を参照してください。リソースタイミング処理モデルのグラフィック表示については、<a href="https://w3c.github.io/resource-timing/#process">リソースタイミングフェーズ</a>の図を参照してください。</p>
+
+<p class="note">The <code>PerformanceResourceTiming</code> interface extends the {{domxref("PerformanceEntry")}} for {{domxref("PerformanceEntry","performance entries", "", 1)}} which have an {{domxref("PerformanceEntry.entryType","entryType")}} of "<code>resource</code>".</p>
+
+<h2 id="High-resolution_タイムスタンプ">High-resolution タイムスタンプ</h2>
+
+<p>Several of the <code>Resource Timing</code> properties return <em>high-resolution timestamps</em>. These timestamps have a <code>{{domxref("DOMHighResTimeStamp")}}</code> type and as its name implies, they represent a high-resolution point in time. This type is a <code>double</code> and its value is a discrete point in time or the difference in time between two discrete points in time.</p>
+
+<p>The unit of <code>DOMHighResTimeStamp</code> is milliseconds and should be accurate to 5 µs (microseconds). However, If the browser is unable to provide a time value accurate to 5 µs (because, for example, due to hardware or software constraints), the browser can represent a the value as a time in milliseconds accurate to a millisecond.</p>
+
+<h2 id="リソースロードタイムスタンプ">リソースロードタイムスタンプ</h2>
+
+<p>An application can get timestamps for the various stages used to load a resource. The first property in the processing model is {{domxref("PerformanceEntry.startTime","startTime")}} which returns the timestamp immediately before the resource loading process begins. The {{domxref("PerformanceResourceTiming.fetchStart","fetchStart")}} timestamps follows and redirect processing (if applicable) and preceeds DNS lookup. The next stages are {{domxref('PerformanceResourceTiming.connectStart','connectStart')}} and {{domxref('PerformanceResourceTiming.connectEnd','connectEnd')}} which are the timestamps immediately before and after connecting to the server, respectively. The last three timestamps are, in order: {{domxref('PerformanceResourceTiming.requestStart','requestStart')}} - the timestamp before the browser starts requesting the resource from the server; {{domxref('PerformanceResourceTiming.responseStart','responseStart')}} - the timestamp after the browser receives the first byte of the response from the server; and {{domxref('PerformanceResourceTiming.responseEnd','responseEnd')}} - the timestamp after the browser receives the last byte of the resource. If the resource is loaded via a secure connection a {{domxref('PerformanceResourceTiming.secureConnectionStart','secureConnectionStart')}} timestamp will be available between the connection start and end events.</p>
+
+<div class="note">
+<p>When {{Glossary("CORS")}} is in effect, many of these values are returned as zero unless the server's access policy permits these values to be shared. This requires the server providing the resource to send the <code>Timing-Allow-Origin</code> HTTP response header with a value specifying the origin or origins which are allowed to get the restricted timestamp values.</p>
+
+<p>The properties which are returned as 0 by default when loading a resource from a domain other than the one of the web page itself: <code>redirectStart</code>, <code>redirectEnd</code>, <code>domainLookupStart</code>, <code>domainLookupEnd</code>, <code>connectStart</code>, <code>connectEnd</code>, <code>secureConnectionStart</code>, <code>requestStart</code>, and <code>responseStart</code>.</p>
+</div>
+
+<p>The <code>{{domxref("PerformanceResourceTiming")}}</code> interface also includes several network timing properties. The {{domxref("PerformanceResourceTiming.redirectStart","redirectStart")}} and {{domxref("PerformanceResourceTiming.redirectEnd","redirectEnd")}} properties return {{domxref("DOMHighResTimeStamp","timestamps")}} for redirect start and end times, respectively. Likewise, the The {{domxref("PerformanceResourceTiming.domainLookupStart","domainLookupStart")}} and {{domxref("PerformanceResourceTiming.domainLookupEnd","domainLookupEnd")}} properties return {{domxref("DOMHighResTimeStamp","timestamps")}} for DNS lookup start and end times, respectively.</p>
+
+<p><em>This would be a nice place to have a diagram showing the relationships between these segments of the resource loading time.</em></p>
+
+<h2 id="リソースサイズ">リソースサイズ</h2>
+
+<p>The {{domxref("PerformanceResourceTiming")}} interface has three properties that can be used to obtain size data about a resource. The {{domxref('PerformanceResourceTiming.transferSize','transferSize')}} property returns the size (in octets) of the fetched resource including the response header fields plus the response payload body.</p>
+
+<p>The {{domxref('PerformanceResourceTiming.encodedBodySize','encodedBodySize')}} property returns the size (in octets) received from the fetch (HTTP or cache), of the <em>payload body</em>, <strong>before</strong> removing any applied content-codings. {{domxref('PerformanceResourceTiming.decodedBodySize','decodedBodySize')}} returns the size (in octets) received from the fetch (HTTP or cache) of the <em>message body</em>, <strong>after</strong> removing any applied content-codings.</p>
+
+<h2 id="その他のプロパティ">その他のプロパティ</h2>
+
+<p>The {{domxref('PerformanceResourceTiming.nextHopProtocol','nextHopProtocol')}} property returns the <em>network protocol</em> used to fetch the resource.</p>
+
+<p>The {{domxref('PerformanceResourceTiming.initiatorType','initiatorType')}} property returns the <em>type</em> of resource that initiated the performance entry such as "<code>css</code>" for a CSS resource, "<code>xmlhttprequest</code>" for an XMLHttpRequest and "<code>img</code>" for an image (such as a JPEG).</p>
+
+<p>If the current context is a {{domxref("Worker","worker")}}, the {{domxref('PerformanceResourceTiming.workerStart','workerStart')}} property can be used to obtain a {{domxref("DOMHighResTimeStamp")}} when the worker was started.</p>
+
+<h2 id="メソッド">メソッド</h2>
+
+<p>The Resource Timing API includes two methods that extend the {{domxref("Performance")}} interface. The {{domxref("Performance.clearResourceTimings","clearResourceTimings()")}} method removes all "<code>resource</code>" type performance entries from the browser's <em>resource</em> performance entry buffer. The {{domxref("Performance.setResourceTimingBufferSize","setResourceTimingBufferSize()")}} method sets the resource performance entry buffer size to the specified number of resource {{domxref("PerformanceEntry","performance entries")}}.</p>
+
+<p>The {{domxref("PerformanceResourceTiming")}} interface's {{domxref("PerformanceResourceTiming.toJSON","toJSON()")}} method returns a JSON serialization of a "<code>resource</code>" type {{domxref("PerformanceEntry","performance entry")}}.</p>
+
+<h2 id="実装状況">実装状況</h2>
+
+<p>As shown in the {{domxref("PerformanceResourceTiming")}} interface's <a href="/Web/API/PerformanceResourceTiming#Browser_compatibility">Browser Compatibility</a> table, most of these interfaces are broadly implemented by desktop browsers. However, note that some properties have little to no implementation so see each property's "Browser compatibility" section for more specific interoperability data.</p>
+
+<p>To test your browser's support for these interfaces, run the <code><a href="https://mdn.github.io/dom-examples/performance-apis/perf-api-support.html">perf-api-support</a></code> application.</p>
+
+<h2 id="あわせて参照">あわせて参照</h2>
+
+<ul>
+ <li><a href="https://w3c.github.io/resource-timing/">Resource Timing Standard</a>; W3C Editor's Draft</li>
+ <li><a href="http://caniuse.com/#search=resource-timing">CanIUse data</a></li>
+ <li><a href="http://www.stevesouders.com/blog/2014/08/21/resource-timing-practical-tips/">Resource Timing practical tips</a>; Steve Souders; 2014 August 21</li>
+ <li><a href="http://googledevelopers.blogspot.ca/2013/12/measuring-network-performance-with.html">Measuring network performance with Resource Timing API</a>; Ilya Grigorik; 2013 December 11</li>
+ <li><a href="http://siusin.github.io/perf-timing-primer/">A Primer for Web Performance Timing APIs</a>; Xiaoqian Wu; W3C Editor's Draft</li>
+</ul>
diff --git a/files/ja/web/api/resource_timing_api/using_the_resource_timing_api/index.html b/files/ja/web/api/resource_timing_api/using_the_resource_timing_api/index.html
new file mode 100644
index 0000000000..6a28850107
--- /dev/null
+++ b/files/ja/web/api/resource_timing_api/using_the_resource_timing_api/index.html
@@ -0,0 +1,214 @@
+---
+title: Using the Resource Timing API
+slug: Web/API/Resource_Timing_API/Using_the_Resource_Timing_API
+tags:
+  - API
+  - Web
+  - Web パフォーマンス
+  - Web 開発
+  - タイミング
+  - パフォーマンス
+  - リソースタイミング
+  - リソースタイミング API
+translation_of: Web/API/Resource_Timing_API/Using_the_Resource_Timing_API
+---
+<div>{{DefaultAPISidebar("Resource Timing API")}}</div>
+
+<p><strong>Resource Timing API</strong> は、アプリケーションのリソースのロードに関する詳細なネットワークタイミングデータを取得して分析する方法を提供します。<span class="tlid-translation translation" lang="ja"><span title="">アプリケーションはタイミングメトリックを使用して、たとえば、</span></span>{{domxref("XMLHttpRequest")}}<span class="tlid-translation translation" lang="ja"><span title="">、</span></span>{{SVGElement("SVG","SVG element")}}<span class="tlid-translation translation" lang="ja"><span title="">、画像、スクリプトなど特定のリソースを取得するの</span></span><span class="tlid-translation translation" lang="ja"><span title="">にかかる時間を判断できます。</span></span></p>
+
+<p>The interface's properties create a <em>resource loading timeline</em> with {{domxref("DOMHighResTimeStamp","high-resolution timestamps")}} for network events such as redirect start and end times, fetch start, DNS lookup start and end times, response start and end times, etc. The interface also includes other properties that provide data about the size of the fetched resource as well as the <em>type</em> of resource that initiated the fetch.</p>
+
+<p>This document shows the use of Resource Timing interfaces. For more details about the interfaces, including examples, see each interface's reference page and the references in the {{anch("See also")}} section.</p>
+
+<p>A <em>live</em> version of the examples is available on <a href="https://mdn.github.io/dom-examples/performance-apis/Using_the_Resource_Timing_API.html">Github</a>, as is the <a href="https://github.com/mdn/dom-examples/blob/master/performance-apis/Using_the_Resource_Timing_API.html">source code</a>. Pull requests and <a href="https://github.com/mdn/dom-examples/issues">bug reports</a> are welcome.</p>
+
+<h2 id="Resource_loading_phases">Resource loading phases</h2>
+
+<p>An application can get timestamps for the various phases of resource loading such as redirection, DNS lookup, and TCP connection setup. Those phases and their property names are illustrated in Figure 1.</p>
+
+<p><img alt="Graphic of Resource Timing timestamps" src="https://mdn.mozillademos.org/files/12093/ResourceTiming-TimeStamps.jpg" style="height: 540px; width: 720px;"><br>
+ Figure 1. Resource timing properties</p>
+
+<p>An application developer can use the property values to calculate the length of time a phase takes and that information can help diagnose performance issues.</p>
+
+<h2 id="Timing_resource_loading_phases">Timing resource loading phases</h2>
+
+<p>The following example illustrates using the resource timing properties to calculate the amount of time the following phases take: redirection ({{domxref("PerformanceResourceTiming.redirectStart","redirectStart")}} and {{domxref("PerformanceResourceTiming.redirectEnd","redirectEnd")}} ), DNS lookup ({{domxref("PerformanceResourceTiming.domainLookupStart","domainLookupStart")}} and {{domxref("PerformanceResourceTiming.domainLookupEnd","domainLookupEnd")}}), TCP handshake ({{domxref('PerformanceResourceTiming.connectStart','connectStart')}} and {{domxref('PerformanceResourceTiming.connectEnd','connectEnd')}}), and response ({{domxref('PerformanceResourceTiming.responseStart','responseStart')}} and {{domxref('PerformanceResourceTiming.responseEnd','responseEnd')}}). This example also calculates the time from the start of the fetch and request start phases ({{domxref("PerformanceResourceTiming.fetchStart","fetchStart")}} and {{domxref("PerformanceResourceTiming.requestStart","requestStart")}}, respectively), until the response has ended ({{domxref('PerformanceResourceTiming.responseEnd','responseEnd')}}). This timing data provides a detailed profile of the resource loading phases and this data can be used to help identify performance bottlenecks.</p>
+
+<pre class="brush: js">function calculate_load_times() {
+  // Check performance support
+  if (performance === undefined) {
+    console.log("= Calculate Load Times: performance NOT supported");
+    return;
+  }
+
+  // Get a list of "resource" performance entries
+  var resources = performance.getEntriesByType("resource");
+  if (resources === undefined || resources.length &lt;= 0) {
+    console.log("= Calculate Load Times: there are NO `resource` performance records");
+    return;
+  }
+
+  console.log("= Calculate Load Times");
+  for (var i=0; i &lt; resources.length; i++) {
+    console.log("== Resource[" + i + "] - " + resources[i].name);
+    // Redirect time
+    var t = resources[i].redirectEnd - resources[i].redirectStart;
+    console.log("... Redirect time = " + t);
+
+    // DNS time
+    t = resources[i].domainLookupEnd - resources[i].domainLookupStart;
+    console.log("... DNS lookup time = " + t);
+
+    // TCP handshake time
+    t = resources[i].connectEnd - resources[i].connectStart;
+    console.log("... TCP time = " + t);
+
+    // Secure connection time
+    t = (resources[i].secureConnectionStart &gt; 0) ? (resources[i].connectEnd - resources[i].secureConnectionStart) : "0";
+    console.log("... Secure connection time = " + t);
+
+    // Response time
+    t = resources[i].responseEnd - resources[i].responseStart;
+    console.log("... Response time = " + t);
+
+    // Fetch until response end
+    t = (resources[i].fetchStart &gt; 0) ? (resources[i].responseEnd - resources[i].fetchStart) : "0";
+    console.log("... Fetch until response end time = " + t);
+
+    // Request start until reponse end
+    t = (resources[i].requestStart &gt; 0) ? (resources[i].responseEnd - resources[i].requestStart) : "0";
+    console.log("... Request start until response end time = " + t);
+
+    // Start until reponse end
+    t = (resources[i].startTime &gt; 0) ? (resources[i].responseEnd - resources[i].startTime) : "0";
+    console.log("... Start until response end time = " + t);
+  }
+}
+</pre>
+
+<h2 id="Size_matters">Size matters?</h2>
+
+<p>アプリケーションのリソースのサイズはアプリケーションのパフォーマンスに影響を与える可能性があるため、リソースサイズに関する正確なデータを取得することが重要になる可能性があります（特に非ホストリソースの場合）。{{domxref("PerformanceResourceTiming")}} インターフェースには、リソースに関するサイズデータを取得するために使用できる3つのプロパティがあります。 {{domxref('PerformanceResourceTiming.transferSize','transferSize')}}  プロパティは、レスポンスヘッダフィールドとレスポンスペイロードボディを含む、取得したリソースのサイズ（オクテット単位）を返します。{{domxref('PerformanceResourceTiming.encodedBodySize','encodedBodySize')}} プロパティは、適用されたコンテンツコーディングを削除する前に、フェッチ（HTTPまたはキャッシュ）から受け取ったサイズ（オクテット単位）を返します。{{domxref('PerformanceResourceTiming.decodedBodySize','decodedBodySize')}} は、適用されたコンテンツコーディングを削除した後、メッセージ本文のフェッチ（HTTPまたはキャッシュ）から受け取ったサイズ（オクテット単位）を返します。</p>
+
+<p>次の例は、これら3つのプロパティの使い方を示しています。</p>
+
+<pre class="brush: js">function display_size_data(){
+  // Check for support of the PerformanceResourceTiming.*size properties and print their values
+  // if supported.
+  if (performance === undefined) {
+    console.log("= Display Size Data: performance NOT supported");
+    return;
+  }
+
+  var list = performance.getEntriesByType("resource");
+  if (list === undefined) {
+    console.log("= Display Size Data: performance.getEntriesByType() is  NOT supported");
+    return;
+  }
+
+  // For each "resource", display its *Size property values
+  console.log("= Display Size Data");
+  for (var i=0; i &lt; list.length; i++) {
+    console.log("== Resource[" + i + "] - " + list[i].name);
+    if ("decodedBodySize" in list[i])
+      console.log("... decodedBodySize[" + i + "] = " + list[i].decodedBodySize);
+    else
+      console.log("... decodedBodySize[" + i + "] = NOT supported");
+
+    if ("encodedBodySize" in list[i])
+      console.log("... encodedBodySize[" + i + "] = " + list[i].encodedBodySize);
+    else
+      console.log("... encodedBodySize[" + i + "] = NOT supported");
+
+    if ("transferSize" in list[i])
+      console.log("... transferSize[" + i + "] = " + list[i].transferSize);
+    else
+      console.log("... transferSize[" + i + "] = NOT supported");
+  }
+}
+</pre>
+
+<h2 id="Managing_the_resource_buffer">Managing the resource buffer</h2>
+
+<p>ブラウザは、リソースタイミングバッファ内で少なくとも150のリソースタイミングパフォーマンスエントリをサポートする必要がありますが、アプリケーションによっては、その制限を超えるリソースを使用することがあります。開発者がバッファサイズを管理しやすくするために、Resource Timingは{{domxref("Performance")}}インターフェースを拡張する2つのメソッドを定義します。{{domxref("Performance.clearResourceTimings","clearResourceTimings()")}} メソッドは、ブラウザのリソースパフォーマンスエントリバッファからすべての "リソース"タイプのパフォーマンスエントリを削除します。 {{domxref("Performance.setResourceTimingBufferSize","setResourceTimingBufferSize()")}} メソッドは、リソースパフォーマンスエントリのバッファサイズを、指定された数のリソースに設定します{{domxref("PerformanceEntry","performance entries")}}.。</p>
+
+
+
+<p>次の例は、これら2つの方法の使用方法を示しています。</p>
+
+<pre class="brush: js">function clear_resource_timings() {
+  if (performance === undefined) {
+    console.log("= performance.clearResourceTimings(): peformance NOT supported");
+    return;
+  }
+  // Check if Performance.clearResourceTiming() is supported
+  console.log ("= Print performance.clearResourceTimings()");
+  var supported = typeof performance.clearResourceTimings == "function";
+  if (supported) {
+    console.log("... Performance.clearResourceTimings() = supported");
+    performance.clearResourceTimings();
+  } else {
+    console.log("... Performance.clearResourceTiming() = NOT supported");
+    return;
+  }
+  // getEntries should now return zero
+  var p = performance.getEntriesByType("resource");
+  if (p.length == 0)
+    console.log("... Performance data buffer cleared");
+  else
+    console.log("... Performance data buffer NOT cleared (still have `" + p.length + "` items");
+}
+
+function set_resource_timing_buffer_size(n) {
+  if (performance === undefined) {
+    console.log("= performance.setResourceTimingBufferSize(): peformance NOT supported");
+    return;
+  }
+  // Check if Performance.setResourceTimingBufferSize() is supported
+  console.log ("= performance.setResourceTimingBufferSize()");
+  var supported = typeof performance.setResourceTimingBufferSize == "function";
+  if (supported) {
+    console.log("... Performance.setResourceTimingBufferSize() = supported");
+    performance.setResourceTimingBufferSize(n);
+  } else {
+    console.log("... Performance.setResourceTimingBufferSize() = NOT supported");
+  }
+}
+</pre>
+
+<p>The {{domxref("Performance")}} interface has a {{domxref("Performance.onresourcetimingbufferfull","onresourcetimingbufferfull")}} event handler that gets called (with an {{domxref("Event")}} of type {{domxref("Event.type")}} of "{{event("resourcetimingbufferfull")}}") when the browser's resource performance entry buffer is full. The following code example sets a {{domxref("Performance.onresourcetimingbufferfull","onresourcetimingbufferfull")}} event callback in the <code>init()</code> function.</p>
+
+<pre class="brush: js">function buffer_full(event) {
+  console.log("WARNING: Resource Timing Buffer is FULL!");
+  set_resource_timing_buffer_size(200);
+}
+
+function init() {
+  // load some image to trigger "resource" fetch events
+  var image1 = new Image();
+  image1.src = "https://developer.mozilla.org/static/img/opengraph-logo.png";
+  var image2 = new Image();
+  image2.src = "http://mozorg.cdn.mozilla.net/media/img/firefox/firefox-256.e2c1fc556816.jpg"
+
+  // Set a callback if the resource buffer becomes filled
+  performance.onresourcetimingbufferfull = buffer_full;
+}
+</pre>
+
+<h2 id="Coping_with_CORS">Coping with CORS</h2>
+
+<p>When {{Glossary("CORS")}} is in effect, many of the timing properties' values are returned as zero unless the server's access policy permits these values to be shared. This requires the server providing the resource to send the {{httpheader("Timing-Allow-Origin")}} HTTP response header with a value specifying the origin or origins which are allowed to get the restricted timestamp values.</p>
+
+<div class="note">
+<p>The properties which are returned as 0 by default when loading a resource from a domain other than the one of the web page itself: <code>redirectStart</code>, <code>redirectEnd</code>, <code>domainLookupStart</code>, <code>domainLookupEnd</code>, <code>connectStart</code>, <code>connectEnd</code>, <code>secureConnectionStart</code>, <code>requestStart</code>, and <code>responseStart</code>.</p>
+</div>
+
+<h2 id="あわせて参照">あわせて参照</h2>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Tools/Performance">Firefox Performance Tool</a></li>
+ <li><a href="https://w3c.github.io/resource-timing/">Resource Timing Standard</a>; W3C Editor's Draft</li>
+ <li><a href="http://www.stevesouders.com/blog/2014/08/21/resource-timing-practical-tips/">Resource Timing practical tips</a>; Steve Souders; 2014 August 21</li>
+ <li><a href="http://googledevelopers.blogspot.ca/2013/12/measuring-network-performance-with.html">Measuring network performance with Resource Timing API</a>; Ilya Grigorik; 2013 December 11</li>
+</ul>