initial commit

2 files changed, 272 insertions, 0 deletions

diff --git a/files/ja/web/api/performance_timeline/index.html b/files/ja/web/api/performance_timeline/index.html
new file mode 100644
index 0000000000..b006e32da1
--- /dev/null
+++ b/files/ja/web/api/performance_timeline/index.html
@@ -0,0 +1,74 @@
+---
+title: パフォーマンスタイムライン
+slug: Web/API/Performance_Timeline
+tags:
+  - Web パフォーマンス
+  - ガイド
+  - 概要
+translation_of: Web/API/Performance_Timeline
+---
+<div>{{DefaultAPISidebar("Performance Timeline API")}}</div>
+
+<p><strong>パフォーマンスタイムライン</strong> API は、{{domxref("Performance")}} インターフェイスへの拡張を定義して、アプリケーション内のクライアントサイドの待ち時間の測定をサポートします。 拡張機能は、特定のフィルタ基準に基づいて{{domxref("PerformanceEntry","performance entry metrics", '', 'true')}} を取得するためのインターフェイスを提供します。この規格には、特定のパフォーマンスイベントがブラウザのパフォーマンスタイムラインに追加されたときに通知される <em>{{anch("Performance_Observers","performance observer", '', 'true')}}</em> コールバックをアプリケーションで定義できるインターフェイスも含まれます。</p>
+
+<p>このドキュメントは規格のインターフェイスの概要を提供します。インターフェイスの詳細については、リファレンスページおよび<a href="/ja/Web/API/Performance_Timeline/Using_Performance_Timeline">パフォーマンスタイムラインの使用</a>を参照してください。</p>
+
+<h2 id="Performance_拡張">Performance 拡張</h2>
+
+<p>パフォーマンスタイムライン API は、{{domxref("Performance")}} インターフェイスを、指定されたフィルター基準に応じて一連の {{domxref("PerformanceEntry","パフォーマンスレコード (メトリック)")}} を取得するためのさまざまなメカニズムを提供する3つのメソッドで拡張します。メソッドは以下のとおりです。</p>
+
+<dl>
+ <dt>{{domxref("Performance.getEntries","getEntries()")}}</dt>
+ <dd>Returns all recorded {{domxref("PerformanceEntry","performance entries")}} or, optionally, the entries based on the specified {{domxref("PerformanceEntry.name","name")}}, {{domxref("PerformanceEntry.entryType","performance type")}} and/or the {{domxref("PerformanceEntry.initiatorType","initiatorType")}} (such as an HTML element).</dd>
+ <dt>{{domxref("Performance.getEntriesByName","getEntriesByName()")}}</dt>
+ <dd>Returns the recorded {{domxref("PerformanceEntry","performance entries")}} based on the specified {{domxref("PerformanceEntry.name","name")}} and optionally the {{domxref("PerformanceEntry.entryType","performance type")}}.</dd>
+ <dt>{{domxref("Performance.getEntriesByType","getEntriesByType()")}}</dt>
+ <dd>Returns the recorded {{domxref("PerformanceEntry","performance entries")}} based on the specified {{domxref("PerformanceEntry.entryType","performance type")}}.</dd>
+</dl>
+
+<h2 id="PerformanceEntry_インターフェイス">PerformanceEntry インターフェイス</h2>
+
+<p>The {{domxref("PerformanceEntry")}} interface encapsulates a single <em>performance entry</em> — that is, a single data point or metric in the <em>performance timeline</em>. This interface has the following four properties, and these properties are extended (with additional constraints) by other interfaces (such as {{domxref("PerformanceMark")}}):</p>
+
+<dl>
+ <dt>{{domxref("PerformanceEntry.name","name")}}</dt>
+ <dd>The name of the performance entry when the metric was created.</dd>
+ <dt>{{domxref("PerformanceEntry.entryType","entryType")}}</dt>
+ <dd>The type of performance metric (for example, "<code>mark</code>").</dd>
+ <dt>{{domxref("PerformanceEntry.startTime","startTime")}}</dt>
+ <dd>A {{domxref("DOMHighResTimeStamp","high resolution timestamp")}} representing the starting time for the performance entry.</dd>
+ <dt>{{domxref("PerformanceEntry.duration","duration")}}</dt>
+ <dd>A {{domxref("DOMHighResTimeStamp","high resolution timestamp", '', 'true')}} representing the time value of the duration of the performance event. (Some performance {{domxref("PerformanceEntry.entryType","entry types", '', 'true')}} have no concept of <em>duration</em> and this value is set to <code>'0'</code> for such types.)</dd>
+</dl>
+
+<p>This interface includes a {{domxref("PerformanceEntry.toJSON","toJSON()")}} method that returns the serialization of the {{domxref("PerformanceEntry")}} object. The serialization is specific to the performance entry's {{domxref("PerformanceEntry.entryType","type")}}.</p>
+
+<h2 id="Performance_オブザーバー">Performance オブザーバー</h2>
+
+<p>{{SeeCompatTable}}</p>
+
+<p>The <em>performance observer</em> interfaces allow an application to register an <em>observer</em> for specific performance event types, and when one of those event types is recorded, the application is <em>notified</em> of the event via the observer's callback function that was specified when the observer was created.</p>
+
+<p>When the observer (callback) is invoked, the callback's parameters include a <em>{{domxref("PerformanceObserverEntryList","performance observer entry list")}}</em> that contains only <em>observed</em> {{domxref("PerformanceEntry","performance entries")}}. That is, the list contains entries only for the event types that were specified when the observer's {{domxref("PerformanceObserver.observe","observe()")}} method was invoked. The {{domxref("PerformanceObserverEntryList","performance observer entry list")}} interface has the same three <code>getEntries*()</code> methods as the {{domxref("Performance")}} interface. However, note there is one key difference with these methods; the {{domxref("PerformanceObserverEntryList","performance observer entry list")}} versions are used to retrieve <em>observed</em> performance entries within the observer callback.</p>
+
+<p>Besides the {{domxref("PerformanceObserver","PerformanceObserver's")}} interface's {{domxref("PerformanceObserver.observe","observe()")}} method (which is used to register the {{domxref("PerformanceEntry.entryType","entry types")}} to <em>observe</em>), the {{domxref("PerformanceObserver")}} interface also has a {{domxref("PerformanceObserver.disconnect","disconnect()")}} method that stops an observer from receiving further events.</p>
+
+<p class="note">Performance observers were added to the <code>Level 2</code> version of the standard and were not widely implemented.</p>
+
+<h2 id="実装状況">実装状況</h2>
+
+<p>A summary of the interfaces' implementation status is provided below, including a link to more detailed information.</p>
+
+<ul>
+ <li>Performance interface extensions: As shown in the {{domxref("Performance")}} interface's <a href="/Web/API/Performance#Browser_compatibility">Browser Compatibility</a> table, most of these interfaces are broadly implemented by desktop browsers and have less support on mobile devices.</li>
+ <li>PerformanceEntry: As shown in the {{domxref("PerformanceEntry")}} interface's <a href="/Web/API/PerformanceEntry#Browser_compatibility">Browser Compatibility</a> table, most of these interfaces are broadly implemented by desktop browsers and have less support on mobile devices.</li>
+ <li>Performance Observers {{experimental_inline}}: As shown in the {{domxref("PerformanceObserver")}} interface's <a href="/Web/API/PerformanceObserver#Browser_compatibility">Browser Compatibility</a> table, this interface has no shipping implementations.</li>
+</ul>
+
+<p>To test your browser's support for these interfaces, run the <code><a href="http://mdn.github.io/web-performance/perf-api-support.html">perf-api-support</a></code> application.</p>
+
+<h2 id="あわせて参照">あわせて参照</h2>
+
+<ul>
+ <li><a href="http://siusin.github.io/perf-timing-primer/">A Primer for Web Performance Timing APIs</a></li>
+</ul>
diff --git a/files/ja/web/api/performance_timeline/using_performance_timeline/index.html b/files/ja/web/api/performance_timeline/using_performance_timeline/index.html
new file mode 100644
index 0000000000..cf2fb36ae1
--- /dev/null
+++ b/files/ja/web/api/performance_timeline/using_performance_timeline/index.html
@@ -0,0 +1,198 @@
+---
+title: パフォーマンスタイムラインの使用
+slug: Web/API/Performance_Timeline/Using_Performance_Timeline
+tags:
+  - Web パフォーマンス
+  - ガイド
+translation_of: Web/API/Performance_Timeline/Using_Performance_Timeline
+---
+<div>{{DefaultAPISidebar("Performance Timeline API")}}</div>
+
+<p><strong><a href="https://w3c.github.io/performance-timeline/">パフォーマンスタイムライン</a></strong>標準は、アプリケーション内でクライアント側の待ち時間の測定をサポートするための {{domxref("Performance")}} インターフェイスへの拡張を定義します。この規格には、特定のパフォーマンスイベントが発生したときにアプリケーションに通知することを可能にするインターフェイスも含まれています。同時に、これらのインターフェイスを使用してアプリケーションのパフォーマンスボトルネックを特定することができます。</p>
+
+<h2 id="Performance_拡張">Performance 拡張</h2>
+
+<p><strong>Performance Timeline</strong> extends the {{domxref("Performance")}} object with three methods that provide different mechanisms to get a set of {{domxref("PerformanceEntry","performance records (metrics)")}}, depending on the specified filter criteria. The following example show the usage of these methods {{domxref("Performance.getEntries","getEntries()")}}, {{domxref("Performance.getEntriesByName","getEntriesByName()")}} and {{domxref("Performance.getEntriesByType","getEntriesByType()")}}.</p>
+
+<pre class="brush: js">function log(s) {
+  var o = document.getElementsByTagName("output")[0];
+  o.innerHTML += s + " &lt;br&gt;";
+}
+function do_work (n) {
+  for (var i=0 ; i &lt; n; i++) {
+     var m = Math.random();
+  }
+}
+function print_perf_entry(pe) {
+  log("..name: "        + pe.name      +
+      "; entryType: " + pe.entryType +
+      "; startTime: " + pe.startTime +
+      "; duration: "  + pe.duration);
+}
+function print_PerformanceEntries() {
+  if (performance.mark === undefined) {
+    log("... performance.mark Not supported");
+    return;
+  }
+
+  // Create some performance entries via the mark() and measure() methods
+  performance.mark("Begin");
+  do_work(50000);
+  performance.mark("End");
+  do_work(50000);
+  performance.measure("Measure1", "Begin", "End");
+
+  // Use getEntries() to iterate all entries
+  var p = performance.getEntries();
+  for (var i=0; i &lt; p.length; i++) {
+    log("All Entry[" + i + "]");
+    print_perf_entry(p[i]);
+  }
+
+  // Use getEntries(name, entryType) to get specific entries
+  p = performance.getEntries({name : "Measure1", entryType: "measure"});
+  for (var i=0; i &lt; p.length; i++) {
+    log("Begin and Measure [" + i + "]");
+    print_perf_entry(p[i]);
+  }
+
+  // Use getEntriesByType() to get all "mark" entries
+  p = performance.getEntriesByType("mark");
+  for (var i=0; i &lt; p.length; i++) {
+    log ("Mark only [" + i + "]");
+    print_perf_entry(p[i]);
+  }
+
+  // Use getEntriesByName() to get all "mark" entries named "Begin"
+  p = performance.getEntriesByName("Begin", "mark");
+  for (var i=0; i &lt; p.length; i++) {
+    log ("Begin and Mark [" + i + "]");
+    print_perf_entry(p[i]);
+  }
+}
+</pre>
+
+<h2 id="PerformanceEntry_インターフェイス">PerformanceEntry インターフェイス</h2>
+
+<p>The <code>{{domxref("PerformanceEntry")}}</code> interface encapsulates a single <em>performance entry</em> i.e. a single performance metric. This interface has four properties and a JSON <em>serializer</em> ({{domxref("Performance.toJSON","toJSON()")}}. The following example shows the use of these properties.</p>
+
+<pre class="brush: js">function print_PerformanceEntry(ev) {
+  var properties = ["name", "entryType", "startTime", "duration"];
+
+  // Create a few performance entries
+  performance.mark("Start");
+  do_work(50000);
+  performance.mark("Stop");
+  performance.measure("measure-1");
+
+  var p = performance.getEntries();
+  for (var i=0; i &lt; p.length; i++) {
+    log("PerfEntry[" + i + "]");
+    for (var j=0; j &lt; properties.length; j++) {
+      // check each property in window.performance
+      var supported = properties[j] in p[i];
+      if (supported) {
+        var pe = p[i];
+        log("... " + properties[j] + " = " + pe[properties[j]]);
+      } else {
+        log("... " + properties[j] + " = Not supported");
+      }
+    }
+  }
+}
+</pre>
+
+<p>This interface also includes a {{domxref("PerformanceEntry.toJSON","toJSON()")}} method that returns the serialization of the {{domxref("PerformanceEntry")}} object. The following examples show the use of this method.</p>
+
+<pre class="brush: js">function PerfEntry_toJSON() {
+
+  // Create a few performance entries
+  performance.mark("mark-1");
+  performance.mark("mark-2");
+  performance.measure("meas-1", "mark-1", "mark-2");
+
+  var peList = performance.getEntries();
+  var pe = peList[0];
+
+  if (pe.toJSON === undefined) {
+    log ("PerformanceEntry.toJSON() is NOT supported");
+    return;
+  }
+
+  // Print the PerformanceEntry object
+  var json = pe.toJSON();
+  var s = JSON.stringify(json);
+  log("PerformanceEntry.toJSON = " + s);
+}
+</pre>
+
+<h2 id="Performance_オブザーバー">Performance オブザーバー</h2>
+
+<p>{{SeeCompatTable}}</p>
+
+<p>The <em>performance observer</em> interfaces allow an application to register an <em>observer</em> for specific performance event types, and when one of those event types is recorded, the application is <em>notified</em> of the event via the observer's callback function that was specified at the time, the observer was created. When the observer (callback) is invoked  the callback's parameters include a <em>{{domxref("PerformanceObserverEntryList","performance observer entry list")}}</em> that only contains <em>observed</em> {{domxref("PerformanceEntry","performance entries")}}. That is, the list only contains entries for the event types that were specified when the observer's {{domxref("PerformanceObserver.observe","observe()")}} method was invoked.</p>
+
+<p>The following example shows how to register two observers: the first one registers for several event types and the second observer only registers for one event type.</p>
+
+<pre class="brush: js">function PerformanceObservers() {
+  // Create observer for all performance event types
+  var observe_all = new PerformanceObserver(function(list, obs) {
+    var perfEntries;
+
+    // Print all entries
+    perfEntries = list.getEntries();
+    for (var i=0; i &lt; perfEntries.length; i++) {
+      print_perf_entry(perfEntries[i]);
+    }
+
+    // Print entries named "Begin" with type "mark"
+    perfEntries = list.getEntriesByName("Begin", "mark");
+    for (var i=0; i &lt; perfEntries.length; i++) {
+      print_perf_entry(perfEntries[i]);
+    }
+
+    // Print entries with type "mark"
+    perfEntries = list.getEntriesByType("mark");
+    for (var i=0; i &lt; perfEntries.length; i++) {
+      print_perf_entry(perfEntries[i]);
+    }
+  });
+  // subscribe to all performance event types
+  observe_all.observe({entryTypes: ['frame', 'mark', 'measure', 'navigation', 'resource', 'server']});
+
+  // Create observer for just the "mark" event type
+  var observe_mark = new PerformanceObserver(function(list, obs) {
+    var perfEntries = list.getEntries();
+    // Should only have 'mark' entries
+    for (var i=0; i &lt; perfEntries.length; i++) {
+      print_perf_entry(perfEntries[i]);
+    }
+  });
+  // subscribe to only the 'mark' event
+  observe_mark.observe({entryTypes: ['mark']});
+}
+function print_perf_entry(pe) {
+  log("name: "        + pe.name      +
+      "; entryType: " + pe.entryType +
+      "; startTime: " + pe.startTime +
+      "; duration: "  + pe.duration);
+}
+</pre>
+
+<p>The {{domxref("PerformanceObserverEntryList","performance observer entry list")}} interface has the same three <code>getEntries*()</code> methods as the {{domxref("Performance")}} interface and these methods are used to retrieve <em>observed</em> performance entries within the observer callback. These methods have been used in the above stated example.</p>
+
+<h2 id="仕様">仕様</h2>
+
+<p>The interfaces described in this document are defined in the <strong>Performance Timeline</strong> standard which has two levels:</p>
+
+<ul>
+ <li><a href="https://w3c.github.io/performance-timeline/">Performance Timeline Level 2</a>; Editors Draft; Work In Progress. This version introduces <em>performance observers</em> (and the {{domxref("PerformanceObserver")}} and {{domxref("PerformanceObserverEntryList")}} interfaces).</li>
+ <li><a href="http://www.w3.org/TR/performance-timeline/">Performance Timeline</a>; W3C Recommendation 12 December 2013</li>
+</ul>
+
+<h2 id="あわせて参照">あわせて参照</h2>
+
+<ul>
+ <li><a href="/Web/API/Performance_Timeline">Performance Timeline (Overview)</a></li>
+ <li><a href="http://siusin.github.io/perf-timing-primer/">A Primer for Web Performance Timing APIs</a></li>
+</ul>