diff options
Diffstat (limited to 'files/ja')
| -rw-r--r-- | files/ja/web/api/performance/mark/index.md | 101 | ||||
| -rw-r--r-- | files/ja/web/api/performance/now/index.md | 90 |
2 files changed, 90 insertions, 101 deletions
diff --git a/files/ja/web/api/performance/mark/index.md b/files/ja/web/api/performance/mark/index.md index 1a02bd4154..74e2435288 100644 --- a/files/ja/web/api/performance/mark/index.md +++ b/files/ja/web/api/performance/mark/index.md @@ -3,52 +3,53 @@ title: performance.mark() slug: Web/API/Performance/mark tags: - API - - Webパフォーマンス - メソッド - リファレンス + - ウェブパフォーマンス +browser-compat: api.Performance.mark translation_of: Web/API/Performance/mark --- -<div>{{APIRef("User Timing API")}}</div> +{{APIRef("User Timing API")}} -<p><strong><code>mark()</code></strong> メソッドは、ブラウザの<em>パフォーマンスエントリバッファ</em>に、指定された名前で{{domxref("DOMHighResTimeStamp","timestamp")}} を作成します。アプリケーション定義のタイムスタンプは、{{domxref("Performance")}} インタフェースの <code>getEntries*()</code> メソッド ({{domxref("Performance.getEntries","getEntries()")}}、{{domxref("Performance.getEntriesByName","getEntriesByName()")}} または{{domxref("Performance.getEntriesByType","getEntriesByType()")}}) のいずれかによって取得できます。</p> +**`mark()`** メソッドは、ブラウザーのパフォーマンスエントリーバッファーに、指定された名前で{{domxref("DOMHighResTimeStamp","timestamp")}} を作成します。 -<p>{{AvailableInWorkers}}</p> +アプリケーション定義のタイムスタンプは、{{domxref("Performance")}} インタフェースの `getEntries*()` メソッド ({{domxref("Performance.getEntries","getEntries()")}}、{{domxref("Performance.getEntriesByName","getEntriesByName()")}} または{{domxref("Performance.getEntriesByType","getEntriesByType()")}}) のいずれかによって取得できます。 -<p><code>mark</code> の {{domxref("PerformanceEntry","performance entry")}} は、次のプロパティ値を持ちます。</p> +`mark()` は内部的にデータを {{domxref("PerformanceEntry")}} として格納します。 -<ul> - <li>{{domxref("PerformanceEntry.entryType","entryType")}} - "<code>mark</code>" に設定されます</li> - <li>{{domxref("PerformanceEntry.name","name")}} - mark が作成されたときに与えられた "<code>name</code>" に設定されます</li> - <li>{{domxref("PerformanceEntry.startTime","startTime")}} - <code>mark()</code> が呼び出されたときに {{domxref("DOMHighResTimeStamp","timestamp")}} に設定されます</li> - <li>{{domxref("PerformanceEntry.duration","duration")}} - "<code>0</code>" に設定します (mark には<em>長さ</em>がありません)</li> -</ul> +{{AvailableInWorkers}} -<p>このメソッドに与えられた <code>name</code> が {{domxref("PerformanceTiming")}} インターフェイスにすでに存在する場合、{{jsxref("SyntaxError")}} がスローされます。</p> +## 構文 -<h2 id="構文">構文</h2> +```js +performance.mark(name); +performance.mark(measureName, markOptions) +``` -<pre class="syntaxbox"><em>performance</em>.mark(name); -</pre> +### 引数 -<h3 id="引数">引数</h3> +- name + - : {{domxref("DOMString")}} で、マークの名前を表します。このメソッドで指定された `name` がすでに {{domxref("PerformanceTiming")}} インターフェイスに存在していた場合は、 {{jsxref("SyntaxError")}} が発生します。 -<dl> - <dt>name</dt> - <dd>マークの名前を表す {{domxref("DOMString")}}。</dd> -</dl> +- `markOptions` {{optional_inline}} + - : このマークのためにタイムスタンプと追加のメタデータを指定するためのオブジェクトです。 -<h3 id="戻り値">戻り値</h3> + - `detail` + - : マークに含める任意のメタデータです。 + - `startTime` + - : マークの時刻として使用する {{domxref("DOMHighResTimeStamp")}} desu. -<dl> - <dt>void</dt> - <dd> </dd> -</dl> +### 返値 -<h2 id="例">例</h2> +- entry + - : 生成された {{domxref("PerformanceMark")}} エントリーです。 -<p>次の例は、<code>mark()</code> を使用して {{domxref("PerformanceMark")}} エントリを作成および取得する方法を示しています。</p> +## 例 -<pre class="brush:js">// たくさんの mark を作成します。 +次の例は、`mark()` を使用して {{domxref("PerformanceMark")}} エントリーを作成および取得する方法を示しています。 + +```js +// たくさんの mark を作成します。 performance.mark("squirrel"); performance.mark("squirrel"); performance.mark("monkey"); @@ -56,46 +57,24 @@ performance.mark("monkey"); performance.mark("dog"); performance.mark("dog"); -// PerformanceMark エントリをすべて取得します。 +// PerformanceMark エントリーをすべて取得します。 const allEntries = performance.getEntriesByType("mark"); console.log(allEntries.length); // 6 -// "monkey" PerformanceMark エントリをすべて入手します。 +// "monkey" PerformanceMark エントリーをすべて入手します。 const monkeyEntries = performance.getEntriesByName("monkey"); console.log(monkeyEntries.length); // 2 // すべての mark を消去します。 performance.clearMarks(); -</pre> - -<h2 id="仕様">仕様</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">仕様書</th> - <th scope="col">ステータス</th> - <th scope="col">コメント</th> - </tr> - <tr> - <td>{{SpecName('User Timing Level 2', '#dom-performance-mark', 'mark()')}}</td> - <td>{{Spec2('User Timing Level 2')}}</td> - <td> - <p><code>mark()</code> 処理モデルを明確にします。</p> - </td> - </tr> - <tr> - <td>{{SpecName('User Timing', '#dom-performance-mark', 'mark()')}}</td> - <td>{{Spec2('User Timing')}}</td> - <td>基本的な定義</td> - </tr> - </tbody> -</table> - -<h2 id="ブラウザの互換性">ブラウザの互換性</h2> - -<div> -<p>{{Compat("api.Performance.mark")}}</p> -</div> +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} diff --git a/files/ja/web/api/performance/now/index.md b/files/ja/web/api/performance/now/index.md index 2c77a37538..d66a56adf1 100644 --- a/files/ja/web/api/performance/now/index.md +++ b/files/ja/web/api/performance/now/index.md @@ -3,69 +3,80 @@ title: performance.now() slug: Web/API/Performance/now tags: - API - - Method - - Performance - - Reference - - Web Performance API + - メソッド + - パフォーマンス + - リファレンス + - ウェブパフォーマンス API +browser-compat: api.Performance.now translation_of: Web/API/Performance/now --- -<div>{{APIRef("High Resolution Timing")}}</div> +{{APIRef("High Resolution Timing")}} -<p><code><strong>performance.now()</strong></code> メソッドは、ミリ秒単位で計測された {{domxref("DOMHighResTimeStamp")}} を返します。</p> +**`performance.now()`** メソッドは、ミリ秒単位で計測された {{domxref("DOMHighResTimeStamp")}} を返します。 -<div class="warning"> -<p>タイムスタンプは実際には高解像度ではありません。<a href="https://spectreattack.com/">Spectre</a> のようなセキュリティ上の脅威を軽減するために、ブラウザは現在、さまざまな程度まで結果を丸めています (Firefox は Firefox 59 から 2 ミリ秒に丸めています)。ブラウザによっては、タイムスタンプを少しランダム化するものもあります。 精度は将来のリリースで改善されることでしょう。ブラウザの開発者は、これらのタイミング攻撃と、それを軽減する最善策について調査しています。</p> -</div> +{{AvailableInWorkers}} -<p>{{AvailableInWorkers}}</p> +返値は[時刻原点](/ja/docs/Web/API/DOMHighResTimeStamp#the_time_origin)からの経過時間を表します。 -<p>戻り値は、<a href="/ja/docs/Web/API/DOMHighResTimeStamp#The_time_origin">time origin</a> からの経過時間を表します。</p> +次の点に留意してください。 -<p>次の点に留意してください:</p> +- {{domxref("Window")}} コンテキストから生成された専用ワーカー (dedicated worker) では、この値は生成元の window における`performance.now()` の値よりも小さい値になります。従来はメインコンテキストの `t0` と同じでしたが、変更されました。 +- 共有ワーカー (shared worker) またはサービスワーカー (service worker) では、この値はメインコンテキストでの値よりも大きくなるかもしれません。 window はワーカーよりも後に生成される可能性があるからです。 -<ul> - <li>{{domxref("Window")}} コンテキストから生成された Dedicated Worker (専用ワーカー) では、この値は生成元の window における<code>performance.now()</code> の値よりも小さい値となるでしょう。従来はメインコンテキストの <code>t0</code> と同じでしたが、これは変わりました。</li> - <li>Shared Worker または Service Worker では、この値はメインコンテキストでの値よりも大きくなるかもしれません。そのウィンドウは、それらワーカー以後に生成され得るためです。</li> -</ul> +ブラウザーは通常、 [Spectre](https://spectreattack.com/) のような潜在的なセキュリティ脅威を軽減するために、予測可能性を低下させる目的で、返される値をある量で丸めることを覚えておくことが重要です。これは、タイマーの解像度や精度を制限することで、意図的にある程度不正確にします。例えば、 Firefox は返される時刻を 1 ミリ秒単位で丸めます。 -<h2 id="Syntax" name="Syntax">構文</h2> +返される値の精度は、セキュリティ上の懸念が他の手段で軽減された場合、またはされた場合に変更される可能性があります。 -<pre class="syntaxbox"><em>t</em> = performance.now();</pre> +## 構文 -<h2 id="Example" name="Example">例</h2> +```js +t = performance.now(); +``` -<pre class="brush: js">var t0 = performance.now(); +## 例 + +```js +const t0 = performance.now(); doSomething(); -var t1 = performance.now(); -console.log("Call to doSomething took " + (t1 - t0) + " milliseconds."); -</pre> +const t1 = performance.now(); +console.log(`Call to doSomething took ${t1 - t0} milliseconds.`); +``` -<p>JavaScript で利用できる他のタイミングデータ (例えば <a href="/ja/docs/JavaScript/Reference/Global_Objects/Date/now"><code>Date.now</code></a>) とは違い、 <code>performance.now()</code> が返すタイムスタンプは、1ミリ秒の分解能に制限されません。その代わりに、マイクロ秒までの精度を持った浮動小数点の値で表します。</p> +JavaScript で利用できる他の時刻のデータ（例えば [`Date.now`](/ja/docs/Web/JavaScript/Reference/Global_Objects/Date/now)）とは異なり、 `performance.now()` が返すタイムスタンプは、 1 ミリ秒の分解能に制限されません。代わりに、マイクロ秒までの精度を持った浮動小数点の値で時刻を表します。 -<p>また、<code>Date.now()</code> とは違い、<code>performance.now()</code> が返す値は、常に一定の割合で増加します。システムクロック (これはマニュアルで調整、またはNTPのようなソフトウェアで変えられているかもしれません) から独立しているのです。他方で <code>performance.timing.navigationStart + performance.now()</code> は、おおよそ <code>Date.now()</code> と同じになるでしょう。</p> +また、`Date.now()` とは違い、`performance.now()` が返す値は、（手動で調整、または NTP のようなソフトウェアで変更される可能性がある）システムクロックから独立しており、常に一定の割合で増加します。一方、 `performance.timing.navigationStart + performance.now()` は、おおよそ `Date.now()` と等しくなります。 -<h2 id="Reduced_time_precision" name="Reduced_time_precision">時間精度の引き下げ</h2> +## 時間精度の引き下げ -<p>タイミング攻撃やフィンガープリンティングから保護するため、ブラウザの設定によっては、<code>performance.now()</code> の精度が丸められることがあります。<br> -Firefoxでは、<code>privacy.reduceTimerPrecision</code> の設定がデフォルトで有効になっており、Firefox 59 ではデフォルトで 20 us (マイクロ秒) に設定されています。 Firefox 60 では 2 ms (ミリ秒) になります。</p> +タイミング攻撃やフィンガープリンティングから保護するため、ブラウザーの設定によっては、 `performance.now()` の精度が丸められることがあります。 +Firefox では、 `privacy.reduceTimerPrecision` の設定が既定で有効になっており、既定で 1 ミリ秒となっています。 -<pre class="brush: js">// Firefox 60 での時間精度の引き下げ (2ms) +```js +// Firefox 60 での時間精度の引き下げ (1ms) performance.now(); // 8781416 -// 8781814 +// 8781815 // 8782206 // ... - // `privacy.resistFingerprinting` 有効化による時間精度の引き下げ` performance.now(); // 8865400 // 8866200 // 8866700 // ... -</pre> +``` + +Firefox では `privacy.resistFingerprinting` も有効にすることができます。これは、精度を 100 ミリ秒または `privacy.resistFingerprinting.reduceTimerPrecision.microseconds` のどちらか大きい方へ変更します。 + +Firefox 79 以降では、高精度タイマーは文書が {{HTTPHeader("Cross-Origin-Opener-Policy")}} および {{HTTPHeader("Cross-Origin-Embedder-Policy")}} ヘッダーを使用してクロスオリジン分離を行っている場合に使用することができるようになりました。 + +```plain +Cross-Origin-Opener-Policy: same-origin +Cross-Origin-Embedder-Policy: require-corp +``` -<p>Firefoxでは <code>privacy.resistFingerprinting</code> も有効にできます。これは、精度を 100 ms か <code>privacy.resistFingerprinting.reduceTimerPrecision.microseconds</code> のどちらか大きい方へ変更します。</p> +これらのヘッダーは、最上位の文書がクロスオリジン文書と閲覧コンテキストグループを共有しないことを保証します。 COOP プロセスは、文書を分離し、潜在的な攻撃者がポップアップでそれを開いていたとしても、グローバルオブジェクトにアクセスできないようにし、 [XS-Leaks](https://github.com/xsleaks/xsleaks) と呼ばれる一連のクロスオリジン攻撃を防止しています。 <h2 id="Specifications" name="Specifications">仕様</h2> @@ -89,15 +100,14 @@ performance.now(); </tbody> </table> -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザー実装状況</h2> +## 仕様書 +{{Specifications}} +## ブラウザーの互換性 -<p>{{Compat("api.Performance.now")}}</p> +{{Compat}} -<h2 id="See_also" name="See_also">関連情報</h2> +## 関連情報 -<ul> - <li>Web Fundamentals の記事: <a href="https://developers.google.com/web/updates/2012/08/When-milliseconds-are-not-enough-performance-now"> -When milliseconds are not enough: performance.now</a></li> -</ul> +- [When milliseconds are not enough: performance.now()](http://updates.html5rocks.com/2012/08/When-milliseconds-are-not-enough-performance-now) (HTML5 Rocks) |