recursal/MDN huggingface dataset:
Performance.navigation
======================

**非推奨:** この機能は非推奨になりました。まだ対応しているブラウザーがあるかもしれませんが、すでに関連するウェブ標準から削除されているか、削除の手続き中であるか、互換性のためだけに残されている可能性があります。使用を避け、できれば既存のコードは更新してください。このページの下部にある互換性一覧表を見て判断してください。この機能は突然動作しなくなる可能性があることに注意してください。

古い **`Performance.navigation`** は読み取り専用プロパティで、指定された閲覧コンテキスト内で発生するナビゲーションの種類を表す `PerformanceNavigation` オブジェクトを返します。リソースを取得するまでに必要なリダイレクトの数などです。

このプロパティはワーカーでは利用できません。

**警告:** このプロパティは Navigation Timing Level 2 仕様書では非推奨です。代わりに `PerformanceNavigationTiming` を使用してください。

構文
--


```js
navObject = performance.navigation;
```

仕様書
---

 この機能は標準化路線上にはありません。 Navigation Timing 仕様書では非推奨としています。
 代わりに `PerformanceNavigationTiming` インターフェイスを使用してください。

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* 所属先の `Performance` インターフェイス
performance.setResourceTimingBufferSize()
=========================================

**`setResourceTimingBufferSize()`** メソッドは、ブラウザーのリソースタイミングバッファーサイズを、指定された数の "`resource`" の `パフォーマンスエントリー種別`のオブジェクトに設定します。

ブラウザーの推奨リソースタイミングバッファサイズは少なくとも`パフォーマンスエントリー`オブジェクト 150 件分です。

**注:** この機能は Web Worker 内で利用可能です

構文
--


```js
performance.setResourceTimingBufferSize(maxSize);
```

### 引数

maxSize

`number` で、ブラウザーがパフォーマンスエントリーバッファーに保持する必要がある`パフォーマンスエントリー`オブジェクトの最大数を表します。

### 返値

なし

このメソッドには返値はありません。

例
-


```js
function setResourceTimingBufferSize(maxSize) {
  if (performance === undefined) {
    log("Browser does not support Web Performance");
    return;
  }
  var supported = typeof performance.setResourceTimingBufferSize == "function";
  if (supported) {
    log("... Performance.setResourceTimingBufferSize() = Yes");
    performance.setResourceTimingBufferSize(maxSize);
  } else {
    log("... Performance.setResourceTimingBufferSize() = NOT supported");
  }
}
```

仕様書
---

| Specification |
| --- |
| Resource Timing # dom-performance-setresourcetimingbuffersize |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
performance.mark()
==================

**`mark()`** メソッドは、ブラウザーのパフォーマンスエントリーバッファーに、指定された名前で`timestamp` を作成します。

アプリケーション定義のタイムスタンプは、`Performance` インタフェースの `getEntries*()` メソッド (`getEntries()`、`getEntriesByName()` または`getEntriesByType()`) のいずれかによって取得できます。

`mark()` は内部的にデータを `PerformanceEntry` として格納します。

**注:** この機能は Web Worker 内で利用可能です

構文
--


```js
performance.mark(name);
performance.mark(measureName, markOptions);
```

### 引数

name

`DOMString` で、マークの名前を表します。このメソッドで指定された `name` がすでに `PerformanceTiming` インターフェイスに存在していた場合は、 `SyntaxError` が発生します。

`markOptions` 省略可

このマークのためにタイムスタンプと追加のメタデータを指定するためのオブジェクトです。

`detail`

マークに含める任意のメタデータです。

`startTime`

マークの時刻として使用する `DOMHighResTimeStamp` です。


### 返値

entry

生成された `PerformanceMark` エントリーです。

例
-

次の例は、`mark()` を使用して `PerformanceMark` エントリーを作成および取得する方法を示しています。


```js
// たくさんの mark を作成します。
performance.mark("squirrel");
performance.mark("squirrel");
performance.mark("monkey");
performance.mark("monkey");
performance.mark("dog");
performance.mark("dog");

// PerformanceMark エントリーをすべて取得します。
const allEntries = performance.getEntriesByType("mark");
console.log(allEntries.length);
// 6

// "monkey" PerformanceMark エントリーをすべて入手します。
const monkeyEntries = performance.getEntriesByName("monkey");
console.log(monkeyEntries.length);
// 2

// すべての mark を消去します。
performance.clearMarks();
```

仕様書
---

| Specification |
| --- |
| User Timing # dom-performance-mark |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
performance.getEntriesByType()
==============================

**`getEntriesByType()`** メソッドは、指定された型の `PerformanceEntry` オブジェクトのリストを返します。リストのメンバー（エントリー）は、明示的な時点でパフォーマンス*マーク*または*メジャー*を作成することで（たとえば `mark()` メソッドを呼び出すことで）作成できます。

**注:** この機能は Web Worker 内で利用可能です

構文
--


```js
entries = window.performance.getEntriesByType(type);
```

### 引数

type

"`mark`" など、取得するエントリーの種類。有効なエントリー種別の一覧は `PerformanceEntry.entryType` にあります。

### 返値

entries

指定された `type` を持つ `PerformanceEntry` オブジェクトのリスト。項目はエントリーの `startTime` に基づいて時系列に並んでいます。指定された `type` を持つオブジェクトがない場合、または引数が指定されていない場合は、空のリストが返されます。

例
-


```js
function usePerformanceEntryMethods() {
  log("PerformanceEntry tests ...");

  if (performance.mark === undefined) {
    log("... performance.mark Not supported");
    return;
  }

  // Create some performance entries via the mark() method
  performance.mark("Begin");
  doWork(50000);
  performance.mark("End");
  performance.mark("Begin");
  doWork(100000);
  performance.mark("End");
  doWork(200000);
  performance.mark("End");

  // Use getEntries() to iterate through the each entry
  var p = performance.getEntries();
  for (var i = 0; i < p.length; i++) {
    log("Entry[" + i + "]");
    checkPerformanceEntry(p[i]);
  }

  // Use getEntries(name, entryType) to get specific entries
  p = performance.getEntries({ name: "Begin", entryType: "mark" });
  for (var i = 0; i < p.length; i++) {
    log("Begin[" + i + "]");
    checkPerformanceEntry(p[i]);
  }

  // Use getEntriesByType() to get all "mark" entries
  p = performance.getEntriesByType("mark");
  for (var i = 0; i < p.length; i++) {
    log(
      "Mark only entry[" +
        i +
        "]: name = " +
        p[i].name +
        "; startTime = " +
        p[i].startTime +
        "; duration = " +
        p[i].duration,
    );
  }

  // Use getEntriesByName() to get all "mark" entries named "Begin"
  p = performance.getEntriesByName("Begin", "mark");
  for (var i = 0; i < p.length; i++) {
    log(
      "Mark and Begin entry[" +
        i +
        "]: name = " +
        p[i].name +
        "; startTime = " +
        p[i].startTime +
        "; duration = " +
        p[i].duration,
    );
  }
}
```

仕様書
---

| Specification |
| --- |
| Performance Timeline # dom-performance-getentriesbytype |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
performance.clearMeasures()
===========================

**`clearMeasures()`** メソッドは、ブラウザーのパフォーマンスエントリーバッファーから*名前付きメジャー*を削除します。このメソッドが引数なしで呼び出された場合、エントリー種別が "`measure`" のパフォーマンスエントリーがすべてパフォーマンスエントリーバッファーから削除されます。

**注:** この機能は Web Worker 内で利用可能です

構文
--


```js
performance.clearMeasures();
performance.clearMeasures(name);
```

### 引数

name 省略可

タイムスタンプの名前を表す `DOMString` です。 この引数を省略すると、エントリー種別が "`measure`" であるすべてのパフォーマンスエントリーが削除されます。

### 返値

* void
    + :
例
-

次の例は、`clearMeasures()` メソッドの両方の使用方法を示しています。


```js
// Create a small helper to show how many PerformanceMeasure entries there are.
function logMeasureCount() {
  console.log(
    "Found this many entries: " +
      performance.getEntriesByType("measure").length,
  );
}

// Create a bunch of measures.
performance.measure("from navigation");
performance.mark("a");
performance.measure("from mark a", "a");
performance.measure("from navigation");
performance.measure("from mark a", "a");
performance.mark("b");
performance.measure("between a and b", "a", "b");

logMeasureCount(); // "Found this many entries: 5"

// Delete just the "from navigation" PerformanceMeasure entries.
performance.clearMeasures("from navigation");
logMeasureCount(); // "Found this many entries: 3"

// Delete all of the PerformanceMeasure entries.
performance.clearMeasures();
logMeasureCount(); // "Found this many entries: 0"
```

仕様書
---

| Specification |
| --- |
| User Timing # dom-performance-clearmeasures |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
performance.clearMarks()
========================

**`clearMarks()`** メソッドは、ブラウザーのパフォーマンスエントリーバッファーから*名前付きマーク*を削除します。このメソッドが引数なしで呼び出された場合、エントリー種別が "`mark`" のパフォーマンスエントリーがすべてパフォーマンスエントリーバッファーから削除されます。

**注:** この機能は Web Worker 内で利用可能です

構文
--


```js
performance.clearMarks();
performance.clearMarks(name);
```

### 引数

name 省略可

タイムスタンプの名前を表す `DOMString` です。 この引数を省略すると、エントリー種別が "`mark`" であるすべてのパフォーマンスエントリーが削除されます。

### 返値

* void
    + :
例
-

次の例は、`clearMarks()` メソッドの両方の使用法を示しています。


```js
// PerformanceMark のエントリーがいくつあるかを表示する小さなヘルパーを作成します。
function logMarkCount() {
  console.log(
    "Found this many entries: " + performance.getEntriesByType("mark").length,
  );
}

// Create a bunch of marks.
performance.mark("squirrel");
performance.mark("squirrel");
performance.mark("monkey");
performance.mark("monkey");
performance.mark("dog");
performance.mark("dog");

logMarkCount(); // "Found this many entries: 6"

// Delete just the "squirrel" PerformanceMark entries.
performance.clearMarks("squirrel");
logMarkCount(); // "Found this many entries: 4"

// Delete all of the PerformanceMark entries.
performance.clearMarks();
logMarkCount(); // "Found this many entries: 0"
```

仕様書
---

| Specification |
| --- |
| User Timing # dom-performance-clearmarks |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
Performance.timeOrigin
======================

**Experimental:** **これは実験的な機能です。**  
本番で使用する前にブラウザー互換性一覧表をチェックしてください。

**`timeOrigin`** は `Performance` インターフェイスの読み取り専用プロパティで、パフォーマンス測定の開始時刻の高解像度タイムスタンプを返します。

**注:** この機能は Web Worker 内で利用可能です

構文
--


```js
var timeOrigin = performance.timeOrigin;
```

### 値

高解像度のタイムスタンプです。

仕様書
---

| Specification |
| --- |
| High Resolution Time # dom-performance-timeorigin |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
performance.getEntries()
========================

**`getEntries()`** メソッドは、そのページのすべての `PerformanceEntry` オブジェクトのリストを返します。リストのメンバー（エントリー）は、明示的な時点でパフォーマンスマークまたはメジャーを作成することで（たとえば `mark()` メソッドを呼び出すことで）作成できます。特定の種類のパフォーマンスエントリーや特定の名前のパフォーマンスエントリーにのみ関心がある場合は、 `getEntriesByType()` と `getEntriesByName()` を参照してください。

**注:** この機能は Web Worker 内で利用可能です

構文
--

一般的な構文:


```js
entries = window.performance.getEntries();
```

### 返値

entries

`PerformanceEntry` オブジェクトの配列。項目はエントリー '`startTime` に基づいて時系列に並んでいます。

例
-


```js
function use\_PerformanceEntry\_methods() {
  console.log("PerformanceEntry tests ...");

  if (performance.mark === undefined) {
    console.log("... performance.mark Not supported");
    return;
  }

  // Create some performance entries via the mark() method
  performance.mark("Begin");
  do\_work(50000);
  performance.mark("End");
  performance.mark("Begin");
  do\_work(100000);
  performance.mark("End");
  do\_work(200000);
  performance.mark("End");

  // Use getEntries() to iterate through the each entry
  let p = performance.getEntries();
  for (var i = 0; i < p.length; i++) {
    console.log("Entry[" + i + "]");
    check\_PerformanceEntry(p[i]);
  }

  // Use getEntriesByType() to get all "mark" entries
  p = performance.getEntriesByType("mark");
  for (let i = 0; i < p.length; i++) {
    console.log(
      "Mark only entry[" +
        i +
        "]: name = " +
        p[i].name +
        "; startTime = " +
        p[i].startTime +
        "; duration = " +
        p[i].duration,
    );
  }

  // Use getEntriesByName() to get all "mark" entries named "Begin"
  p = performance.getEntriesByName("Begin", "mark");
  for (let i = 0; i < p.length; i++) {
    console.log(
      "Mark and Begin entry[" +
        i +
        "]: name = " +
        p[i].name +
        "; startTime = " +
        p[i].startTime +
        "; duration = " +
        p[i].duration,
    );
  }
}
```

仕様書
---

| Specification |
| --- |
| Performance Timeline # dom-performance-getentries |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
performance.now()
=================

**`performance.now()`** メソッドは、ミリ秒単位で計測された `DOMHighResTimeStamp` を返します。

**注:** この機能は Web Worker 内で利用可能です

返値は時刻原点からの経過時間を表します。

次の点に留意してください。

* `Window` コンテキストから生成された専用ワーカー (dedicated worker) では、この値は生成元の window における`performance.now()` の値よりも小さい値になります。従来はメインコンテキストの `t0` と同じでしたが、変更されました。
* 共有ワーカー (shared worker) またはサービスワーカー (service worker) では、この値はメインコンテキストでの値よりも大きくなるかもしれません。 window はワーカーよりも後に生成される可能性があるからです。

ブラウザーは通常、 Spectre のような潜在的なセキュリティ脅威を軽減するために、予測可能性を低下させる目的で、返される値をある量で丸めることを覚えておくことが重要です。これは、タイマーの解像度や精度を制限することで、意図的にある程度不正確にします。例えば、 Firefox は返される時刻を 1 ミリ秒単位で丸めます。

返される値の精度は、セキュリティ上の懸念が他の手段で軽減された場合、またはされた場合に変更される可能性があります。

構文
--


```js
t = performance.now();
```

例
-


```js
const t0 = performance.now();
doSomething();
const t1 = performance.now();
console.log(`Call to doSomething took ${t1 - t0} milliseconds.`);
```


JavaScript で利用できる他の時刻のデータ（例えば `Date.now`）とは異なり、 `performance.now()` が返すタイムスタンプは、 1 ミリ秒の分解能に制限されません。代わりに、マイクロ秒までの精度を持った浮動小数点の値で時刻を表します。

また、`Date.now()` とは違い、`performance.now()` が返す値は、（手動で調整、または NTP のようなソフトウェアで変更される可能性がある）システムクロックから独立しており、常に一定の割合で増加します。一方、 `performance.timing.navigationStart + performance.now()` は、おおよそ `Date.now()` と等しくなります。

時間精度の引き下げ
---------

 タイミング攻撃やフィンガープリンティングから保護するため、ブラウザーの設定によっては、 `performance.now()` の精度が丸められることがあります。
 Firefox では、 `privacy.reduceTimerPrecision` の設定が既定で有効になっており、既定で 1 ミリ秒となっています。


```js
// Firefox 60 での時間精度の引き下げ (1ms)
performance.now();
// 8781416
// 8781815
// 8782206
// ...

// `privacy.resistFingerprinting` 有効化による時間精度の引き下げ`
performance.now();
// 8865400
// 8866200
// 8866700
// ...
```


Firefox では `privacy.resistFingerprinting` も有効にすることができます。これは、精度を 100 ミリ秒または `privacy.resistFingerprinting.reduceTimerPrecision.microseconds` のどちらか大きい方へ変更します。

Firefox 79 以降では、高精度タイマーは文書が `Cross-Origin-Opener-Policy` および `Cross-Origin-Embedder-Policy` ヘッダーを使用してクロスオリジン分離を行っている場合に使用することができるようになりました。
```

Cross-Origin-Opener-Policy: same-origin
Cross-Origin-Embedder-Policy: require-corp
```


これらのヘッダーは、最上位の文書がクロスオリジン文書と閲覧コンテキストグループを共有しないことを保証します。 COOP プロセスは、文書を分離し、潜在的な攻撃者がポップアップでそれを開いていたとしても、グローバルオブジェクトにアクセスできないようにし、 XS-Leaks と呼ばれる一連のクロスオリジン攻撃を防止しています。

仕様
--

| Specification |
| --- |
| High Resolution Time # dom-performance-now |

仕様書
---

| Specification |
| --- |
| High Resolution Time # dom-performance-now |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* When milliseconds are not enough: performance.now() (HTML5 Rocks)
Performance.timing
==================

**非推奨:** この機能は非推奨になりました。まだ対応しているブラウザーがあるかもしれませんが、すでに関連するウェブ標準から削除されているか、削除の手続き中であるか、互換性のためだけに残されている可能性があります。使用を避け、できれば既存のコードは更新してください。このページの下部にある互換性一覧表を見て判断してください。この機能は突然動作しなくなる可能性があることに注意してください。

古い **`Performance.timing`** 読み取り専用プロパティは、遅延時間に関するパフォーマンス情報を含む `PerformanceTiming` オブジェクトを返します。

このプロパティはワーカーでは使用できません。

**警告:** このプロパティは Navigation Timing Level 2 仕様書では非推奨です。代わりに `PerformanceNavigationTiming` を使用してください。

構文
--


```js
timingInfo = performance.timing;
```

仕様書
---

 この機能は標準化路線上にはありません。 Navigation Timing 仕様書では非推奨としています。
 代わりに `PerformanceNavigationTiming` インターフェイスを使用してください。

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* 所属先の `Performance` インターフェイス
Performance: resourcetimingbufferfull イベント
==========================================

`resourcetimingbufferfull` イベントは、ブラウザーのリソースタイミングバッファーがいっぱいになると発生します。

|  |  |
| --- | --- |
| バブリング | はい |
| キャンセル | 可 |
| インターフェイス | `Event` |
| イベントハンドラープロパティ | `onresourcetimingbufferfull` |

例
-

次の例では、`onresourcetimingbufferfull` プロパティにコールバック関数を設定します。


```js
function buffer\_full(event) {
  console.log("WARNING: Resource Timing Buffer is FULL!");
  performance.setResourceTimingBufferSize(200);
}
function init() {
  // リソースバッファーが一杯になったときのコールバックを設定
  performance.onresourcetimingbufferfull = buffer_full;
}
<body onload="init()">
```


addEventListener() 関数を使用してハンドラーを設定することもできます。


```js
performance.addEventListener("resourcetimingbufferfull", buffer_full);
```

仕様書
---

| Specification |
| --- |
| Resource Timing # dom-performance-onresourcetimingbufferfull |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* `Performance.clearResourceTimings()`
* `Performance.setResourceTimingBufferSize()`
performance.toJSON()
====================

**`toJSON()`** は `Performance` インターフェイスのメソッドで、標準のシリアライザーです。パフォーマンスオブジェクトのプロパティの JSON 表現を返します。

**注:** この機能は Web Worker 内で利用可能です

構文
--


```js
myPerf = performance.toJSON();
```

### 引数

* なし
    + :
### 返値

myPerf

`Performance` オブジェクトをシリアライズした JSON オブジェクト。

例
-


```js
var js;
js = window.performance.toJSON();
console.log("json = " + JSON.stringify(js));
```

仕様書
---

| Specification |
| --- |
| High Resolution Time # dom-performance-tojson |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
Text: Text() コンストラクター
=====================

**`Text()`** コンストラクターは新しい `Text` オブジェクトを返します。これは、引数で与えられたオプションの文字列をテキストコンテンツとして使用します。

構文
--


```js
new Text()
new Text(string)
```

### 引数

* `string` 省略可
### 返値

新しい `Text` オブジェクトで、`string` 引数の内容、引数が与えられなかった場合は空文字列を持ったものです。

例
-


```js
let text = new Text("Test");
```

仕様書
---

| Specification |
| --- |
| DOM Standard # ref-for-dom-text-text① |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* DOM API
Text: wholeText プロパティ
=====================

**`wholeText`** は `Text` インターフェイスのプロパティで、そのノードに論理的に隣接するすべての `Text` ノードのすべてのテキストを返すものです。
 テキストは文書中の順序で連結されます。
 これにより、任意のテキストノードを指定し、隣接するすべてのテキストを 1 つの文字列として取得することができます。

**メモ:** これは `Node.normalize()` を呼び出してそのテキストノードの値を読み取るのに似ていますが、ツリーを変更することはありません。

値
-

接続されたテキストの文字列です。

例
-

ウェブページに次のような簡単な段落があったとします。


```html
<p>
  Through-hiking is great!
  <strong>No insipid election coverage!</strong> However,
  <a href="https://en.wikipedia.org/wiki/Absentee\_ballot">casting a ballot</a>
  is tricky.
</p>
```


中央の文章が気に入らないと判断し、削除します。


```js
const paragraph = document.querySelector("p"); // 段落を読み取る
paragraph.removeChild(para.childNodes[1]); // strong のテキストを削除
```


これで *"Through-hiking is great! However, casting a ballot is tricky."* となり、ハイパーリンクの前はノード 2 つになります。

1. `Text` で、`"Through-hiking is great!"` という文字列を含むもの
2. 2 番目の `Text` ノードで、`" However, "` という文字列を含むもの

これらの 2 つのノードを一度に取得するには、 `para.childNodes[0].wholeText` を呼び出します。


```js
console.log(`'${paragraph.childNodes[0].wholeText}'`); // 'Through-hiking is great! However, '
```

仕様書
---

| Specification |
| --- |
| DOM Standard # ref-for-dom-text-wholetext① |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* 所属先の `Text` インターフェイス
Text: splitText() メソッド
======================

**`splitText()`** は `Text` インターフェイスのメソッドで、この `Text` ノードを指定したオフセットで 2 つに分割し、両方のノードを兄弟としてツリーの中に保持します。

 分割後、現在のノードには指定したオフセット位置までのすべてのコンテンツが設定され、新規作成された同じ種類のノードには残りのテキストが設定されます。新しく作成されたノードは呼び出し元に返されます。
 元のノードに親があった場合、新しいノードは元のノードの次の兄弟として挿入されます。
 オフセットが元のノードの長さと等しい場合、新しく作成されたノードにはデータがありません。

分割されたテキストノードは、 `Node.normalize()` メソッドを用いて結合することができます。

構文
--


```js
newNode = textNode.splitText(offset)
```

### 引数

`offset`

テキストノードを分割する直前の位置。

### 返値

新しく生成された `Text` ノードを返し、指定されたオフセット位置以降のテキストが格納されます。

### 例外

`IndexSizeError` `DOMException`

指定されたオフセットが負の値であるか、ノードのテキストの 16 ビット単位の文字数よりも大きい場合に発生します。

`NoModificationAllowedError` `DOMException`

ノードが読取専用の場合に発生します。

例
-

この例では、 `<p>` のテキストが 2 つのテキストノードに分割され、 `<u>` がその間に挿入されます。


```html
<p>foobar</p>
```



```js
const p = document.querySelector("p");

// <p> の中身をテキストノードとして取得
const foobar = p.firstChild;

// 'foobar' を二つのテキストノード 'foo' と 'bar' に分割し、
// 'bar' を const として保存
const bar = foobar.splitText(3);

// <u> 要素を作成して ' new content ' を含める
const u = document.createElement("u");
u.appendChild(document.createTextNode(" new content "));

// <u> を 'bar' の前に追加
p.insertBefore(u, bar);

// 結果: <p>foo<u> new content </u>bar</p>
```

仕様書
---

| Specification |
| --- |
| DOM Standard # ref-for-dom-text-splittext① |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* 所属先の `Text` インターフェイス
* 逆のメソッド: `Node.normalize`
Text: assignedSlot プロパティ
========================

**`assignedSlot`** は `Text` インターフェイスの読み取り専用プロパティで、要素に関連付けられた `HTMLSlotElement` オブジェクトを返します。

値
-

`HTMLSlotElement`、またはテキストノードに関連付けられている `<slot>` 要素がない場合は `null`。

仕様書
---

| Specification |
| --- |
| DOM Standard # dom-slotable-assignedslot |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
PerformanceResourceTiming.renderBlockingStatus
==============================================

**`renderBlockingStatus`** は読み取り専用のプロパティで、リソースのレンダーブロッキング状態を返します。

次のようなリソースを特定するのに有用です。

* レンダーブロッキングでなかったために遅延する可能性があった
* レンダーブロッキングであったために先読みできた
解説
--

レンダーブロッキングリソースとは、フォント、CSS、JavaScript などの静的ファイルで、ブラウザがページのコンテンツを画面に描画するのを妨害したり、遅らせたりするものです。ブラウザーはこれらのブロックリソースを自動的に判断し、すべてのスタイルシートと同期スクリプトが読み込まれ評価される前に、画面にピクセルを描画しないようにします。これにより、スタイル未設定のコンテンツが一瞬現れること（以下、FOUC）を防ぐことができます。

自動的なレンダーブロック機構に加えて、`blocking="render"` を属性と値として `<script>`, `<style>`, `<link>` 要素に提供して、明示的にレンダーブロックを設定することができます。例えば次のようにします。


```html
<link blocking="render" href="critical-font.woff2" as="font" />
```

値
-

`renderBlockingStatus` プロパティは以下の値を取ります。

`"blocking"`

このリソースがレンダリングをブロックする可能性がある。

`"non-blocking"`

このリソースはレンダリングをブロックしない。

例
-

### レンダリングをブロックするリソースをログ出力

`renderBlockingStatus` プロパティを使用すると、レンダリングをブロックしているリソースを確認することができます。

`PerformanceObserver` を使用した例です。このオブジェクトは、新しい `resource` パフォーマンス項目がブラウザーのパフォーマンスタイムラインに記録されると、それを通知します。オブザーバーが作成される前の項目にアクセスするために `buffered` オプションを使用します。


```js
const observer = new PerformanceObserver((list) => {
  list.getEntries().forEach((entry) => {
    if (entry.renderBlockingStatus === "blocking") {
      console.log(`${entry.name} is render-blocking.`);
    }
  });
});

observer.observe({ type: "resource", buffered: true });
```


`Performance.getEntriesByType()` を使用した例です。このメソッドを呼び出した時点でブラウザー上のパフォーマンスタイムラインに存在する `resource` パフォーマンス項目のみを表示します。


```js
const resources = performance.getEntriesByType("resource");
resources.forEach((entry) => {
  if (entry.renderBlockingStatus === "blocking") {
    console.log(`${entry.name} is render-blocking.`);
  }
});
```

仕様書
---

| Specification |
| --- |
| Resource Timing # dom-performanceresourcetiming-renderblockingstatus |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
PerformanceResourceTiming.responseStatus
========================================

**Experimental:** **これは実験的な機能です。**  
本番で使用する前にブラウザー互換性一覧表をチェックしてください。

**`responseStatus`** は読み取り専用のプロパティで、リソースを読み取る際に返される HTTP レスポンスステータスコードを表します。

このプロパティはフェッチ API の `Response.status` に対応します。

値
-

`responseStatus` プロパティは以下の値を取ります。

* リソースを読み取った際に返された HTTP レスポンスステータスコードを示す数値。
* CORS のチェックに失敗した場合は `0`。
* 別オリジンの `<iframe>` オブジェクトの場合は `0`。
例
-

### キャッシュがヒットしたかどうかをチェック

`responseStatus` プロパティをお使用して、`304` `Not Modified` でキャッシュされたリソースを確認することができます。

`PerformanceObserver` を使用した例です。これは、ブラウザーのパフォーマンスタイムラインに新しい `resource` パフォーマンス項目が記録されると、それを通知するものです。オブザーバーが作成される前の項目にアクセスするには `buffered` オプションを使用します。


```js
const observer = new PerformanceObserver((list) => {
  list.getEntries().forEach((entry) => {
    if (entry.responseStatus === 304) {
      console.log(`${entry.name} was loaded from cache`);
    }
  });
});

observer.observe({ type: "resource", buffered: true });
```


`Performance.getEntriesByType()` を使用した例です。このメソッドを呼び出した時点でブラウザー上のパフォーマンスタイムラインに存在する `resource` パフォーマンス項目のみを表示します。


```js
const resources = performance.getEntriesByType("resource");
resources.forEach((entry) => {
  if (entry.responseStatus === 304) {
    console.log(`${entry.name} was loaded from cache`);
  }
});
```


また、 `responseStatus` が利用できない場合は、 `transferSize` プロパティは `0` を返します。

### オリジン間のレスポンスステータスコード

`responseStatus` プロパティの値が `0` である場合、そのリソースはオリジン間リクエストである可能性があります。オリジンの外へのレスポンスステータスコードの表示を許可するには、CORS の HTTP の `Access-Control-Allow-Origin` レスポンスヘッダを設定する必要があります。

例えば、`https://developer.mozilla.org` にレスポンスステータスコードを取得させるためには、オリジン間リソースが送信する必要があります。


```http
Access-Control-Allow-Origin: https://developer.mozilla.org
```

仕様書
---

| Specification |
| --- |
| Resource Timing # dom-performanceresourcetiming-responsestatus |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* HTTP レスポンスステータスコード
* `Response.status`
* CORS