IDBTransaction - Web API 接口参考

IDBTransaction
==============

`IDBTransacation`接口由IndexedDB API提供，异步事务使用数据库中的事件对象属性。所有的读取和写入数据均在事务中完成。由`IDBDatabase`发起事务，通过`IDBTransaction` 来设置事务的模式（例如：是否只读`readonly`或读写`readwrite`），以及通过`IDBObjectStore`来发起一个请求。同时你也可以使用它来中止事务。

Note that as of Firefox 40, IndexedDB transactions have relaxed durability guarantees to increase performance (see Firefox bug 1112702.) Previously in a `readwrite` transaction `IDBTransaction.oncomplete` (en-US) was fired only when all data was guaranteed to have been flushed to disk. In Firefox 40+ the `complete` event is fired after the OS has been told to write the data but potentially before that data has actually been flushed to disk. The `complete` event may thus be delivered quicker than before, however, there exists a small chance that the entire transaction will be lost if the OS crashes or there is a loss of system power before the data is flushed to disk. Since such catastrophic events are rare most consumers should not need to concern themselves further.

If you must ensure durability for some reason (e.g. you're storing critical data that cannot be recomputed later) you can force a transaction to flush to disk before delivering the `complete` event by creating a transaction using the experimental (non-standard) `readwriteflush` mode (see `IDBDatabase.transaction` (en-US).

注意，事务在被创建的时候就已经开始，并非在发起第一个请求（`IDBRequest`) 的时候。例如下面的例子：

```js
var trans1 = db.transaction("foo", "readwrite");
var trans2 = db.transaction("foo", "readwrite");
var objectStore2 = trans2.objectStore("foo");
var objectStore1 = trans1.objectStore("foo");
objectStore2.put("2", "key");
objectStore1.put("1", "key");
```

在代码执行后，object store 应该包含值 "2", 因为 `trans2` 应该在 `trans1` 之后执行。

Transactions can fail for a fixed number of reasons, all of which (except the user agent crash) will trigger an abort callback:

* Abort due to bad requests, e.g. trying to add() the same key twice, or put() with the same index key with a uniqueness constraint. This causes an error on the request, which can bubble up to an error on the transaction, which aborts the transaction. Can be prevented by using preventDefault() on the error event on the request.
* Explicit abort() call from script
* Uncaught exception in request's success/error handler
* I/O error (actual failure to write to disk, e.g. disk detached, or other OS/hardware failure)
* Quota exceeded
* User agent crash

**备注：** 此特性在 Web Worker 中可用

EventTarget

IDBTransaction属性
--

`IDBTransaction.db` (en-US) 只读

当前事务所属的数据库连接。

`IDBTransaction.error` (en-US) 只读

Returns a `DOMException` indicating the type of error that occured when there is an unsuccessful transaction. This property is `null` if the transaction is not finished, is finished and successfully committed, or was aborted with `IDBTransaction.abort` (en-US) function.

`IDBTransaction.mode` (en-US) 只读

用于隔离事务作用域内的 object store 中数据访问的模式。下方的常量章节给出了所有可用的值。默认值是 `readonly`.

`IDBTransaction.objectStoreNames` (en-US) 只读

Returns a `DOMStringList` of the names of `IDBObjectStore` objects.

### Event handlers

`IDBTransaction.onabort` (en-US) 只读

The event handler for the `abort` event, fired when the transaction is aborted. This can happen due to:

* bad requests, e.g. trying to add() the same key twice, or put() with the same index key with a uniqueness constraint and there is no error handler on the request to call preventDefault() on the event,
* an explicit abort() call from script
* uncaught exception in request's success/error handler,
* an I/O error (actual failure to write to disk, e.g. disk detached, or other OS/hardware failure), or
* quota exceeded.

`IDBTransaction.oncomplete` (en-US) 只读

The event handler for the `complete` event, thrown when the transaction completes successfully.

`IDBTransaction.onerror` (en-US) 只读

The event handler for the `error` event, thrown when the transaction fails to complete.

方法
--

从`EventTarget`继承

`IDBTransaction.abort` (en-US)

放弃本次连接的 transaction 的所有修改，如果当前的 transaction 处于回滚完毕或完成状态，则会抛出一个错误事件。

`IDBTransaction.objectStore` (en-US)

返回表示作为此事务作用域一部分的 object store 的 `IDBObjectStore` 对象。

模式常量
----

**已弃用:** 不再推荐使用该特性。虽然一些浏览器仍然支持它，但也许已从相关的 web 标准中移除，也许正准备移除或出于兼容性而保留。请尽量不要使用该特性，并更新现有的代码；参见本页面底部的兼容性表格以指导你作出决定。请注意，该特性随时可能无法正常工作。

**警告：** 这些常量将不再可用——它们在 Gecko 25 中被移除。你应该直接使用字符串常量来作为替代。 (Firefox bug 888598)

Transactions 可使用以下三种模式中的一种：

| 常量 | 值 | 描述 |
| --- | --- | --- |
| `READ_ONLY` | "readonly"(0 in Chrome) | 允许读取数据，不改变。 |
| `READ_WRITE` | "readwrite"(1 in Chrome) | 允许读取和写入现有数据存储，数据被改变。 |
| `VERSION_CHANGE` | "versionchange"(2 in Chrome) | 允许执行任何操作，包括删除和创建对象存储和索引。此模式是用于开始使用IDBDatabase (en-US) 的 `setVersion()` (en-US)方法更新版本号事务。这种模式的事务无法与其他事务并发运行。这种模式下的事务被称为“升级事务”。 |

即使目前这些常量已经被废弃，但如果你需要使用它，则需要提供向下兼容方案 (in Chrome the change was made in version 21)。你应当防止出现对象不存在的情况：

```js
var myIDBTransaction = window.IDBTransaction ||
  window.webkitIDBTransaction || { READ\_WRITE: "readwrite" };
```

Example
-------

In the following code snippet, we open a read/write transaction on our database and add some data to an object store. Note also the functions attached to transaction event handlers to report on the outcome of the transaction opening in the event of success or failure. For a full working example, see our To-do Notifications app (view example live.)

```js
// Let us open our database
var DBOpenRequest = window.indexedDB.open("toDoList", 4);

DBOpenRequest.onsuccess = function (event) {
  note.innerHTML += "<li>Database initialised.</li>";

  // store the result of opening the database in the db variable. This is used a lot below
  db = DBOpenRequest.result;

  // Run the addData() function to add the data to the database
  addData();
};

function addData() {
  // Create a new object ready for being inserted into the IDB
  var newItem = [
    {
      taskTitle: "Walk dog",
      hours: 19,
      minutes: 30,
      day: 24,
      month: "December",
      year: 2013,
      notified: "no",
    },
  ];

  // open a read/write db transaction, ready for adding the data
  var transaction = db.transaction(["toDoList"], "readwrite");

  // report on the success of opening the transaction
  transaction.oncomplete = function (event) {
    note.innerHTML +=
      "<li>Transaction completed: database modification finished.</li>";
  };

  transaction.onerror = function (event) {
    note.innerHTML +=
      "<li>Transaction not opened due to error. Duplicate items not allowed.</li>";
  };

  // create an object store on the transaction
  var objectStore = transaction.objectStore("toDoList");

  // add our newItem object to the object store
  var objectStoreRequest = objectStore.add(newItem[0]);

  objectStoreRequest.onsuccess = function (event) {
    // report the success of our new item going into the database
    note.innerHTML += "<li>New item added to database.</li>";
  };
}
```

Specifications
--------------

| Specification |
| --- |
| Indexed Database API 3.0 # transaction |

Browser compatibility
---------------------

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

See also
--------

* Using IndexedDB
* Starting transactions: `IDBDatabase`
* Using transactions: `IDBTransaction`
* Setting a range of keys: `IDBKeyRange`
* Retrieving and making changes to your data: `IDBObjectStore`
* Using cursors: `IDBCursor`
* Reference example: To-do Notifications (view example live.)


MouseScrollEvent - Web API 接口参考

MouseScrollEvent
================

**非标准:** 该特性是非标准的，请尽量不要在生产环境中使用它！

**已弃用:** 不再推荐使用该特性。虽然一些浏览器仍然支持它，但也许已从相关的 web 标准中移除，也许正准备移除或出于兼容性而保留。请尽量不要使用该特性，并更新现有的代码；参见本页面底部的兼容性表格以指导你作出决定。请注意，该特性随时可能无法正常工作。

`MouseScrollEvent` 事件对象代表了当用户在滚动鼠标滚轮或操作其他类似的输入设备时触发的事件。

要优先使用标准化过的 WheelEvent 来代替该陈旧的事件对象。

方法概述
----
```

void initMouseScrollEvent(
  in DOMString typeArg,
  in boolean canBubbleArg,
  in boolean cancelableArg,
  in nsIDOMAbstractView viewArg,
  in long detailArg,
  in long screenXArg,
  in long screenYArg,
  in long clientXArg,
  in long clientYArg,
  in boolean ctrlKeyArg,
  in boolean altKeyArg,
  in boolean shiftKeyArg,
  in boolean metaKeyArg,
  in unsigned short buttonArg,
  in nsIDOMEventTarget relatedTargetArg,
  in long axis);
```

属性
--

| 名称 | 类型 | 描述 |
| --- | --- | --- |
| `axis` | `long` | 表明鼠标滚轮滚动的方向（**只读**） |

常量
--

### Delta 模式

| 名称 | 值 | 描述 |
| --- | --- | --- |
| `HORIZONTAL_AXIS` | `0x01` | 该事件是由鼠标滚轮的横向滚动触发的 |
| `VERTICAL_AXIS` | `0x02` | 该事件是由鼠标滚轮的纵向滚动触发的 |

方法
--

### initMouseScrollEvent()

查看 nsIDOMMouseScrollEvent::initMouseScrollEvent()。

滚轮相关事件对比
--------

| 事件类型 | 事件对象 | 是否标准 | 兼容性 |
| --- | --- | --- | --- |
| mousewheel (en-US) | MouseWheelEvent | 非标准 | 只有 Firefox 不支持 |
| DOMMouseScroll (en-US) | MouseScrollEvent | 非标准 | 只有 Firefox 支持 |
| wheel (en-US) | WheelEvent | DOM Level 3 | Firefox 17+ ie9+ |

浏览器兼容性
------

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

相关链接
----

* `DOMMouseScroll`
* `MozMousePixelScroll`
* 非 Gecko 浏览器中的非标准的鼠标滚轮事件对象：`MouseWheelEvent`
* 被标准化的鼠标滚轮事件对象：`WheelEvent`


Fetch API - Web API 接口参考

Fetch API
=========

Fetch API 提供了一个获取资源的接口（包括跨网络通信）。对于任何使用过 `XMLHttpRequest` 的人都能轻松上手，而且新的 API 提供了更强大和灵活的功能集。

**备注：** 此特性在 Web Worker 中可用

概念和用法
-----

Fetch 提供了对 `Request` 和 `Response`（以及其他与网络请求有关的）对象的通用定义。这将在未来更多需要它们的地方使用它们，无论是 service worker、Cache API，又或者是其他处理请求和响应的方式，甚至是任何一种需要你自己在程序中生成响应的方式（即使用计算机程序或者个人编程指令）。

它同时还为有关联性的概念，例如 CORS 和 HTTP Origin 标头信息，提供一种新的定义，取代它们原来那种分离的定义。

发送请求或者获取资源，请使用 `fetch()` 方法。它在很多接口中都被实现了，更具体地说，是在 `Window` 和 `WorkerGlobalScope` (en-US) 接口上。因此在几乎所有环境中都可以用这个方法获取资源。

`fetch()` 强制接受一个参数，即要获取的资源的路径。它返回一个 `Promise`，该 Promise 会在服务器使用标头响应后，兑现为该请求的 `Response`——**即使服务器的响应是 HTTP 错误状态**。你也可以传一个可选的第二个参数 `init`（参见 `Request`）。

一旦 `Response` 被返回，有许多方法可以获取主体定义的内容以及如何处理它。

你也可以通过 `Request()` 和 `Response()` 构造函数直接创建请求和响应。但是我们不建议这么做，它们更可能被创建为其他的 API 操作的结果（比如，service worker 中的 `FetchEvent.respondWith`）。

### 与 jQuery 的区别

`fetch` 规范主要在三个方面与 `jQuery.ajax()` 不同：

* 从 `fetch()` 返回的 Promise **不会因 HTTP 的错误状态而被拒绝**，即使响应是 HTTP `404` 或 `500`。相反，它将正常兑现（`ok` 状态会被设置为 `false`），并且只有在网络故障或者有任何阻止请求完成时，才拒绝。
* 除非你在 init 对象中设置（去包含）*credentials*，否则 `fetch()` **将不会发送跨源 cookie**。
    + 2018 年 4 月，该规范将默认的 credentials 策略更改为 `'same-origin'`。以下浏览器发布了过时的原生 fetch，并在以下版本中更新：Firefox 61.0b13、Safari 12、Chrome 68。
    + 如果你的目标是这些旧的浏览器，请务必在所有可能接受 cookie/用户登录状态影响的 API 请求中包含拥有 `credentials: 'same-origin'` 的 init 对象。

**备注：** 更多关于 Fetch API 的用法，参考使用 Fetch，以及一些概念 Fetch 基础概念。

### 中止 fetch

要中止未完成的 `fetch()`，甚至 `XMLHttpRequest` 操作，请使用 `AbortController` 和 `AbortSignal` 接口。

Fetch 接口
--------

`fetch()`

包含了 `fetch()` 方法，用于获取资源。

`Headers`

表示响应/请求的标头信息，允许你查询它们，或者针对不同的结果做不同的操作。

`Request`

相当于一个资源请求。

`Response`

相当于请求的响应

规范
--

| Specification |
| --- |
| Fetch Standard # fetch-method |

浏览器兼容性
------

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

参见
--

* 使用 Fetch
* ServiceWorker API (en-US)
* HTTP 访问控制（CORS）
* HTTP
* Fetch polyfill
* Fetch 基础概念


MessagePort - Web API 接口参考

MessagePort
===========

Channel Messaging API 的 **`MessagePort`** 接口代表 `MessageChannel` 的两个端口之一，它可以让你从一个端口发送消息，并在消息到达的另一个端口监听它们。

**备注：** 此特性在 Web Worker 中可用

方法
--

*继承自父类 `EventTarget` 的方法。*

`MessagePort.postMessage` (en-US)

从端口发送一条消息，并且可选是否将对象的所有权交给其他浏览器上下文。

`MessagePort.start` (en-US)

开始发送该端口中的消息队列 (只有使用 `EventTarget.addEventListener` 的时候才需要调用；当使用 `MessagePort.onmessage` 时，是默认开始的。)

`MessagePort.close` (en-US)

断开端口连接，它将不再是激活状态。

事件回调
----

*继承自父类 `EventTarget` 的事件回调。*

`MessagePort.onmessage`

是一个 `EventListener`, 当类型为 `message` 的 `MessageEvent` 在该端口触发时，它将会被调用 ── 也就是说，该端口收到了一条消息。

`onmessageerror` (en-US)

是一个 `EventListener`, 当类型为 `MessageError` 的 `MessageEvent` 被触发时，它将会被调用 ── 这意味着，端口收到了一条无法被反序列化的消息。

事件
--

`message`

 当 `MessagePort` 对象收到消息时会触发。
 也可以通过 `onmessage` 属性使用。

`messageerror` (en-US)

 当 `MessagePort` 对象收到无法被反序列化的消息时触发。
 也可以通过 `onmessageerror` (en-US) 属性使用。

示例
--

在下面的示例中，你可以看到一个使用 `MessageChannel()` 构造函数创建出的新通道。

当 IFrame 加载完成后，我们给 `MessageChannel.port1` 注册了一个 `onmessage` 回调，并且使用 `window.postMessage` 方法把 `MessageChannel.port2` 和一条消息一起传给 IFrame。

当从 IFrame 收到消息时，`onMessage` 方法会把消息输出到一个段落里。

```js
var channel = new MessageChannel();
var output = document.querySelector(".output");
var iframe = document.querySelector("iframe");

// 等待 iframe 加载
iframe.addEventListener("load", onLoad);

function onLoad() {
  // 监听 port1 的事件
  channel.port1.onmessage = onMessage;

  // 把 port2 传给 iframe
  iframe.contentWindow.postMessage("Hello from the main page!", "\*", [
    channel.port2,
  ]);
}

// 处理 port1 收到的消息
function onMessage(e) {
  output.innerHTML = e.data;
}
```

要查看可运行的完整示例，参考我们在 Github 上的 channel messaging basic demo (也可以在线运行).

规范
--

| Specification |
| --- |
| HTML Standard # message-ports |

浏览器兼容性
------

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

参见
--

* 使用 channel messaging


BarcodeDetector - Web API 接口参考

BarcodeDetector
===============

**安全上下文:** 此项功能仅在一些支持的浏览器的安全上下文（HTTPS）中可用。

**备注：** 此特性在 Web Worker 中可用

**实验性:** **这是一项实验性技术**
在将其用于生产之前，请仔细检查浏览器兼容性表格。

Barcode Detection API 的 **`BarcodeDetector`** 接口允许检测图像中的条形码和二维码。

构造方法
----

`BarcodeDetector.BarcodeDetector()`
实验性

使用可选的 `BarcodeDetectorOptions` 参数创建并返回一个 `BarcodeDetector` 对象。

静态方法
----

`getSupportedFormats()`
实验性

返回一个 `Promise`，它兑现一个 `Array`，包含受支持的条形码格式类型。

实例方法
----

`detect()`
实验性

返回一个 `Promise`，它兑现一个具有以下属性的 `DetectedBarcode` 对象数组：

* `boundingBox`: 一个 `DOMRectReadOnly`，返回表示检测到的条形码范围的矩形尺寸，与图像对齐。
* `cornerPoints`：检测到的条形码的四个角点相对于图像的 x 和 y 坐标，从左上角开始顺时针旋转。由于图像内的透视变形，这可能不是方形的。
* `format`：检测到的条形码格式。（有关格式的完整列表，请参阅受支持的条形码格式类型）
* `rawValue`：一个从条形码数据解码的字符串。

示例
--

### 创建检测器

此示例测试浏览器兼容性并使用指定的支持格式创建新的条形码检测器对象。

```js
// 检查兼容性
if (!("BarcodeDetector" in globalThis)) {
  console.log("此浏览器不支持条形码检测器。");
} else {
  console.log("条形码检测器是支持的！");

  // 创建新检测器
  const barcodeDetector = new BarcodeDetector({
    formats: ["code\_39", "codabar", "ean\_13"],
  });
}
```

### 获取支持的格式

以下示例调用 `getSupportedFormats()` 方法并将结果在控制台打印。

```js
// 检查支持的类型
BarcodeDetector.getSupportedFormats().then((supportedFormats) => {
  supportedFormats.forEach((format) => console.log(format));
});
```

### 检测条形码

此示例使用 `detect()` 方法来检测给定图像中的条形码。识别结果被迭代并且条形码数据在控制台打印。

```js
barcodeDetector
  .detect(imageEl)
  .then((barcodes) => {
    barcodes.forEach((barcode) => console.log(barcode.rawValue));
  })
  .catch((err) => {
    console.log(err);
  });
```

规范
--

| Specification |
| --- |
| Accelerated Shape Detection in Images # barcode-detection-api |

浏览器兼容性
------

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

参见
--

* barcodefaq.com：包含有关不同条形码和不同类型示例的信息的网站。
* 图像中的加速形状检测


EyeDropper API - Web API 接口参考

EyeDropper API
==============

**实验性:** **这是一项实验性技术**
在将其用于生产之前，请仔细检查浏览器兼容性表格。

**EyeDropper API** 提供了一种创建拾色器工具的机制。使用该工具，用户可以从屏幕上取样颜色，包括浏览器窗口之外的区域。

概念
--

创意应用通常允许用户从应用程序中的绘图或形状中取样颜色以便重用。Web 应用程序可以利用 **EyeDropper API**，通过浏览器提供类似的拾色器模式。

使用该 API，Web 应用程序可以启动拾色器模式。一旦启动，光标会变化以提示用户拾色器模式处于活动状态。用户可以从屏幕上的任意位置选择颜色，或者按下 `Escape` 键取消拾色器模式。

安全和隐私措施
-------

为了防止恶意网站在用户不知情的情况下获取其屏幕上的像素数据，**EyeDropper API** 实施了以下措施：

* 该 API 不允许在没有用户意图的情况下启动拾色器模式。只能在用户操作（例如按钮点击）的响应中调用 `EyeDropper.prototype.open()` 方法。
* 在没有用户新的意图的情况下，无法再次获取任何像素信息。由 `EyeDropper.prototype.open()` 返回的 Promise 只会在用户操作（例如点击像素）的响应中返回一个颜色值。因此，无法在用户不知情的情况下在后台使用拾色器。
* 为了帮助用户更容易地注意到拾色器模式，浏览器会提供明显的提示。在启动拾色器模式后，正常的鼠标光标会在短暂延迟后消失，取而代之的是一个放大镜图标。此外，拾色器模式开始和用户能够选择像素之间存在一段延迟，以确保用户有足够的时间看到放大镜图标。
* 用户还可以随时取消拾色器模式（通过按下 `Escape` 键）。
接口
--

* `EyeDropper`
实验性
规范
--

| Specification |
| --- |
| EyeDropper API # eyedropper-interface |

浏览器兼容性
------

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

参见
--

* 使用 EyeDropper API，可以选择屏幕上任意像素的颜色。
* EyeDropper API W3C/SMPTE 联合研讨会


CSSMathSum - Web API 接口参考

CSSMathSum
==========

**实验性:** **这是一项实验性技术**
在将其用于生产之前，请仔细检查浏览器兼容性表格。

CSS Typed Object Model API (en-US) 的 **`CSSMathSum`** 接口通过调用`CSSNumericValue` (en-US) 的 `add()` (en-US), `sub()` (en-US), 或 `toSum()` (en-US) 方法获得结果。

创建
--

`CSSMathSum.CSSMathSum()` (en-US)

创建一个新的 `CSSMathSum` 对象。

属性
--

`CSSMathSum.values` (en-US)

返回一个包含一个或多个 `CSSNumericValue` (en-US) 对象的 `CSSNumericArray` (en-US) 对象。

### 事件处理

No

方法
--

None.

说明
--

| Specification |
| --- |
| CSS Typed OM Level 1 # cssmathsum |

浏览器兼容性
------

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


VideoPlaybackQuality - Web API 接口参考

VideoPlaybackQuality
====================

**实验性:** **这是一项实验性技术**
在将其用于生产之前，请仔细检查浏览器兼容性表格。

**`VideoPlaybackQuality`** 对象表示了一系列描述视频播放质量的指标。

可以通过 `HTMLVideoElement.getVideoPlaybackQuality()` (en-US) 创建一个实例。

属性
--

*`VideoPlaybackQuality` 对象不继承任何属性。*

`VideoPlaybackQuality.creationTime` (en-US) 只读

一个用毫秒表示从开始页面浏览到对象创建的 `DOMHighResTimeStamp` 对象。

`VideoPlaybackQuality.totalVideoFrames` 只读

一个表示相关联的 `HTMLVideoElement` 自从创建起的已创建和丢弃帧数数量总和的 unsigned long 值。.

`VideoPlaybackQuality.droppedVideoFrames` (en-US) 只读

一个表示相关联的 `HTMLVideoElement` 自从创建起的已丢弃帧数数量的 `unsigned long` 值。

`VideoPlaybackQuality.corruptedVideoFrames` (en-US) 只读

一个表示相关联的 `HTMLVideoElement` 自从创建起的损坏帧数数量的 `unsigned long` 值。一个损坏帧可能属于创建帧或丢弃帧。

`VideoPlaybackQuality.totalFrameDelay` (en-US) 只读
已弃用

一个表示相关联的 `HTMLVideoElement` 自从创建起的帧延迟总和的 double 值。帧延迟是指一个帧的理论展示时间与实际显示时间的差值。

方法
--

*`VideoPlaybackQuality` 对象没有实现任何特定方法，也没有继承任何方法。*

规范
--

| Specification |
| --- |
| Media Playback Quality # videoplaybackquality-interface |

浏览器兼容性
------

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

另见
--

* The `HTMLVideoElement.getVideoPlaybackQuality()` (en-US) method for constructing and returning this interface.
* `MediaSource`
* `SourceBuffer`


HTMLOptGroupElement - Web API 接口参考

HTMLOptGroupElement
===================

**`HTMLOptGroupElement`** 接口提供一些特别的属性和方法（除了从 `HTMLElement` 对象接口中继承的以外）以调整 `<optgroup>` 元素的布局和显示。

属性
--

*从 `HTMLElement` 中继承属性。*

`HTMLOptGroupElement.disabled`

是一个 `boolean` (en-US)，表示整个子代 `<option>` 列表是可用的（`false`）还是不可用的（`true`）。

`HTMLOptGroupElement.label`

是一个 `DOMString`，表示该分组的标签。

方法
--

*没有专有的方法；从 `HTMLElement` 中继承方法。*

规范
--

| Specification |
| --- |
| HTML Standard # htmloptgroupelement |

浏览器兼容性
------

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

参见
--

* 实现该接口的 HTML 元素：`<optgroup>`


SVGCircleElement - Web API 接口参考

SVGCircleElement
================

SVG Circle DOM 接口
-----------------

`SVGCircleElement` 接口提供了对`<circle>`元素的属性的访问，而且还提供了操作该元素的方法。

### 接口概览

|  |  |
| --- | --- |
| 又作用于 | `SVGElement`、
 `SVGTests`、
 `SVGLangSpace`、`SVGExternalResourcesRequired`、`SVGStylable` (en-US)、
 `SVGTransformable` |
| 方法 | *无* |
| 属性 | * 只读 `SVGAnimatedLength` (en-US) `cx`
* 只读 `SVGAnimatedLength` (en-US) `cy`
* 只读 `SVGAnimatedLength` (en-US) `r`
 |
| 规范文档 | SVG 1.1 (2nd Edition) |

属性
--

| 名称 | 类型 | 描述 |
| --- | --- | --- |
| `cx` | `SVGAnimatedLength` (en-US) | 对应于给定`<circle>`元素的`cx`属性 |
| `cy` | `SVGAnimatedLength` (en-US) | 对应于给定`<circle>`元素的`cy`属性 |
| `r` | `SVGAnimatedLength` (en-US) | 对应于给定`<circle>`元素的`r`属性 |

方法
--

该`SVGCircleElement`接口没有提供任何专有方法。

规范
--

| Specification |
| --- |
| Scalable Vector Graphics (SVG) 2 # InterfaceSVGCircleElement |

浏览器兼容性
------

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

参见
--

* `<circle>` SVG Element


CSSGroupingRule - Web API 接口参考

CSSGroupingRule
===============

任何实现了 `CSSGroupingRule` 接口的对象表示任何可以包含或嵌套其他规则的的 CSS @ 规则。

从其派生的对象：

* `CSSConditionRule` 及其派生的对象：`CSSMediaRule`、`CSSSupportsRule`，和 `CSSDocumentRule`。
* `CSSPageRule`
语法
--

The syntax is described using the WebIDL format.
```

interface CSSGroupingRule : CSSRule {
    readonly attribute CSSRuleList cssRules;
    unsigned long insertRule (DOMString rule, unsigned long index);
    void deleteRule (unsigned long index);
}
```

所有 CSSGroupingRule 实例共有的属性
--------------------------

The `CSSGroupingRule` derives from `CSSRule` and inherits all properties of this class. It has one specific property:

`CSSGroupingRule.cssRules` (en-US) 只读

Returns a `CSSRuleList` of the CSS rules in the media rule.

所有 CSSGroupingRule 实例共有的方法
--------------------------

The `CSSGroupingRule` derives from `CSSRule` and inherits all methods of this class. It has two specific methods:

`CSSGroupingRule.deleteRule` (en-US)

Deletes a rule from the style sheet.

`CSSGroupingRule.insertRule` (en-US)

Inserts a new style rule into the current style sheet.

规范
--

| Specification |
| --- |
| CSS Object Model (CSSOM) # the-cssgroupingrule-interface |

浏览器兼容性
------

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

参见
--

* Using dynamic styling information


HTMLBRElement - Web API 接口参考

HTMLBRElement
=============

**`HTMLBRElement`** 接口代表一个 HTML 换行元素 (`<br>`)，它从 `HTMLElement` 继承。

属性
--

*从父类 `HTMLElement` 继承属性。*

`HTMLBRElement.clear`
已弃用

Is a `DOMString` indicating the flow of text around floating objects.

方法
--

*无具体方法；从父类 `HTMLElement` 继承方法*。

规范
--

| Specification |
| --- |
| HTML Standard # htmlbrelement |

浏览器兼容性
------

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

参见
--

* HTML element implementing this interface: `<br>`


setTimeout() 全局函数 - Web API 接口参考

setTimeout() 全局函数
=================

全局的 **`setTimeout()`** 方法设置一个定时器，一旦定时器到期，就会执行一个函数或指定的代码片段。

语法
--

```js
setTimeout(code)
setTimeout(code, delay)

setTimeout(functionRef)
setTimeout(functionRef, delay)
setTimeout(functionRef, delay, param1)
setTimeout(functionRef, delay, param1, param2)
setTimeout(functionRef, delay, param1, param2, /\* … ,\*/ paramN)
```

### 参数

`functionRef`

当定时器到期后，将要执行的 `function`。

`code`

这是一个可选语法，允许你包含在定时器到期后编译和执行的字符串而非函数。使用该语法是**不推荐的**，原因和使用 `eval()` 一样，有安全风险。

`delay` 可选

定时器在执行指定的函数或代码之前应该等待的时间，单位是毫秒。如果省略该参数，则使用值 0，意味着“立即”执行，或者更准确地说，在下一个事件循环执行。

注意，无论是哪种情况，实际延迟可能会比预期长一些，参见下方延时比指定值更长的原因一节的叙述。

还要注意的是，如果值不是数字，隐含的类型强制转换会静默地对该值进行转换，使其成为一个数字——这可能导致意想不到的、令人惊讶的结果；见非数字延迟值被静默地强制转化为数字以了解一个示例。

`param1`, …, `paramN` 可选

附加参数，一旦定时器到期，它们会作为参数传递给 `functionRef` 指定的函数。

### 返回值

返回值 `timeoutID` 是一个正整数，表示由 `setTimeout()` 调用创建的定时器的编号。这个值可以传递给 `clearTimeout()` 来取消该定时器。

保证 `timeoutID` 值不会被同一对象（window 或 worker）的后续调用 `setTimeout()` 或 `setInterval()` 重复使用。然而，不同的对象使用不同的 ID 池。

描述
--

使用 `clearTimeout()` 取消超时。

如果要重复调用某个函数（如每 *N* 毫秒调用一次），考虑使用 `setInterval()`。

### 非数字延迟值被静默地强制转化为数字

如果调用 `setTimeout()` 的 *delay* 值不是数字，隐含的类型强制转换会静默地对该值进行转换，使其成为数字。例如，下面的代码在 *delay* 值中错误地使用了字符串 `"1000"`，而不是数字 `1000`——但它仍然有效，因为当代码运行时，字符串被强制转换成数字 `1000`，所以代码在 1 秒后执行。

```js
setTimeout(() => {
  console.log("延迟了 1 秒。");
}, "1000");
```

但在许多情况下，隐式类型强制转换会导致意想不到的、令人惊讶的结果。例如，当下面的代码运行时，字符串 `"1 秒"` 最终被强制转换为数字 `0`——因此，代码立即执行，没有延迟。

```js
setTimeout(() => {
  console.log("延迟了 1 秒。");
}, "1 秒");
```

因此，不要使用字符串来表示 *delay* 值，而要始终使用数字：

```js
setTimeout(() => {
  console.log("延迟了 1 秒。");
}, 1000);
```

### 与异步函数配合

`setTimeout()` 是异步函数，意味着计时器函数将不会暂停函数栈中其他函数的执行。也就是说，你不能使用 `setTimeout()` 来在函数栈中下一个函数执行前执行“暂停”操作。

查看以下示例：

```js
setTimeout(() => {
  console.log("这是第一条消息");
}, 5000);
setTimeout(() => {
  console.log("这是第二条消息");
}, 3000);
setTimeout(() => {
  console.log("这是第三条消息");
}, 1000);

// 输出：

// 这是第三条消息
// 这是第二条消息
// 这是第一条消息
```

请注意，第一个函数在调用第二个函数之前没有建立一个 5 秒钟的“暂停”。相反，第一个函数被调用，但等待 5 秒后执行。当第一个函数等待执行时，第二个函数被调用，在第二个函数执行之前，对其进行了 3 秒的等待。由于第一个和第二个函数的定时器都没有完成，第三个函数被调用并首先完成其执行。第二个函数紧随其后。在第一个函数的定时器最终完成后，最后执行该函数。

要创建一个进程，其中一个函数只有在另一个函数完成后才会触发，请参见关于 Promise 的文档。

关于“this”的问题
-----------

当你向 `setTimeout()` 传递一个函数时，该函数中的 `this` 指向跟你的期望可能不同，这个问题在 JavaScript 参考中进行了详细解释。

由 `setTimeout()` 执行的代码是从一个独立于调用 `setTimeout` 的函数的执行环境中调用的。为被调用的函数设置 `this` 关键字的通常规则适用，如果你没有在调用中或用 `bind` 设置 `this`，它将默认为 `window`（或 `global`）对象。它将与调用 `setTimeout` 的函数的 `this` 值不一样。

```js
const myArray = ["zero", "one", "two"];
myArray.myMethod = function (sProperty) {
  console.log(arguments.length > 0 ? this[sProperty] : this);
};

myArray.myMethod(); // 输出 "zero,one,two"
myArray.myMethod(1); // 输出 "one"
```

上面这段代码正常工作，当调用 `myArray` 时，它的 `this` 设定为 `myArray`，故在函数中 `this[sProperty]` 与 `myArray[sProperty]` 等价。然而，在以下示例中：

```js
setTimeout(myArray.myMethod, 1.0 \* 1000); // 在 1 秒后输出 "[object Window]"
setTimeout(myArray.myMethod, 1.5 \* 1000, "1"); // 在 1.5 秒后输出 "undefined"
```

传递给 `setTimeout` 的是 `myArray.myMethod` 函数，当调用它的时候，`this` 没有指向，故其默认指向 `window` 对象。

在 `setTimeout` 中也没有传递 `thisArg` 的选项，就像在 `forEach()` 和 `reduce()` 等数组方法中一样。如下方示例所示，使用 `call` 来设置 `this` 也不起作用。

```js
setTimeout.call(myArray, myArray.myMethod, 2.0 \* 1000); // 出错
setTimeout.call(myArray, myArray.myMethod, 2.5 \* 1000, 2); // 同样会出错
```

#### 解决方案

##### 使用包装函数

一个通用的方法是用包装函数来将 `this` 设置为所需要的值：

```js
setTimeout(function () {
  myArray.myMethod();
}, 2.0 \* 1000); // 在 2 秒后输出 "zero,one,two"
setTimeout(function () {
  myArray.myMethod("1");
}, 2.5 \* 1000); // 在 2.5 秒后输出 "one"
```

包装函数也可以是箭头函数：

```js
setTimeout(() => {
  myArray.myMethod();
}, 2.0 \* 1000); // 在 2 秒后输出 "zero,one,two"
setTimeout(() => {
  myArray.myMethod("1");
}, 2.5 \* 1000); // 在 2.5 秒后输出 "one"
```

##### 使用 bind()

或者，也可以使用 `bind()` 来为所有对特定函数的调用设置 `this` 的值：

```js
const myArray = ["zero", "one", "two"];
const myBoundMethod = function (sProperty) {
  console.log(arguments.length > 0 ? this[sProperty] : this);
}.bind(myArray);

myBoundMethod(); // 输出 "zero,one,two"。因为 'this' 在函数中绑定到了 myArray
myBoundMethod(1); // 输出 "one"
setTimeout(myBoundMethod, 1.0 \* 1000); // 由于绑定问题，还是在 1 秒后输出 "zero,one,two"
setTimeout(myBoundMethod, 1.5 \* 1000, "1"); // 在 1.5 秒后输出 "one"
```

### 传递字符串字面量

将字符串而不是函数传递给 `setTimeout()` 与使用 `eval()` 具有相同的问题。

```js
// 不要这样做
setTimeout("console.log('Hello World!');", 500);
```

```js
// 这样做
setTimeout(() => {
  console.log("Hello World!");
}, 500);
```

传递给 `setTimeout()` 的字符串是在全局上下文中求值的，因此当字符串被求值为代码时，`setTimeout()` 被调用的上下文中的局部符号将不可用。

### 延时比指定值更长的原因

有很多因素会导致 setTimeout 的回调函数执行比设定的预期值更久，本节将讨论最常见的原因。

#### 嵌套超时

正如 HTML 标准中规定的那样，一旦对 `setTimeout` 的嵌套调用被安排了 5 次，浏览器将强制执行 4 毫秒的最小超时。

这可以在下面的例子中看到，在这个例子中，我们嵌套了对 `setTimeout` 的调用，延迟为 `0` 毫秒，并记录每次调用处理程序时的延迟。前四次，延迟约为 0 毫秒，之后约为 4 毫秒：

```html
<button id="run">运行</button>
<table>
  <thead>
    <tr>
      <th>之前</th>
      <th>现在</th>
      <th>实际延时</th>
    </tr>
  </thead>
  <tbody id="log"></tbody>
</table>
```

```js
let last = 0;
let iterations = 10;

function timeout() {
  // 记录调用时间
  logline(new Date().getMilliseconds());
  // 如果还没结束，计划下次调用
  if (iterations-- > 0) {
    setTimeout(timeout, 0);
  }
}
function run() {
  // 清除日志
  const log = document.querySelector("#log");
  while (log.lastElementChild) {
    log.removeChild(log.lastElementChild);
  }

  // 初始化迭代次数和开始时间戳
  iterations = 10;
  last = new Date().getMilliseconds();
  // 开启计时器
  setTimeout(timeout, 0);
}

function logline(now) {
  // 输出上一个时间戳、新的时间戳及差值
  const tableBody = document.getElementById("log");
  const logRow = tableBody.insertRow();
  logRow.insertCell().textContent = last;
  logRow.insertCell().textContent = now;
  logRow.insertCell().textContent = now - last;
  last = now;
}

document.querySelector("#run").addEventListener("click", run);
```

```
\* {
  font-family: monospace;
}
th,
td {
  padding: 0 10px 0 10px;
  text-align: center;
  border: 1px solid;
}
table {
  border-collapse: collapse;
  margin-top: 10px;
}
```

#### 非活动标签的超时

为了优化后台标签的加载损耗（以及降低耗电量），浏览器会在非活动标签中强制执行一个最小的超时延迟。如果一个页面正在使用网络音频 API `AudioContext` 播放声音，也可以不执行该延迟。

这方面的具体情况与浏览器有关：

* Firefox 桌面版和 Chrome 针对不活动标签都有一个 1 秒的最小超时值。
* 安卓版 Firefox 浏览器对不活动的标签有一个至少 15 分钟的超时，并可能完全卸载它们。
* 如果标签中包含 `AudioContext`，Firefox 不会对非活动标签进行节流。

#### 追踪型脚本的节流

Firefox 对它识别为追踪型脚本的脚本实施额外的节流。当在前台运行时，节流的最小延迟仍然是 4ms。然而，在后台标签中，节流的最小延迟是 10000 毫秒，即 10 秒，在文档首次加载后 30 秒开始生效。

参见跟踪保护以了解更多信息。

#### 超时延迟

如果页面（或操作系统/浏览器）正忙于其他任务，超时也可能比预期的晚。需要注意的一个重要情况是，在调用 `setTimeout()` 的线程结束之前，函数或代码片段不能被执行。例如：

```js
function foo() {
  console.log("foo 被调用");
}
setTimeout(foo, 0);
console.log("setTimeout 之后");
```

会在控制台输出：
```

setTimeout 之后
foo 被调用
```

出现这个结果的原因是，尽管 `setTimeout` 以 0ms 的延迟来调用函数，但这个任务已经被放入了队列中并且等待下一次执行；并不是立即执行；队列中的等待函数被调用之前，当前代码必须全部运行完毕，因此这里运行结果并非预想的那样。

### 在加载页面时推迟超时

当前标签页正在加载时，Firefox 将推迟触发 `setTimeout()` 计时器。直到主线程被认为是空闲的（类似于 window.requestIdleCallback()），或者直到加载事件触发完毕，才开始触发。

### WebExtension 背景页面和定时器

在 WebExtension 中，`setTimeout()` 不会可靠工作。扩展开发者应当使用 `alarms` API 作为替代。

### 最大延时值

浏览器内部以 32 位带符号整数存储延时。这就会导致如果一个延时大于 2147483647 毫秒（大约 24.8 天）时就会溢出，导致定时器将会被立即执行。

示例
--

### 设定和清除超时

下面的例子在一个网页中设置了两个简单的按钮，并将它们与 `setTimeout()` 和 `clearTimeout()` 例程挂钩。按下第一个按钮将设置一个超时，在两秒后显示一条信息，并存储超时 ID 供 `clearTimeout()` 使用。你可以选择按第二个按钮来取消这个超时。

#### HTML

```html
<button onclick="delayedMessage();">在两秒后显示一条消息</button>
<button onclick="clearMessage();">在显示前取消这条消息</button>

<div id="output"></div>
```

#### JavaScript

```js
let timeoutID;

function setOutput(outputContent) {
  document.querySelector("#output").textContent = outputContent;
}

function delayedMessage() {
  setOutput("");
  timeoutID = setTimeout(setOutput, 2 \* 1000, "太慢了！");
}

function clearMessage() {
  clearTimeout(timeoutID);
}
```

```
#output {
  padding: 0.5rem 0;
}
```

#### 运行结果

也可以看看 `clearTimeout()` 的示例。

规范
--

| Specification |
| --- |
| HTML Standard # dom-settimeout-dev |

浏览器兼容性
------

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

参见
--

* `core-js` 中允许向回调函数传递参数的 `setTimeout` 版本的 polyfill
* `clearTimeout`
* `setInterval()`
* `window.requestAnimationFrame`
* `queueMicrotask()`


WebSockets - Web API 接口参考

WebSockets
==========

**WebSockets** 是一种先进的技术。它可以在用户的浏览器和服务器之间打开交互式通信会话。使用此 API，你可以向服务器发送消息并接收事件驱动的响应，而无需通过轮询服务器的方式以获得响应。

接口
--

`WebSocket`

用于连接 WebSocket 服务器的主要接口，之后可以在这个连接上发送 和接受数据。

`CloseEvent`

连接关闭时 WebSocket 对象发送的事件。

`MessageEvent`

当从服务器获取到消息的时候 WebSocket 对象触发的事件。

工具
--

* HumbleNet: 一个在浏览器中工作的跨平台网络库。它由一个围绕 websocket 和 WebRTC 的 C 包装器组成，抽象了跨浏览器的差异，方便了为游戏和其他应用程序创建多用户网络功能。
* µWebSockets:由 C++11 和 Node.js 实现的高度可扩展的 WebSocket 服务器和客户端.。
* ClusterWS: 轻量级、快速和强大的框架，用于在 Node.js 中构建可伸缩的 WebSocket 应用程序。
* Socket.IO: 一个基于长轮询/WebSocket 的 Node.js 第三方传输协议。
* SocketCluster: 一个用于Node.js的 pub/sub 专注于可伸缩 WebSocket 框架。
* WebSocket-Node: 一个用 Node.js实现 WebSocket 服务器 API。
* Total.js:一个用Node.js 实现的的 Web 应用程序框架（例如:WebSocket 聊天）。
* Faye: 一个 Node.js 的 WebSocket（双向连接）和 EventSource（单向连接）的服务器和客户端。
* SignalR: SignalR 在可用时将隐藏使用 WebSockets，在不可用时将优雅地使用其他技术和技术，而应用程序代码保持不变。
* Caddy: 能够将任意命令（stdin/stdout）代理为 websocket 的 web 服务器。
* ws: 一个流行的 WebSocket 客户端和服务器 Node.js库。
* jsonrpc-bidirectional: 易于使用异步 RPC 库，通过单个 WebSocket 或 RTCDataChannel (WebRTC) 连接支持双向调用。TCP / SCTP /等。客户端和服务器可以各自承载自己的 JSONRPC 和服务器端点。
* rpc-websockets: JSON-RPC 2.0 在 websocket 上实现 Node.js 和 JavaScript。
规范
--

| Specification |
| --- |
| WebSockets Standard # the-websocket-interface |

浏览器兼容性
------

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

参见
--

* RFC 6455——WebSocket 协议
* WebSocket API 规范
* 服务器发送事件


HTMLDocument - Web API 接口参考

HTMLDocument
============

**`HTMLDocument`** 是 DOM 的一个抽象接口，它提供了 XML 文档里没有出现的特殊属性和方法。

它的属性和方法包含在 `Document` 接口页面中，并且每个属性和方法都分成小节进行了介绍。

HTMLDocument 对象继承了 Document 接口和 HTMLDocument 接口。因此它有比 Document 更多的属性。并且与 XMLDocument 不同的是，HTMLDocument 是具有外观的，并且要管理它后代的 HTMLElement。

规范
--

| Specification |
| --- |
| HTML Standard # htmldocument |

* http://www.w3.org/TR/DOM-Level-2-HTM...ml#ID-26809268


CSSStyleSheet - Web API 接口参考

CSSStyleSheet
=============

**`CSSStyleSheet`** 接口代表一个 CSS 样式表，并允许检查和编辑样式表中的规则列表。它从父类型 `StyleSheet` 继承属性和方法。

一个 CSS 样式表包含了一组表示规则的 `CSSRule` 对象。每条 CSS 规则可以通过与之相关联的对象进行操作，这些规则被包含在 `CSSRuleList` 内，可以通过样式表的 `cssRules` (en-US) 属性获取。

例如，`CSSStyleRule` 对象中的一条规则可能包含这样的样式：

```css
h1,
h2 {
  font-size: 16pt;
}
```

另一条规则可能是一条“@”规则（*at-rule*），例如 `@import` 或 `@media` 等等。

在说明部分中查看 `CSSStyleSheet` 对象的多种获取方式。

属性
--

继承自 *`StyleSheet`。*

`cssRules` (en-US) 只读

返回一个实时的 `CSSRuleList`，其中包含组成样式表的 `CSSRule` 对象的一个最新列表。

这一般用于获取单条规则，如下：
```

styleSheet.cssRules[i] // where i = 0..cssRules.length-1
```

使用`CSSStyleSheet` 的 `insertRule()` 和 `deleteRule()` 方法以在 `cssRules` 中添加或移除规则。

`ownerRule` (en-US) 只读

如果一个样式表示通过`@import` 规则引入文档，那么 `ownerRule` 属性会返回相应的`CSSImportRule` (en-US)对象，否则返回 `null`。

方法
--

继承自 *`StyleSheet`。*

`deleteRule()`

从样式表中删除特定位置的一条规则。

`insertRule()`

向样式表的特定位置插入一条新规则，需要提供新规则的完整文本。

遗留属性
----

*这些遗留属性是很久以前由微软提出的，不应该再使用，但这些属性短期内不会被移除。*

`rules` (en-US) 只读

`rules` 属性的功能与标准的`cssRules` (en-US)属性相同；它返回一个实时的 `CSSRuleList`，其中包含样式表中所有规则的一个最新列表。

遗留方法
----

*这些遗留方法是很久以前由微软提出的，应尽量避免使用，但这些方法短期内不会被移除。*

`addRule()` (en-US)

向样式表添加一条新规则，需要提供应用样式的选择器和应用在匹配元素上的样式块。

这和 `insertRule()` 不同，后者只是简单地将整个传入的规则文本当作一个字符串。

`removeRule()` (en-US)

与`deleteRule()`功能相同；从样式表的规则列表的特定位置中移除规则。

说明
--

在一些浏览器中，如果一个样式表加载自不同的域，访问 `cssRules` 属性时会抛出 `SecurityError`。

一个样式表最多与一个`Document`链接，即所应用的那个`Document`（除非`disabled`）。一个特定文档的 `CSSStyleSheet` 对象列表可用 `document.styleSheets` 属性获取。一个特定的样式表也可以通过其所在对象（`Node` 或 `CSSImportRule`）获取，如果有的话。

在文档的样式表加载时，一个 `CSSStyleSheet` 对象由浏览器自动创建并插入至文档的`Document.styleSheets`列表中。由于样式表列表不能直接修改，我们没有什么有效的手段取手动创建一个新的 `CSSStyleSheet` 对象（不过Constructable Stylesheet Objects很快会来到 web 平台，而且 Blink 早已支持）。需要创建新的样式表就直接在文档中插入`<style>` 或 `<link>` 元素吧。

以下是将样式表链接到文档的一些方式（可能不完整）：

| 样式表与文档链接的原因 | 是否出现在`document. styleSheets` 列表中 | 获取样式表对象所在的元素/规则 | 所在对象的接口 | 从所在对象获取 CSSStyleSheet 对象 |
| --- | --- | --- | --- | --- |
| 文档中的`<style>` 和`<link>` 元素 | 是 | `.ownerNode` (en-US) | `HTMLLinkElement` (en-US), `HTMLStyleElement`, 或 `SVGStyleElement` (en-US) | `.sheet` (en-US) |
| 使用 CSS `@import` 从其他样式表导入并应用到文档的规则 | 是 | `.ownerRule` (en-US) | `CSSImportRule` (en-US) | `.styleSheet` (en-US) |
| `<?xml-stylesheet ?>` processing instruction in the (non-HTML) document | 是 | `.ownerNode` (en-US) | `ProcessingInstruction` (en-US) | `.sheet` (en-US) |
| HTTP 链接头部 | 是 | *N/A* | N/A | N/A |
| 用户代理（默认）样式表 | 否 | N/A | N/A | N/A |

规范
--

| Specification |
| --- |
| CSS Object Model (CSSOM) # the-cssstylesheet-interface |

浏览器兼容性
------

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

参见
--

* CSS Object Model
* Using dynamic styling information


FetchEvent - Web API 接口参考

FetchEvent
==========

这是会在 service worker 全局作用域中触发 `fetch` 事件的事件类型。它包含关于 fetch 的信息，包括 request 和接收方如何处理响应。它提供 `event.respondWith()` 方法，允许我们为此 fetch 提供一个响应。

Event

ExtendableEvent

FetchEvent构造函数
----

`FetchEvent()` (en-US)

创建一个新的 `FetchEvent` 对象。这个构造函数不是很常用。浏览器自己会创建这些对象，并为它们提供 `fetch` 事件的回调。

属性
--

*从它的祖先 `Event` 继承属性*。

`FetchEvent.clientId` 只读

发起 fetch 的同源`客户端`的 `id`。

`FetchEvent.preloadResponse` (en-US) 只读

一个兑现为 `Response` 的 `Promise`，如果该 fetch 没有导航或者 navigation preload (en-US) 未启用，则是 `undefined`。

`FetchEvent.replacesClientId` (en-US) 只读

页面导航期间正被替换的`客户端`的 `id`。

`FetchEvent.resultingClientId` (en-US) 只读

页面导航期间用于替换的`客户端`的 `id`。

`FetchEvent.request` 只读

浏览器想要发送的 `Request`。

方法
--

*从它的父元素 `ExtendableEvent` 继承方法*。

`FetchEvent.respondWith()`

阻止浏览器的默认 fetch 操作，并且由你自己提供一个响应（可以是一个 promise）。

`ExtendableEvent.waitUntil()`

延长事件的生命周期。用于通知浏览器延长超出响应回复时间的任务，例如流和缓存。

示例
--

fetch 事件对非 GET 请求使用浏览器默认值。对于 GET 请求它试图在缓存中匹配，如果缓存中没有匹配，则回落到网络请求。如果在缓存中匹配成功，它将异步更新缓存，以供下次使用。

```js
self.addEventListener("fetch", (event) => {
  // Let the browser do its default thing
  // for non-GET requests.
  if (event.request.method !== "GET") return;

  // Prevent the default, and handle the request ourselves.
  event.respondWith(
    (async () => {
      // Try to get the response from a cache.
      const cache = await caches.open("dynamic-v1");
      const cachedResponse = await cache.match(event.request);

      if (cachedResponse) {
        // If we found a match in the cache, return it, but also
        // update the entry in the cache in the background.
        event.waitUntil(cache.add(event.request));
        return cachedResponse;
      }

      // If we didn't find a match in the cache, use the network.
      return fetch(event.request);
    })(),
  );
});
```

规范
--

| Specification |
| --- |
| Service Workers # fetchevent-interface |

浏览器兼容性
------

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

参见
--

* `Promise`
* Fetch API


Pointer events 指针事件 - Web API 接口参考

Pointer events 指针事件
===================

目前绝大多数的 Web 内容都假设用户的指针定点设备为鼠标。然而，近年来的新兴设备支持更多不同方式的指针定点输入，如各类触控笔和触摸屏幕等。这就有必要扩展现存的定点设备事件模型，以有效追踪各类\*指针事件\*。

指针事件 - Pointer events 是一类可以为定点设备所触发的 DOM 事件。它们被用来创建一个可以有效掌握各类输入设备（鼠标、触控笔和单点或多点的手指触摸）的统一的 DOM 事件模型。所谓 *指针* 是指一个可以明确指向屏幕上某一组坐标的硬件设备。建立这样一个单独的事件模型可以有效的简化 Web 站点与应用所需的工作，同时也便于提供更加一致与良好的用户体验，无需关心不同用户和场景在输入硬件上的差异。另外，对于某些需要处理特定设备的场景，指针事件也定义了一个 `pointerType` (en-US) 属性用以查看触发事件的设备类型。

这些事件需要能够处理 `mouse events` 之类较为通用的指针输入（`mousedown/pointerdown`, `mousemove/pointermove`, 等）。因此，指针事件的类型，很大程度上类似于当前的鼠标事件类型。

此外，一个指针事件，也同时包含了鼠标事件中所常见的属性（client coordinates, target element, button states，等）以及适用于其他输入设备的新属性：pressure, contact geometry, tilt，等等。实际上，`PointerEvent` 接口继承了所有 `MouseEvent` 中的属性，以保障原有为鼠标事件所开发的内容能更加有效的迁移到指针事件。

相关名词
----

active buttons state

The condition when a *pointer* has a non-zero value for the `buttons` property. For example, in the case of a pen, when the pen has physical contact with the digitizer, or at least one button is depressed while hovering.

活跃指针 - active pointer

任意\*指针\*输入设备都可以产生事件。一个可以产生后继事件的指针可以被认为是一个活跃指针。例如，一个触摸笔处于压下状态时可以认为是活跃的，因为它接下来的抬起或移动都会产生额外的后继事件。

数位设备

一个可以检测其表面接触行为的传感设备。通常来说，其所用的传感设备是一个可以感知由某些输入设备（如触控笔、压感笔、手指等）所提供的输入信息的可触摸屏幕。

命中检测

浏览器用以检测某一指针事件的目标元素的过程。通常来说，这一过程是通过比照出现在文档或屏幕媒介上的指针位置与视觉布局来实现的。

指针

某个呈现形式并不确定的硬件，该硬件可以指向一个（或一组）屏幕上特定坐标。典型的指针输入设备有鼠标、触控笔、手指触控点等。

指针捕捉

指针捕捉能够允许某些事件的产生。这些事件在指针将要重新指向一些并非通过命中检测而给定元素时触发。

指针事件

一个被\*指针\*所触发 DOM 事件。

相关接口
----

首要的接口为 `PointerEvent` 接口，该接口由一个构造函数`constructor` (en-US) 加上一些事件类型以及相应全局事件的处理方法构成。

标准中还包括一些对于 `Element` 及 `Navigator` 接口的扩展。接下来的每个部分包含了对于各个接口与属性的简单说明。

### PointerEvent 接口

`PointerEvent` 接口扩展了 `MouseEvent` 接口，并含有以下属性（这些属性的可写属性全部为只读 ）。

* `pointerId` (en-US) - 对于某个由指针引起的事件的唯一标识。
* `width` (en-US) - 以 CSS 像素计数的宽度属性，取决于指针的接触面的几何构成。
* `height` (en-US) - 以 CSS 像素计数的高度属性，取决于指针的接触面的几何构成。
* `pressure` (en-US) - 规范化后的指针输入的压力值，取值范围为 0 到 1，0 代表硬件可检测到的压力最小值，1 代表最大值。
* `tangentialPressure` (en-US) The normalized tangential pressure of the pointer input (also known as barrel pressure or cylinder stress) in the range `-1` to `1`, where `0` is the neutral position of the control.
* `tiltX` (en-US) - the plane angle (in degrees, in the range of -90 to 90) between the Y-Z plane and the plane containing both the transducer (e.g. pen stylus) axis and the Y axis.
* `tiltY` (en-US) - the plane angle (in degrees, in the range of -90 to 90) between the X-Z plane and the plane containing both the transducer (e.g. pen stylus) axis and the X axis.
* `twist` (en-US) The clockwise rotation of the pointer (e.g. pen stylus) around its major axis in degrees, with a value in the range `0` to `359`.
* `pointerType` (en-US) - 表明引发该事件的设备类型（鼠标/笔/触摸等）。
* `isPrimary` (en-US) - 表示该指针是否为该类型指针中的首选指针。
### 事件类型与全局事件处理

指针事件有始终不同的事件类型，其中其中在鼠标事件中有相对应的语义话表示 (`down, up, move, over, out, enter, leave`)。以下是每个事件类型及所对应的`Global Event Handler`的基本介绍。

| 事件 | 描述 |
| --- | --- |
| `pointerover` | 当定点设备进入某个元素的命中检测 范围时触发。 |
| `pointerenter` | 当定点设备进入某个元素或其子元素的命中检测范围时，或做为某一类不支悬停（hover）状态的设备所触发的 poinerdown 事件的后续事件时所触发。（详情可见 pointerdown 事件类型）。 |
| `pointerdown` | 当某指针得以激活时触发。 |
| `pointermove` | 当某指针改变其坐标时触发。 |
| `pointerup` | 当某指针不再活跃时触发。 |
| `pointercancel` | 当浏览器认为某指针不会再生成新的后续事件时触发（例如某设备不再活跃） |
| `pointerout` | 可能由若干原因触发该事件，包括：定位设备移出了某命中检测的边界；不支持悬浮状态的设备发生 pointerup 事件（见 pointerup 事件）；作为 pointercancel 事件的后续事件（见 pointercancel 事件）；当数位板检测到数位笔离开了悬浮区域时。 |
| `pointerleave` | 当定点设备移出某元素的命中检测边界时触发。对于笔形设备来说，当数位板检测到笔移出了悬浮范围时触发。 |
| `gotpointercapture` | 当某元素接受到一个指针捕捉时触发。 |
| `lostpointercapture` | 当针对某个指针的指针捕捉得到释放时触发。 |

### Element 接口扩展

对于`Element`接口有以下一些扩展：

* `setPointerCapture()` - 该方法将为进一步的指针事件设置一个特定的目标元素。
* `releasePointerCapture()` (en-US) - 该方法将释放（并停止）之前对于某一特定的指针事件的指针捕捉。
### Navigator 对象扩展

属性 `Navigator.maxTouchPoints` 被设计用来指明在同一时间点所支持的最大的触摸点数量。

例子
--

该部分包含了一些指针事件接口的一些基本使用案例。

### 注册一个事件处理器

该例子为一个特定元素的每一个事件类型注册了相应的处理器。

```html
<html>
  <script>
 function over\_handler(event) {}
 function enter\_handler(event) {}
 function down\_handler(event) {}
 function move\_handler(event) {}
 function up\_handler(event) {}
 function cancel\_handler(event) {}
 function out\_handler(event) {}
 function leave\_handler(event) {}
 function gotcapture\_handler(event) {}
 function lostcapture\_handler(event) {}

 function init() {
 var el = document.getElementById("target");
 // Register pointer event handlers
 el.onpointerover = over\_handler;
 el.onpointerenter = enter\_handler;
 el.onpointerdown = down\_handler;
 el.onpointermove = move\_handler;
 el.onpointerup = up\_handler;
 el.onpointercancel = cancel\_handler;
 el.onpointerout = out\_handler;
 el.onpointerleave = leave\_handler;
 el.gotpointercapture = gotcapture\_handler;
 el.lostpointercapture = lostcapture\_handler;
 }
 </script>
  <body onload="init();">
    <div id="target">Touch me ...</div>
  </body>
</html>
```

### 事件属性

这一例子展示了如何访问一个触摸事件的所有事件属性。

```html
<html>
  <script>
 var id = -1;

 function process\_id(event) {
 // Process this event based on the event's identifier
 }
 function process\_mouse(event) {
 // Process the mouse pointer event
 }
 function process\_pen(event) {
 // Process the pen pointer event
 }
 function process\_touch(event) {
 // Process the touch pointer event
 }
 function process\_tilt(tiltX, tiltY) {
 // Tilt data handler
 }
 function process\_pressure(pressure) {
 // Pressure handler
 }
 function process\_non\_primary(event) {
 // Pressure handler
 }

 function down\_handler(ev) {
 // Calculate the touch point's contact area
 var area = ev.width \* ev.height;

 // Compare cached id with this event's id and process accordingly
 if (id == ev.identifier) process\_id(ev);

 // Call the appropriate pointer type handler
 switch (ev.pointerType) {
 case "mouse":
 process\_mouse(ev);
 break;
 case "pen":
 process\_pen(ev);
 break;
 case "touch":
 process\_touch(ev);
 break;
 default:
 console.log("pointerType " + ev.pointerType + " is Not suported");
 }

 // Call the tilt handler
 if (ev.tiltX != 0 && ev.tiltY != 0) process\_tilt(ev.tiltX, ev.tiltY);

 // Call the pressure handler
 process\_pressure(ev.pressure);

 // If this event is not primary, call the non primary handler
 if (!ev.isPrimary) process\_non\_primary(evt);
 }

 function init() {
 var el = document.getElementById("target");
 // Register pointerdown handler
 el.onpointerdown = down\_handler;
 }
 </script>
  <body onload="init();">
    <div id="target">Touch me ...</div>
  </body>
</html>
```

确定首选指针
------

在很多场景中，可能存在多个指针（比如某设备同时拥有触摸屏和鼠标）或者一个指针设备支持多个接触点（例如支持多点触控的触摸屏）。应用开发时，可以使用`isPrimary` (en-US)属性来识别每类指针的一组指针输入中的主要指针。如果应用仅希望对首选指针提供支持，则可以忽略其他的指针事件。

对于鼠标来说，只有一个指针输入，所以这一输入将一直是首选指针。对于触摸输入来说，当用户在触摸屏幕，且没有其他活跃指针时，会被认做首选指针。对于压感笔输入来说，当用户的笔触开始接触屏幕或平面，且当时没有其他的活跃笔触在接触屏幕时，该输入将被认作首选指针。

确定按钮状态
------

对于某些指针设备来说，比如鼠标或者压感笔，设备上可能有一个或多个按钮可以同时或依次序按动。比如在某个按钮释放后立刻按下其他按钮。为了确定这些按钮的按压状态，指针事件使用`button`与 `buttons`等`MouseEvent`接口中的事件（`PointerEvent`继承于此）表明相应的状态。下表提供了各类设备的按钮状态与 button 和 buttons 属性的属性值对应关系。

| 设备按钮状态 | button | buttons |
| --- | --- | --- |
| 自上次事件后，按键、触摸或笔的接触状态没有改变 | -1 | — |
| 鼠标移动且无按钮被按压 | — | 0 |
| 鼠标左键、触摸接触、压感笔接触（无额外按钮被按压） | 0 | 1 |
| 鼠标中键 | 1 | 4 |
| 鼠标右键、压感笔笔杆按钮被按压 | 2 | 2 |
| 鼠标 X1（前进） | 3 | 8 |
| 鼠标 X2（后退） | 4 | 16 |
| 压感笔橡皮擦按钮被按压 | 5 | 32 |

**备注：** The `button` property indicates a change in the state of the button. However, as in the case of touch, when multiple events occur with one event, all of them have the same value.

指针捕捉
----

指针捕捉允许将某一指针事件，重新指向到一个特定元素，而非经由针对其位置进行命中检测所确定的目标元素。指针捕捉可以用来保证某一元素持续接收到指针事件，即使指针设备的接触点已经离开了元素本身（比如滚动时）。

以下例子展示了向某一元素设置指针捕捉的过程：

```html
<html>
  <script>
 function downHandler(ev) {
 var el = document.getElementById("target");
 //Element 'target' will receive/capture further events
 el.setPointerCapture(ev.pointerId);
 }

 function init() {
 var el = document.getElementById("target");
 el.onpointerdown = downHandler;
 }
 </script>
  <body onload="init();">
    <div id="target">Touch me ...</div>
  </body>
</html>
```

以下例子展示了当 `pointercancel` 事件发生时，一个指针捕捉被释放对的过程。该例子中，浏览器在 `pointerup` 或 `pointercancel` 事件发生时，会自动执行这一释放。

```html
<html>
  <script>
 function downHandler(ev) {
 var el = document.getElementById("target");
 // Element "target" will receive/capture further events
 el.setPointerCapture(ev.pointerId);
 }

 function cancelHandler(ev) {
 var el = document.getElementById("target");
 // Release the pointer capture
 el.releasePointerCapture(ev.pointerId);
 }

 function init() {
 var el = document.getElementById("target");
 // Register pointerdown and pointercancel handlers
 el.onpointerdown = downHandler;
 el.onpointercancel = cancelHandler;
 }
 </script>
  <body onload="init();">
    <div id="target">Touch me ...</div>
  </body>
</html>
```

touch-action CSS 属性
-------------------

CSS 属性`touch-action`被用来指明浏览器是否应当对某一区域的触摸事件应用其默认行为（例如放大或旋转等）。这一属性可以被用在所有元素上，除了：不可替换的行内元素（inline elements）、表格行（table rows）、行组（row groups）、表格列（table columns）、列组（column groups）。

属性值`auto`意味着浏览器可以自由应用其默认的触摸行为（对于特定区域），属性值`none`则会禁止某一区域的浏览器默认触摸行为。属性值`pan-x`和`pan-y`表示由某区域开始的触摸操作仅分别产生水平的或垂直的滚动。属性值`manipulation`表示希望浏览器认为某元素上的触摸行为仅用于滚动或放大。

在下面的示例中，浏览器对于`div`元素的默认触摸响应行为将被禁止。

```html
<html>
  <body>
    <div style="touch-action:none;">Can't touch this ...</div>
  </body>
</html>
```

在下面的示例中，某些`button`元素的默认触摸响应行为将被禁止。

```css
button#tiny {
  touch-action: none;
}
```

在下面的示例中，当`target` 元素被触摸时，仅允许响应其在水平方向上的滚动。

```css
#target {
  touch-action: pan-x;
}
```

与鼠标事件的兼容性
---------

尽管指针事件接口允许应用程序去为各种指针输入设备创建更佳的用户体验，但事实上，目前的大多数 web 内容仍然是仅为支持鼠标输入而设计的。因此，即使一个浏览器支持了指针事件，它也仍然需要在这些仅支持鼠标设置网页在不做任何修改的情况下继续对其提供支持。理想情况下，通用的指针模型将使得应用不再需要专门为鼠标输入设计相应。然而，因为浏览器仍必须处理鼠标事件，所以可能仍留存一些需要加以处理的兼容性问题。这一部分包含了一些对于开发者可能有用的关于鼠标事件和指针事件的异同点。

出于对基于鼠标的内容的兼容性考虑，浏览器会将通用的指针事件映射成相应的鼠标事件。这一事件映射被称作兼容性鼠标事件。开发者可以通过取消 pointerdown 事件相应来阻止某一特定的兼容性鼠标事件的产生，但需要注意以下情况：

* 鼠标事件仅在指针失效（when the pointer is down）的情况下可以被阻止。
* 悬浮的指针（比如没有按键按下时的鼠标指针）的事件不能被阻止。
* 某些鼠标事件，如：mouseover，mouseout，mouseenter，和 mouseleave 等事件，永远不能够被阻止。
最佳实践
----

这里有一些在使用指针事件时候可以参考的最佳实践：

* 尽量减少在事件处理器中要必须完成的工作量。
* 为尽量精确的元素绑定相应的事件响应器（而不是在整个 document 节点或更高层的 dom 元素上）。
* 目标元素（节点）应该有足够的尺寸覆盖最大情况下的接触面（手指触摸的情况尤其典型）。如果目标区域过小，触摸将会引起临近元素的其他意料外的触摸事件。
规范
--

| Specification |
| --- |
| Pointer Events  |

浏览器兼容性
------

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

在 Pointer Events 规范中，`CSS touch-action` 定义了一些新的值，但目前支持这些新值的浏览器实现很有限。

演示和示例
-----

* Touch/pointer tests and demos (by Patrick H. Lauke)
社区资源
----

* Pointer Events Working Group
* Mail list
* W3C #pointerevents IRC channel
相关主题与资源
-------

* Touch Events Standard


ClipboardEvent - Web API 接口参考

ClipboardEvent
==============

**实验性:** **这是一项实验性技术**
在将其用于生产之前，请仔细检查浏览器兼容性表格。

**`ClipboardEvent`** 接口描述了与修改剪切板相关信息的事件，这些事件包括 剪切`cut` , 复制`copy` 和 粘贴`paste` 事件。

构造函数
----

`ClipboardEvent()`

用给定的参数创建了一个 `ClipboardEvent` 事件。

属性
--

*同样是从其父类* *`Event`* *继承的属性。*

`ClipboardEvent.clipboardData` 只读

是一个 `DataTransfer` 对象，它包含了由用户发起的 `cut` 、 `copy` 和 `paste` 操作影响的数据，以及它的 MIME 类型。

方法
--

*没有特定方法；从*其*父类 `Event`* *继承方法。*

规范
--

| Specification |
| --- |
| Clipboard API and events # clipboard-event-interfaces |

浏览器兼容性
------

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

参见
--

* Copy-related events: `copy`, `cut`, `paste`


GPU - Web API 接口参考

GPU
===

**实验性:** **这是一项实验性技术**
在将其用于生产之前，请仔细检查浏览器兼容性表格。

WebGPU API 的 **`GPU`** 接口是使用 WebGPU 的入口点。它用于返回一个 `GPUAdapter`，你可以从中请求设备，获取配置特性以及限制等。

当前上下文的 `GPU` 对象可以通过 `Navigator.gpu` 或 `WorkerNavigator.gpu` 属性访问。

实例属性
----

`requestAdapter()`
实验性

返回 `Promise`，会兑现一个 `GPUAdapter` 对象实例。这时，你可以请求一个 `GPUDevice`，它是使用 WebGPU 功能的主要接口。

`getPreferredCanvasFormat()`
实验性

返回用于当前系统上显示 8 位色深、标准动态范围（SDR）内容的最佳 canvas 纹理格式。

示例
--

### 请求适配器和设备

```js
async function init() {
  if (!navigator.gpu) {
    throw Error("WebGPU not supported.");
  }

  const adapter = await navigator.gpu.requestAdapter();
  if (!adapter) {
    throw Error("Couldn't request WebGPU adapter.");
  }

  const device = await adapter.requestDevice();

  //...
}
```

### 使用最佳纹理格式配置 GPUCanvasContext

```js
const canvas = document.querySelector("#gpuCanvas");
const context = canvas.getContext("webgpu");

context.configure({
  device: device,
  format: navigator.gpu.getPreferredCanvasFormat(),
  alphaMode: "premultiplied",
});
```

规范
--

| Specification |
| --- |
| WebGPU # gpu-interface |

浏览器兼容性
------

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

参见
--

* WebGPU API


Geolocation - Web API 接口参考

Geolocation
===========

**安全上下文:** 此项功能仅在一些支持的浏览器的安全上下文（HTTPS）中可用。

**`Geolocation`** 接口是一个用来获取设备地理位置的可编程的对象，它可以让 Web 内容访问到设备的地理位置，这将允许网站或应用基于用户的地理位置提供定制的信息。

带有此接口的对象可以用由 `Navigator` 实现的属性 `NavigatorGeolocation.geolocation` 来获得。

**备注：** 出于安全考虑，当一个网页尝试获取地理位置信息时，会请求用户批准地理位置访问权限。因为每个浏览器都有各自请求用户批准该权限的策略和方法。

实例属性
----

*`Geolocation` 接口不实现，也不继承任何属性。*

实例方法
----

*`Geolocation` 接口不继承任何方法。*

`Geolocation.getCurrentPosition()`

确定设备的位置并返回一个携带位置信息的 `Position` 对象。

`Geolocation.watchPosition()`

注册一个位置改变监听器，每当设备位置改变时，返回一个 `long` 类型的该监听器的 ID 值。

`Geolocation.clearWatch()`

取消由 `watchPosition()` 注册的位置监听器。

规范
--

| Specification |
| --- |
| Geolocation API # geolocation\_interface |

浏览器兼容性
------

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

参见
--

* 使用地理位置定位


Credential Management API - Web API 接口参考

Credential Management API
=========================

**实验性:** **这是一项实验性技术**
在将其用于生产之前，请仔细检查浏览器兼容性表格。

Credential Management API 允许网站存储和检索用户，联合账户和公钥证书。这些功能允许用户在不输入密码的情况下登录，查看他们曾经登录到一个站点的联合帐户，并且在会话过期且没有显式的登录流程的情况下恢复会话。

Credential management 概念和用法
---------------------------

此 API 允许网站与用户代理的密码系统进行交互，以便网站能够以统一的方式处理站点凭证，而用户代理则可以为他们的凭证管理提供更好的帮助。例如，用户代理在处理联合身份提供程序或使用不仅仅是用户名和密码的深奥登录机制时特别困难。为了解决这些问题，Credential Management API 为网站提供了存储和检索不同类型凭据的方法。这为用户提供了一些功能，比如查看他们曾经登录到某个站点的联合帐户，或者在会话过期且没有显式的登录流程的情况下恢复会话。

**备注：** 此 API 仅限于顶级上下文。在<iframe>元素中调用 get() 和 store() 将无效。

### 子域共享凭据（Subdomain-shared credentials）

规范的更高版本允许从不同的子域检索凭证。例如，存储在 login.example.com 中的密码可用于登录 www.example.com。要利用这一点，必须通过调用`CredentialsContainer.store()` (en-US)显式存储密码。这有时被称为公共后缀列表（PSL）匹配;但是规范仅建议使用 PSL 来确定凭证的有效范围。它 (子域共享凭据) 不需要它。因此浏览器的实现可能会有所不同。

接口
--

`Credential` (en-US)

提供有关实体的信息，作为信任决策的先决条件。

`CredentialsContainer`

公开请求凭据的方法，并在发生令人关注的事件（如成功登录或注销）时通知用户代理。可以从`Navigator.credentials`访问此接口。

`FederatedCredential` (en-US)

提供关于联合身份提供程序的凭据的信息，联合身份提供程序是网站信任的实体，可以正确地对用户进行身份验证，并为此提供 API。 OpenID Connect 就是这种框架的一个例子。

`PasswordCredential` (en-US)

提供有关用户名/密码对的信息。

`PublicKeyCredential` (en-US)

提供使用不可窃取和数据破坏的非对称密钥对 (而不是密码登录) 的凭据。

规范
--

| Specification |
| --- |
| Credential Management Level 1 # the-credential-interface |

浏览器兼容性
------

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


文档对象模型 (DOM) - Web API 接口参考

文档对象模型 (DOM)
============

**文档对象模型 (*DOM)*** 将 web 页面与到脚本或编程语言连接起来。通常是指 JavaScript，但将 HTML、SVG 或 XML 文档建模为对象并不是 JavaScript 语言的一部分。DOM 模型用一个逻辑树来表示一个文档，树的每个分支的终点都是一个节点 (node)，每个节点都包含着对象 (objects)。DOM 的方法 (methods) 让你可以用特定方式操作这个树，用这些方法你可以改变文档的结构、样式或者内容。节点可以关联上事件处理器，一旦某一事件被触发了，那些事件处理器就会被执行。

这里还有一篇关于 DOM 的 介绍 。

DOM 接口
------

* `AbortController`
* `AbortSignal`
* `AbstractRange` (en-US)
* `Attr`
* `CDATASection`
* `CharacterData`
* `Comment`
* `CustomEvent`
* `Document`
* `DocumentFragment`
* `DocumentType`
* `DOMError`
已弃用
* `DOMException`
* `DOMImplementation`
* `DOMParser`
* `DOMPoint`
* `DOMPointReadOnly` (en-US)
* `DOMRect`
* `DOMTokenList`
* `Element`
* `Event`
* `EventTarget`
* `HTMLCollection`
* `MutationObserver`
* `MutationRecord`
* `NamedNodeMap`
* `Node`
* `NodeFilter`
* `NodeIterator`
* `NodeList`
* `ProcessingInstruction` (en-US)
* `Range`
* `StaticRange` (en-US)
* `Text` (en-US)
* `TextDecoder`
* `TextEncoder`
* `TimeRanges`
* `TreeWalker`
* `XMLDocument`
### 过时的 DOM 接口

DOM 模型已经被高度简化了。为此，以下出现在 DOM level 3 或更早的规范里的接口已经被移除了。现在不是非常确定是否有一些会被重新引进，但是当前应该把它们看作废弃的，应当避免使用：

* `DOMConfiguration`
* `DOMErrorHandler`
* `DOMImplementationList`
* `DOMImplementationRegistry`
* `DOMImplementationSource`
* `DOMLocator`
* `DOMObject`
* `DOMSettableTokenList`
* `DOMUserData`
* `ElementTraversal`
* `Entity`
* `EntityReference`
* `NameList`
* `Notation`
* `TypeInfo`
* `UserDataHandler`
HTML DOM
--------

包含 HTML 的文档使用 `Document` 接口进行描述，该接口由 HTML 规范扩展，包含了各种特定于 HTML 的功能。特别是，`Element` 接口得到了增强，成为 `HTMLElement` 和各种子类，每个子类代表一个（或一系列密切相关的）元素。

HTML DOM API 提供对各种浏览器功能的访问，例如选项卡和窗口、CSS 样式和样式表、浏览器历史记录等。这些接口将在 HTML DOM API 中进一步讨论。

SVG 接口
------

### SVG 元素接口

* `SVGAElement`
* `SVGAltGlyphElement`
已弃用
* `SVGAltGlyphDefElement`
已弃用
* `SVGAltGlyphItemElement`
已弃用
* `SVGAnimationElement` (en-US)
* `SVGAnimateElement`
* `SVGAnimateColorElement` (en-US)
已弃用
* `SVGAnimateMotionElement` (en-US)
* `SVGAnimateTransformElement` (en-US)
* `SVGCircleElement`
* `SVGClipPathElement` (en-US)
* `SVGComponentTransferFunctionElement` (en-US)
* `SVGCursorElement` (en-US)
* `SVGDefsElement` (en-US)
* `SVGDescElement` (en-US)
* `SVGElement`
* `SVGEllipseElement` (en-US)
* `SVGFEBlendElement` (en-US)
* `SVGFEColorMatrixElement` (en-US)
* `SVGFEComponentTransferElement` (en-US)
* `SVGFECompositeElement` (en-US)
* `SVGFEConvolveMatrixElement` (en-US)
* `SVGFEDiffuseLightingElement` (en-US)
* `SVGFEDisplacementMapElement` (en-US)
* `SVGFEDistantLightElement` (en-US)
* `SVGFEDropShadowElement` (en-US)
* `SVGFEFloodElement` (en-US)
* `SVGFEFuncAElement` (en-US)
* `SVGFEFuncBElement` (en-US)
* `SVGFEFuncGElement` (en-US)
* `SVGFEFuncRElement` (en-US)
* `SVGFEGaussianBlurElement` (en-US)
* `SVGFEImageElement` (en-US)
* `SVGFEMergeElement` (en-US)
* `SVGFEMergeNodeElement` (en-US)
* `SVGFEMorphologyElement` (en-US)
* `SVGFEOffsetElement` (en-US)
* `SVGFEPointLightElement` (en-US)
* `SVGFESpecularLightingElement` (en-US)
* `SVGFESpotLightElement` (en-US)
* `SVGFETileElement` (en-US)
* `SVGFETurbulenceElement` (en-US)
* `SVGFilterElement` (en-US)
* `SVGFilterPrimitiveStandardAttributes`
* `SVGFontElement` (en-US)
已弃用
* `SVGFontFaceElement` (en-US)
已弃用
* `SVGFontFaceFormatElement` (en-US)
已弃用
* `SVGFontFaceNameElement` (en-US)
已弃用
* `SVGFontFaceSrcElement` (en-US)
已弃用
* `SVGFontFaceUriElement` (en-US)
已弃用
* `SVGForeignObjectElement` (en-US)
* `SVGGElement` (en-US)
* `SVGGeometryElement` (en-US)
* `SVGGlyphElement` (en-US)
已弃用
* `SVGGlyphRefElement` (en-US)
已弃用
* `SVGGradientElement` (en-US)
* `SVGGraphicsElement`
* `SVGHatchElement`
实验性
* `SVGHatchpathElement`
实验性
* `SVGHKernElement` (en-US)
已弃用
* `SVGImageElement` (en-US)
* `SVGLinearGradientElement` (en-US)
* `SVGLineElement` (en-US)
* `SVGMarkerElement` (en-US)
实验性
* `SVGMaskElement` (en-US)
* `SVGMetadataElement` (en-US)
* `SVGMissingGlyphElement` (en-US)
已弃用
* `SVGMPathElement` (en-US)
* `SVGPathElement` (en-US)
* `SVGPatternElement` (en-US)
* `SVGPolylineElement` (en-US)
* `SVGPolygonElement` (en-US)
* `SVGRadialGradientElement` (en-US)
* `SVGRectElement` (en-US)
* `SVGScriptElement` (en-US)
* `SVGSetElement` (en-US)
* `SVGStopElement` (en-US)
* `SVGStyleElement` (en-US)
* `SVGSVGElement`
* `SVGSwitchElement` (en-US)
* `SVGSymbolElement` (en-US)
* `SVGTextContentElement` (en-US)
* `SVGTextElement` (en-US)
* `SVGTextPathElement` (en-US)
* `SVGTextPositioningElement` (en-US)
* `SVGTitleElement` (en-US)
* `SVGTRefElement` (en-US)
已弃用
* `SVGTSpanElement` (en-US)
* `SVGUseElement` (en-US)
* `SVGViewElement` (en-US)
* `SVGVKernElement` (en-US)
已弃用
### SVG 数据类型接口

以下是 SVG 属性和属性定义中使用的数据类型的 DOM API。

#### 静态类型

* `SVGAngle` (en-US)
* `SVGColor`
已弃用
* `SVGICCColor`
已弃用
* `SVGElementInstance`
* `SVGElementInstanceList`
* `SVGLength` (en-US)
* `SVGLengthList` (en-US)
* `SVGNameList`
* `SVGNumber` (en-US)
* `SVGNumberList` (en-US)
* `SVGPaint`
* `SVGPathSeg`
已弃用
* `SVGPathSegClosePath`
已弃用
* `SVGPathSegMovetoAbs`
已弃用
* `SVGPathSegMovetoRel`
已弃用
* `SVGPathSegLinetoAbs`
已弃用
* `SVGPathSegLinetoRel`
已弃用
* `SVGPathSegCurvetoCubicAbs`
已弃用
* `SVGPathSegCurvetoCubicRel`
已弃用
* `SVGPathSegCurvetoQuadraticAbs`
已弃用
* `SVGPathSegCurvetoQuadraticRel`
已弃用
* `SVGPathSegArcAbs`
已弃用
* `SVGPathSegArcRel`
已弃用
* `SVGPathSegLinetoHorizontalAbs`
已弃用
* `SVGPathSegLinetoHorizontalRel`
已弃用
* `SVGPathSegLinetoVerticalAbs`
已弃用
* `SVGPathSegLinetoVerticalRel`
已弃用
* `SVGPathSegCurvetoCubicSmoothAbs`
已弃用
* `SVGPathSegCurvetoCubicSmoothRel`
已弃用
* `SVGPathSegCurvetoQuadraticSmoothAbs`
已弃用
* `SVGPathSegCurvetoQuadraticSmoothRel`
已弃用
* `SVGPathSegList`
已弃用
* `SVGPoint` (en-US)
已弃用
* `SVGPointList` (en-US)
已弃用
* `SVGPreserveAspectRatio` (en-US)
* `SVGRect` (en-US)
已弃用
* `SVGStringList` (en-US)
* `SVGTransform` (en-US)
* `SVGTransformList` (en-US)

#### 动画类型

* `SVGAnimatedAngle` (en-US)
* `SVGAnimatedBoolean` (en-US)
* `SVGAnimatedEnumeration` (en-US)
* `SVGAnimatedInteger` (en-US)
* `SVGAnimatedLength` (en-US)
* `SVGAnimatedLengthList` (en-US)
* `SVGAnimatedNumber` (en-US)
* `SVGAnimatedNumberList` (en-US)
* `SVGAnimatedPathData`
已弃用
* `SVGAnimatedPoints` (en-US)
* `SVGAnimatedPreserveAspectRatio` (en-US)
* `SVGAnimatedRect` (en-US)
* `SVGAnimatedString` (en-US)
* `SVGAnimatedTransformList` (en-US)
### SMIL 相关接口

* `ElementTimeControl`
* `TimeEvent` (en-US)
### 其他的 SVG 接口

* `GetSVGDocument`
* `ShadowAnimation`
* `SVGColorProfileRule`
已弃用
* `SVGCSSRule`
已弃用
* `SVGDocument`
* `SVGException`
已弃用
* `SVGFitToViewBox`
* `SVGLocatable`
已弃用
* `SVGRenderingIntent` (en-US)
已弃用
* `SVGUnitTypes` (en-US)
* `SVGUseElementShadowRoot`
* `SVGViewSpec`
已弃用
* `SVGZoomEvent`
已弃用
规范
--

| Specification |
| --- |
| DOM Standard  |

参见
--

* DOM 示例 (en-US)
* CSS 对象模型 (CSSOM)


AudioTrack - Web API 接口参考

AudioTrack
==========

**`AudioTrack`** 接口表示从 HTML 介质元件中的一个单一的音轨， `<audio>` 或 `<video>`. 访问`AudioTrack` 对象的最常见用途是切换其`enabled` (en-US) 属性，以使轨道静音和取消静音。

属性
--

`enabled` (en-US)

一个布尔值，用于控制是否启用音轨的声音。设置此值`false`可使音轨的音频静音。

`id` (en-US) 只读

一个`DOMString`唯一标识媒体中的曲目。此 ID 可用于通过调用`AudioTrackList.getTrackById()` (en-US)来定位音轨列表中的特定轨道。如果媒体支持按媒体片段URI 规范按媒体片段搜索，则 ID 也可以用作 URL 的片段部分。

`kind` (en-US) 只读

一个`DOMString`指定轨道所属的类别。例如，主音频轨道将有一个`kind`的`"main"`。

`label` (en-US) 只读

A `DOMString`为轨道提供人类可读的标签。例如，一个音频评论轨道的电影可以有一个`label`的`"Commentary with director John Q. Public and actors John Doe and Jane Eod."`，如果没有提供标签此字符串是空的。

`language` (en-US) 只读

一个`DOMString`指定音轨的主要语言，如果未知，则为空字符串。该语言被指定为 BCP 47(RFC 5646) 语言代码，例如`"en-US"`或`"pt-BR"`。

`sourceBuffer` (en-US) 只读

创建轨道的`SourceBuffer`。如果轨道不是由`SourceBuffer`创建的，或者`SourceBuffer`已从`MediaSource.sourceBuffers`属性中删除，则返回 null 其母媒体来源。

使用说明
----

要获取`AudioTrack`给定媒体元素，请使用元素的`audioTracks`属性，该属性返回`AudioTrackList` (en-US)对象，你可以从中获取媒体中包含的各个曲目：

```js
var el = document.querySelector("video");
var tracks = el.audioTracks;
```

然后，你可以使用数组语法或`forEach()`等函数访问媒体的各个轨道。

第一个示例获取媒体上的第一个音轨：

```js
var firstTrack = tracks[0];
```

下一个示例扫描所有媒体的音轨，启用用户首选语言中的任何一种 (取自变量`userLanguage`) 并禁用任何其他语音。

```js
tracks.forEach(function (track) {
  if (track.language === userLanguage) {
    track.enabled = true;
  } else {
    track.enabled = false;
  }
});
```

`language` (en-US)采用标准 (RFC 5646) 格式。例如，对于美国英语，这将是`"en-US"`。

示例
--

参见 `AudioTrack.label` (en-US) 以获取简单示例，其中展示了如何获取指定媒体元素按轨道类别筛选后的包含轨道类别与标签的数组。

规范
--

| Specification |
| --- |
| HTML Standard # audiotrack |

浏览器兼容性
------

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


Comment - Web API 接口参考

Comment
=======

**`Comment`** 接口代表标签（markup）之间的文本符号（textual notations）。尽管它通常不会显示出来，但是在查看源码时可以看到它们。在 HTML 和 XML 里，注释（Comments）为 '`<!--`' 和 '`-->`' 之间的内容。在 XML 里，注释中不能出现字符序列 '`--`'。

属性
--

*该接口没有特定的属性，但是从其父类 `CharacterData` 继承属性，以及间接从 `Node` 继承部分属性。*

构造函数
----

`Comment()`
实验性

使用文本内容作为参数，返回一个 `Comment` 对象。

方法
--

该接口没有特定的方法，但从其父类 `CharacterData` 继承方法，以及间接从 `Node` 继承部分方法。

规范
--

| Specification |
| --- |
| DOM Standard # interface-comment |

浏览器兼容性
------

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

参见
--

* DOM 接口索引


Canvas - Web API 接口参考

Canvas
======

**Canvas API** 提供了一个通过JavaScript 和 HTML的`<canvas>`元素来绘制图形的方式。它可以用于动画、游戏画面、数据可视化、图片编辑以及实时视频处理等方面。

Canvas API 主要聚焦于 2D 图形。而同样使用`<canvas>`元素的 WebGL API 则用于绘制硬件加速的 2D 和 3D 图形。

基础示例
----

这个简单的例子在画布绘制一个绿色的长方形。

### HTML

```html
<canvas id="canvas"></canvas>
```

### JavaScript

`Document.getElementById()` 方法获取 HTML `<canvas>` 元素的引用。接着，`HTMLCanvasElement.getContext()` 方法获取这个元素的 context——图像稍后将在此被渲染。

由 `CanvasRenderingContext2D` 接口完成实际的绘制。`fillStyle` 属性让长方形变成绿色。`fillRect()` 方法将它的左上角放在 (10, 10)，把它的大小设置成宽 150 高 100。

```js
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");

ctx.fillStyle = "green";
ctx.fillRect(10, 10, 150, 100);
```

### 结果

参考
--

* `HTMLCanvasElement`
* `CanvasRenderingContext2D`
* `CanvasGradient`
* `CanvasImageSource`
* `CanvasPattern`
* `ImageBitmap`
* `ImageData`
* `RenderingContext`
* `TextMetrics`
* `OffscreenCanvas`
实验性
* `Path2D`
实验性
* `ImageBitmapRenderingContext`
实验性

**备注：** 与 `WebGLRenderingContext` 有关的接口请参考 WebGL。

`CanvasCaptureMediaStream` 也与之相关。

教程与指导
-----

Canvas 教程

一个综合性教程，包括了<canvas>的基本用法与高级功能。

代码片段：Canvas

一些面向开发者的 <canvas> 代码片段。

深入 HTML5 Canvas

一个手把手的、长度与书本相若的 Canvas API 和 WebGL 介绍。

使用 canvas 绘制视频

结合`<video>`和 `<canvas>`来实现实时操作视频数据。

库
-

Canvas API 是非常强大的，但不总是很容易使用。以下列出的库能够使创建基于 canvas 的项目更快和更简单。

* EaselJS 使制作游戏、创作类艺术和其他侧重图形项目更容易的开源 canvas 库
* Fabric.js 具有 SVG 解析功能的开源 canvas 库
* heatmap.js 基于 canvas 的热点图的开源库
* JavaScript InfoVis Toolkit 创建交互式的 2D Canvas 数据可视化
* Konva.js 用于桌面端和移动端应用的 2D canvas 库
* p5.js 包含给艺术家、设计师、教育者、初学者使用的完整的 canvas 绘制功能
* Paper.js 运行于 HTML5 Canvas 上的开源矢量图形脚本框架
* Phaser 用于基于 Canvas 和 WebGL 的浏览器尤其的快速、自由、有趣的开源框架
* Processing.js 用于处理可视化语言
* Pts.js 在 canvas 和 SVG 中进行创意性代码写作和可视化的库
* Rekapi 关键帧动画库
* Scrawl-canvas 用来创建和编辑 2D 图形的开源库
* ZIM 框架为 canvas 上的代码创意性提供方便性、组件和可控性，包括可用性和数百个色彩缤纷的教程

**备注：** 与 WebGL 有关的 2D 和 3D 的库请参考 WebGL。

标准
--

| Specification |
| --- |
| HTML Standard # the-canvas-element |

浏览器兼容性
------

Mozilla 程序从 Gecko 1.8 (Firefox 1.5 (en-US)) 开始支持 `<canvas>`。它首先是由 Apple 引入的，用于 OS X Dashboard 和 Safari。Internet Explorer 从 IE9 开始支持`<canvas>` ，更旧版本的 IE 中，页面可以通过引入 Google 的 Explorer Canvas 项目中的脚本来获得`<canvas>`支持。Google Chrome 和 Opera 9+ 也支持 `<canvas>`。

其他相关
----

* WebGL


Broadcast Channel API - Web API 接口参考

Broadcast Channel API
=====================

Baseline 2022
-------------

Newly availableSince March 2022, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

* Learn more
* See full compatibility
* Report feedback
**Broadcast Channel API** 可以实现同 源 下浏览器不同窗口，Tab 页，frame 或者 iframe 下的 浏览器上下文 (通常是同一个网站下不同的页面) 之间的简单通讯。

**备注：** 此特性在 Web Worker 中可用

广播频道会被命名和绑定到指定的源。

通过创建一个监听某个频道下的 `BroadcastChannel` 对象，你可以接收发送给该频道的所有消息。一个有意思的点是，你不需要再维护需要通信的 iframe 或 worker 的索引。它们可以通过构造 `BroadcastChannel` 来简单地“订阅”特定频道，并在它们之间进行全双工（双向）通信。

![The principle of the Broadcast Channel API](/zh-CN/docs/Web/API/Broadcast_Channel_API/broadcastchannel.png)

Broadcast Channel 接口
--------------------

### 创建或加入某个频道

`BroadcastChannel` 接口非常简单。通过创建一个 `BroadcastChannel` 对象，一个客户端就加入了某个指定的频道。只需要向 构造函数 传入一个参数：频道名称。如果这是首次连接到该广播频道，相应资源会自动被创建。

```js
// 连接到广播频道
var bc = new BroadcastChannel("test\_channel");
```

### 发送消息

现在发送消息就很简单了，只需要调用 BroadcastChannel 对象上的`postMessage()` 方法即可。该方法的参数可以是任意对象。最简单的例子就是发送 `DOMString` 文本消息：

```js
// 发送简单消息的示例
bc.postMessage("This is a test message.");
```

不只是 `DOMString`，任意类型的对象都可以被发送。此 API 不会将消息与任何的语义相关联，因此通道的参与者有必要知道预期的消息类型和消息的消费方式。

### 接收消息

当消息被发送之后，所有连接到该频道的 `BroadcastChannel` 对象上都会触发 `message` 事件。该事件没有默认的行为，但是可以使用 `onmessage` 事件处理程序来定义一个函数来处理消息。

```js
// 简单示例，用于将事件打印到控制台
bc.onmessage = function (ev) {
  console.log(ev);
};
```

### 与频道断开连接

通过调用 BroadcastChannel 对象的 `close()` 方法，可以离开频道。这将断开该对象和其关联的频道之间的联系，并允许它被垃圾回收。

```js
// 断开频道连接
bc.close();
```

总结
--

Broadcast Channel API 是一个非常简单的 API，内部包含了跨上下文通讯的接口。它可用于检测同源网站环境中其他浏览器选项卡下的用户操作，例如当用户登录到帐户时。没有定义消息传输协议，故不同上下文中的不同文档需要自己实现它：规范没有对此提出协议或要求。

规范
--

| Specification |
| --- |
| HTML Standard # broadcasting-to-other-browsing-contexts |

浏览器兼容性
------

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

另见
--

* 接口实现：`BroadcastChannel`。


WaveShaperNode - Web API 接口参考

WaveShaperNode
==============

**`WaveShaperNode`** 接口表示一个非线性的畸变器。是一个使用曲线来将一个波形畸变应用到一个声音信号中的`AudioNode`。除了明显的失真效果之外，它通常用来给信号添加一个暖调的感觉。

一个`WaveShaperNode` 总是有一个确切的输入和输出。

|  |  |
| --- | --- |
| 输入数目 | `1` |
| 输出数目 | `1` |
| 信道计数模式 | `"max"` |
| 信道计数 | `2` （不在缺省的计数模式中使用） |
| 信道解释 | `"speakers"` |

构造器
---

`WaveShaperNode()`

创建一个新的`WaveShaperNode` 对象的实例。

属性
--

*包含了继承自父类 `AudioNode`的属性。*

`WaveShaperNode.curve`

是一个`Float32Array` (en-US)描述要应用的失真数值的数组。

`WaveShaperNode.oversample`

是一个描述是否必须使用过采样的枚举值。过采样是一个用来在将失真效果应用到音频信号之前创建更多采样（上采样）的技术。

方法
--

*没有特有的方法；从父类 `AudioNode` 继承了方法*。

示例
--

参见 `BaseAudioContext.createWaveShaper()` 以获取示例代码。

规范
--

| Specification |
| --- |
| Web Audio API # WaveShaperNode |

浏览器兼容性
------

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

参见
--

* 使用 Web Audio API (en-US)


StyleSheetList - Web API 接口参考

StyleSheetList
==============

StyleSheetLists 接口表示一个 StyleSheet 的列表。

这是一个像数组一样的对象，但是不能使用数组方法进行遍历。但是它可以通过 for 循环遍历其下标，或者把它转换成数组。

范例
--

### 使用 for 循环获取文档 styleSheet 对象
```

for (var i=0; i < document.styleSheets.length; i++){
  var styleSheet = document.styleSheets[i];
}
```

### 使用 Array 方法获取文档的所有 CSS 规则
```

var allCSS =
    [].slice.call(document.styleSheets)
        .reduce(function (prev, styleSheet) {
            if (styleSheet.cssRules) {
                return prev +
                    [].slice.call(styleSheet.cssRules)
                        .reduce(function (prev, cssRule) {
                            return prev + cssRule.cssText;
                        }, '');
            } else {
                return prev;
            }
        }, '');
```


CSS Font Loading API - Web API 接口参考

CSS Font Loading API
====================

CSS 字体加载 API 为你提供了动态加载字体资源的事件和接口。

**备注：** 此特性在 Web Worker 中可用。（你可通过 `self.fonts` 访问 `FontFaceSet`）。

概念和用法
-----

在 CSS 中你可以使用 `@font-face` 规则下载字体，并使用 `font-family` 属性将字体应用于元素。但是，下载字体流程由客户端控制，大多数客户端仅会在首次需要该字体时才获取、加载该字体，这可能会导致明显的延迟。

CSS 字体加载 API 提供了控制和跟踪字体加载过程的能力，并允许你将其添加到 Document 或 Worker 的字体集中。将字体添加到 Document 或 Worker 的字体集中会让客户端在需要时自动获取、加载字体。字体可以在其被加入字体集之前或之后被加载，但是你*必须*先将字体添加到字体集，再将其用于绘图。

你可以通过为 `FontFace` 对象指定字体文件或 URL 字体源及其他属性来定义字体，其使用方式与 CSS `@font-face` 规则大致相同。`FontFace` 对象可以通过 `Document.fonts` 或 `WorkerGlobalScope.fonts` (en-US) 被添加到 `Document` 或 `Web Worker` 的 `FontFaceSet` 中。你可以使用 `FontFace` 或 `FontFaceSet` 对象下载字体，并监听加载完成事件。 `FontFaceSet` 还可用于确定加载页面所需的所有字体以及文档布局何时完成。

`FontFace.status` (en-US) 属性标识了字体加载状态：`unloaded`、`loading`、`loaded` 或 `failed`。此状态最初为 `unloaded`，下载文件或处理字体数据时为 `loading`，如果字体定义无效或无法加载字体数据则设置为 `failed`，成功获取（如果需要）并加载字体数据后，状态设置为 `loaded`。

### 定义字体

你可以使用 `FontFace` 构造函数 (en-US)创建字体，该函数有 3 个参数：字体家族、字体源和可选的描述符。这些参数与 `@font-face` 的参数一致。

其中，字体源可以是字体文件的 `ArrayBuffer`，也可以是 URL 指向的字体文件。请注意，URL 字体源需要使用 `url()` 函数包裹 URL。

```js
const font = new FontFace("myfont", "url(myfont.woff)", {
  style: "italic",
  weight: "400",
  stretch: "condensed",
});
```

**备注：** 与 `@font-face` 一样，一些描述符表示期望的字体属性并用于字体匹配，而其他描述符为设置、定义生成的字体的属性。例如，将 `style` 设置为“斜体”表示文件包含斜体字体，将由开发者指定一个符合此条件的文件。

对于*二进制*字体，如果字体定义有效并且成功加载会把 `FontFace.status` (en-US) 设置为 `loaded`，否则会设置为 `failed`。对于 URL 字体，字体有效，且未被加载时 `FontFace.status` 会被设置为 `unloaded`，若字体无效则设置为 `failed`。

### 向 Document 或 Worker 添加字体

你可以将字体添加到 Document 或 Worker 的 `FontFaceSet` 中，以允许客户端在需要时自动加载字体。你*只能*使用添加到 `FontFaceSet` 中的字体来渲染文本。

下面的代码显示如何添加字体到文档中。

```js
// 定义字体
const font = new FontFace("myfont", "url(myfont.woff)", {
  style: "italic",
  weight: "400",
  stretch: "condensed",
});

// 把字体添加到 document.fonts（FontFaceSet）中
document.fonts.add(font);
```

### 加载字体

你可以通过调用 `FontFace.load()` (en-US) 加载字体，或者通过调用 `FontFaceSet.load()` (en-US) 加载已添加到 `FontFaceSet` 中的字体。注意，尝试加载已加载的字体不会生效。

以下代码演示如何定义字体并将其添加到 document 的字体中，然后加载字体。

```js
// 定义字体
const font = new FontFace("myfont", "url(myfont.woff)");

// 把字体添加到 document.font（FontFaceSet）中
document.fonts.add(font);

// 加载字体
font.load();

// 等待到所有的字体都加载完毕
document.fonts.ready.then(() => {
  // 使用该字体渲染文字（如：在 canvas 中绘制）
});
```

注意，`font.load()` 返回一个 `Promise`，你可以通过调用 `.then()` 来处理字体加载的回调函数。在一些情况下，使用 `document.fonts.ready` (en-US) 会更好，因为它会在文档布局完成且所有的字体都加载完成时触发。

接口
--

`FontFace`

表示单个可用的字体。

`FontFaceSet`

字体 API 的一个接口，支持检测它们（字体文件）的下载状态。

`FontFaceSetLoadEvent` (en-US)

`FontFaceSet` 加载时触发的事件。

示例
--

### 简单字体加载

这是一个非常简单的示例，展示了从 Google Fonts 加载字体，并使用该字体在画布上绘制文本。并且该示例还会在字体创建和加载后，在文本框中打印字体状态的日志。

#### HTML

此代码定义用于绘制的画布和用于打印字体状态日志的文本区域。

```html
<canvas id="js-canvas"></canvas>
<textarea id="log" rows="3" cols="100"></textarea>
```

#### JavaScript

首先，我们获取打印字体状态日志的文本框，以及用于使用字体绘制文本的画布。

```js
const log = document.getElementById("log");

const canvas = document.getElementById("js-canvas");
canvas.width = 650;
canvas.height = 75;
```

接下来，我们定义一个 URL 源为 Google Fonts 的 `FontFace`，并将其添加到 `document.fonts`。此时我们打印字体状态（为 `unloaded`）的日志。

```js
const bitterFontFace = new FontFace(
  "FontFamily Bitter",
  "url(https://fonts.gstatic.com/s/bitter/v7/HEpP8tJXlWaYHimsnXgfCOvvDin1pK8aKteLpeZ5c0A.woff2)",
);
document.fonts.add(bitterFontFace);
log.textContent += `Bitter font: ${bitterFontFace.status}\n`; // > Bitter font: unloaded
```

然后我们调用 `FontFace.load()` (en-US) 方法来加载字体，并等待返回的 `Promise` (en-US) 对象。当 `Promise` 兑现时，我们打印字体状态（为 `loaded`）的日志，并使用已加载的字体在 canvas 中绘制文本。

```js
bitterFontFace.load().then(
  () => {
    log.textContent += `Bitter font: ${bitterFontFace.status}\n`; // > Bitter font: loaded

    const ctx = canvas.getContext("2d");
    ctx.font = '36px "FontFamily Bitter"';
    ctx.fillText("Bitter font loaded", 20, 50);
  },
  (err) => {
    console.error(err);
  },
);
```

注意，我们可以等待 `FontFace.loaded` (en-US) 返回的 `Promise` 对象，也可以等待 `FontFaceSet.ready` (en-US) 返回的 `Promise` 对象。

#### 结果

结果如下所示。它会使用下载了的字体在 `Canvas` 上绘制字体的名字，并显示字体加载状态的日志。

### 使用事件加载字体

此示例与上一个示例类似，不同之处在于它使用 `FontFaceSet.load()` (en-US) 加载字体（而不是使用 `font.load()`）。它还展示了如何监听字体完成加载事件。

#### HTML

```html
<canvas id="js-canvas"></canvas>
<textarea id="log" rows="25" cols="100"></textarea>
```

#### JavaScript

下面的代码定义了用于绘制文本的 canvas 上下文和字体，并将其添加到 document 字体集中。

```js
const log = document.getElementById("log");

const canvas = document.getElementById("js-canvas");
canvas.width = 650;
canvas.height = 75;
const ctx = canvas.getContext("2d");

const oxygenFontFace = new FontFace(
  "FontFamily Oxygen",
  "url(https://fonts.gstatic.com/s/oxygen/v5/qBSyz106i5ud7wkBU-FrPevvDin1pK8aKteLpeZ5c0A.woff2)",
);
document.fonts.add(oxygenFontFace);
log.textContent += `Oxygen status: ${oxygenFontFace.status}\n`;
```

接下来，我们在字体集上使用 `load()` 来加载指定的字体。该方法返回一个 `Promise`。如果 promise 兑现，我们将使用该字体绘制文本。如果被拒绝，则会记录错误。

```js
document.fonts.load("36px FontFamily Oxygen").then(
  (fonts) => {
    log.textContent += `Bitter font: ${fonts}\n`; // > Oxygen font: loaded
    log.textContent += `Bitter font: ${oxygenFontFace.status}\n`; // > Oxygen font: loaded
    ctx.font = '36px "FontFamily Oxygen"';
    ctx.fillText("Oxygen font loaded", 20, 50);
  },
  (err) => {
    console.error(err);
  },
);
```

除了可以等待 promise，我们也可以使用事件来跟踪字体加载过程。下面的代码监听 `loading` 和 `loadingerror` 事件，并记录每种事件下的字体数量。在 `loadingdone` 事件的回调函数中，我们还遍历字体并记录字体家族的名称。

```js
document.fonts.addEventListener("loading", (event) => {
  log.textContent += `loading\_event: ${event.fontfaces.length}\n`;
});
document.fonts.addEventListener("loadingerror", (event) => {
  log.textContent += `loadingerror\_event: ${event.fontfaces.length}\n`;
});
document.fonts.addEventListener("loadingdone", (event) => {
  log.textContent += `loadingdone\_event: ${event.fontfaces.length}\n`;
  event.fontfaces.forEach((value) => {
    log.textContent += ` fontface: ${value.family}\n`;
  });
});
```

最后一段代码演示了如何使用 `FontFaceSet.ready` (en-US) 返回的 promise 监听字体加载的完成。与其他机制不同，当文档中定义的所有字体都已下载且布局已完成时，promise 才会兑现。

当 promise 兑现时，我们遍历 document 字体集中的值。

```js
document.fonts.ready.then(function () {
  log.textContent += `\nFontFaces in document: ${document.fonts.size}.\n`;

  for (const fontFace of document.fonts.values()) {
    log.textContent += "FontFace:\n";
    for (const property in fontFace) {
      log.textContent += ` ${property}: ${fontFace[property]}\n`;
    }
  }
});
```

#### 结果

下面的页面显示了用“Oxygen”字体绘制的文本。还显示了事件的日志以及 `document.fonts.ready` 返回的 promise 兑现时的输出。

规范
--

| Specification |
| --- |
| CSS Font Loading Module Level 3 # fontface-interface |

浏览器兼容性
------

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


USB - Web API 接口参考

USB
===

Limited availability
--------------------

This feature is not Baseline because it does not work in some of the most widely-used browsers.

* Learn more
* See full compatibility
* Report feedback
**实验性:** **这是一项实验性技术**
在将其用于生产之前，请仔细检查浏览器兼容性表格。

WebUSB API (en-US) 接口提供了从网页查找和连接 USB 设备的属性和方法

属性
--

None.

### Event handlers

`USB.onconnect` (en-US)

每当连接到先前配对的设备时，调用此事件处理器。

`USB.ondisconnect` (en-US)

每当配对设备断开连接时，调用此事件处理器。

方法
--

`USB.getDevices()` (en-US)

Returns a `Promise` that resolves with an array of `USBDevice` (en-US) objects for paired attached devices.

`USB.requestDevice()` (en-US)

Returns a `Promise` that resolves with an instance of `USBDevice` (en-US) if the specified device is found. Calling this function triggers the user agent's pairing flow.

规范
--

| Specification |
| --- |
| WebUSB API # usb |

Browser compatibility
---------------------

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


FileSystemFileHandle - Web API 接口参考

FileSystemFileHandle
====================

**安全上下文:** 此项功能仅在一些支持的浏览器的安全上下文（HTTPS）中可用。

File System API 的 **`FileSystemFileHandle`** 接口表示一个指向文件系统条目的句柄。可通过 `window.showOpenFilePicker()` 方法来访问此接口。

注意，读写操作所依赖的文件访问权限在刷新或关闭页面并且页面所属的源没有其他标签页保持打开的情况下不会继续保有。`FileSystemHandle` 接口的 `queryPermission` 方法可用于在访问文件前验证权限状态。

FileSystemHandle

FileSystemFileHandle实例属性
----

*从父类 `FileSystemHandle` 继承属性。*

实例方法
----

*从父类 `FileSystemHandle` 继承方法。*

`getFile()`

返回一个 `Promise` 对象，可兑现一个 `File` 对象，该对象表示句柄所代表的的条目在磁盘上的状态。

`createSyncAccessHandle()`

返回一个 `Promise` 对象，可兑现一个 `FileSystemSyncAccessHandle` 对象，该对象可用于同步读写文件。此方法的同步特性带来了性能优势，但是只能在专用的 Web Worker 中使用。

`createWritable()`

返回一个 `Promise` 对象，可兑现一个新建的 `FileSystemWritableFileStream` 对象，可用于写入文件。

示例
--

### 读取文件

下面的异步函数用于显示一个文件选择器，一旦有文件被选择，便可以使用 `getFile()` 方法获取其内容。

```js
async function getTheFile() {
  const pickerOpts = {
    types: [
      {
        description: "Images",
        accept: {
          "image/\*": [".png", ".gif", ".jpeg", ".jpg"],
        },
      },
    ],
    excludeAcceptAllOption: true,
    multiple: false,
  };

  // 打开文件选择器
  const [fileHandle] = await window.showOpenFilePicker(pickerOpts);
  // 获取文件内容
  const fileData = await fileHandle.getFile();
  return fileData;
}
```

### 写入文件

以下异步函数用于将给定内容写入文件句柄，从而写入磁盘。

```js
async function writeFile(fileHandle, contents) {
  // 创建一个 FileSystemWritableFileStream 用来写入。
  const writable = await fileHandle.createWritable();

  // 将文件内容写入到流中。
  await writable.write(contents);

  // 关闭文件并将内容写入磁盘。
  await writable.close();
}
```

### 同步读写文件

以下异步事件处理函数处于 Web Worker 上下文，从主线程接收消息。

* 创建一个异步文件访问句柄。
* 获取文件大小并创建一个 `ArrayBuffer` 来容纳它。
* 将文件内容读取到缓冲区中。
* 将消息编码，并将其写入到文件末尾。
* 将更改持久化至磁盘并关闭访问句柄。

```js
onmessage = async (e) => {
  // 获取从主线程发往 worker 的消息
  const message = e.data;

  // 获取草稿文件的句柄
  const root = await navigator.storage.getDirectory();
  const draftHandle = await root.getFileHandle("draft.txt", { create: true });
  // 获取同步访问句柄
  const accessHandle = await draftHandle.createSyncAccessHandle();

  // 获取文件大小
  const fileSize = accessHandle.getSize();
  // 将文件内容读取到缓冲区
  const buffer = new DataView(new ArrayBuffer(fileSize));
  const readBuffer = accessHandle.read(buffer, { at: 0 });

  // 将消息写入到文件末尾
  const encoder = new TextEncoder();
  const encodedMessage = encoder.encode(message);
  const writeBuffer = accessHandle.write(encodedMessage, { at: readBuffer });

  // 将更改持久化至磁盘
  accessHandle.flush();

  // 用完 FileSystemSyncAccessHandle 记得把它关闭
  accessHandle.close();
};
```

**备注：** 在规范早期版本中，`close()`、`flush()`、`getSize()` 和 `truncate()` 被错误地定义为异步方法。此问题现已被修正，但某些浏览器依然支持异步版本。

规范
--

| Specification |
| --- |
| File System Standard # api-filesystemfilehandle |

浏览器兼容性
------

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

参见
--

* 文件系统 API
* 文件系统访问 API：简化本地文件访问


HTMLUnknownElement - Web API 接口参考

HTMLUnknownElement
==================

**`HTMLUnknownElement`** 代表着一个无效的 HTML 元素，派生自 `HTMLElement` 接口，但它没有任何可用的附加属性或方法。

属性
--

*没有特效属性，继承自父级 `HTMLElement`.*

方法
--

*没有指定方法;继承来自父级的属性，`HTMLElement`.*

规范
--

| Specification |
| --- |
| HTML Standard # htmlunknownelement |

浏览器兼容性
------

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

相关内容
----

* Obsolete or non-standard HTML elements implementing this interface: `<isindex>`, `<multicol>`, `<nextid>`, `<rb>`


GamepadEvent - Web API 接口参考

GamepadEvent
============

Gamepad API 的 GamepadEvent 接口包含对连接到系统的控制器的引用，这也是 gamepad 事件 events `Window.gamepadconnected` 与 `Window.gamepaddisconnected` 被触发时响应的内容。

构造函数
----

`GamepadEvent()`

返回一个新的 `GamepadEvent` 对象。

属性
--

`GamepadEvent.gamepad` 只读

返回一个 `Gamepad` 对象，提供触发事件的控制器数据的访问。

示例
--

在触发的 `Window.gamepadconnected` 事件上调用控制器属性。

```js
window.addEventListener("gamepadconnected", function (e) {
  console.log(
    "控制器已连接于 %d 位：%s。 %d 个按键，%d 个坐标方向。",
    e.gamepad.index,
    e.gamepad.id,
    e.gamepad.buttons.length,
    e.gamepad.axes.length,
  );
});
```

与 `Window.gamepaddisconnected` 事件上的。

```js
window.addEventListener("gamepaddisconnected", function (e) {
  console.log("控制器已从 %d 位断开：%s", e.gamepad.index, e.gamepad.id);
});
```

规范
--

| Specification |
| --- |
| Gamepad # gamepadevent-interface |

浏览器兼容性
------

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

参见
--

使用 Gamepad API


Performance - Web API 接口参考

Performance
===========

**`Performance`** 接口可以获取到当前页面中与性能相关的信息。它是 High Resolution Time API 的一部分，同时也融合了 Performance Timeline API、Navigation Timing API、User Timing API 和 Resource Timing API。

该类型的对象可以通过调用只读属性 `Window.performance` 来获得。

**备注：** 除了以下指出的情况外，该接口及其成员在 `Web Worker` 中可用。此外，还需注意，performance 的创建和衡量都是同一环境下的。即，如果你在主线程（或者其他 worker）中创建了一个 performance，那么它在另外的 worker 线程中是不可用的；反之亦然。

属性
--

*`Performance` 接口没有继承任何属性。*

已弃用`Performance.navigation` 只读

`PerformanceNavigation` 对象提供了在指定的时间段里发生的操作相关信息，包括页面是加载还是刷新、发生了多少次重定向等等。Not available in workers.

已弃用`Performance.timing` 只读

`PerformanceTiming` 对象包含延迟相关的性能信息。Not available in workers.

`performance.memory`
非标准

其是 Chrome 添加的一个非标准扩展，这个属性提供了一个可以获取到基本内存使用情况的对象。**不应该**使用这个非标准的 API。

`Performance.timeOrigin` 只读
非标准

返回性能测量开始时的时间的高精度时间戳。

### 事件处理程序

`Performance.onresourcetimingbufferfull`

一个回调的 `EventTarget`，当触发 `resourcetimingbufferfull` 事件的时候会被调用。

方法
--

**`Performance` 接口没有继承任何方法。**

`Performance.clearMarks()`

将给定的 mark 从浏览器的性能输入缓冲区中移除。

`Performance.clearMeasures()`

将给定的 measure 从浏览器的性能输入缓冲区中移除。

`Performance.clearResourceTimings()` (en-US)

从浏览器的性能数据缓冲区中移除所有 `entryType` 是 "`resource`" 的 `performance entries`。

`Performance.getEntries()`

基于给定的 *filter* 返回一个 `PerformanceEntry` 对象的列表。

`Performance.getEntriesByName()`

基于给定的 *name* 和 *entry type* 返回一个 `PerformanceEntry` 对象的列表。

`Performance.getEntriesByType()` (en-US)

基于给定的 *entry type* 返回一个 `PerformanceEntry` 对象的列表

`Performance.mark()`

根据给出 name 值，在浏览器的性能输入缓冲区中创建一个相关的`timestamp`

`Performance.measure()`

在浏览器的指定 *start mark 和 end mark* 间的性能输入缓冲区中创建一个指定的 `timestamp`

`Performance.now()`

返回一个表示从性能测量时刻开始经过的毫秒数 `DOMHighResTimeStamp`

`Performance.setResourceTimingBufferSize()` (en-US)

将浏览器的资源 timing 缓冲区的大小设置为 "`resource`" `type` `performance entry` 对象的指定数量

`Performance.toJSON()`

其是一个 JSON 格式转化器，返回 `Performance` 对象的 JSON 对象

规范
--

| Specification |
| --- |
| High Resolution Time # sec-performance |
| Performance Timeline # extensions-to-the-performance-interface |
| Resource Timing # sec-extensions-performance-interface |
| User Timing # extensions-performance-interface |

浏览器兼容性
------

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


ImageData - Web API 接口参考

ImageData
=========

**`ImageData`** 接口描述 `<canvas>` 元素的一个隐含像素数据的区域。使用 `ImageData()` 构造函数创建或者使用和 canvas 在一起的 `CanvasRenderingContext2D` 对象的创建方法： `createImageData()` 和 `getImageData()`。也可以使用 `putImageData()` 设置 canvas 的一部分。

构造函数
----

`ImageData()`
实验性

 三个参数，第一个 是`Uint8ClampedArray`的实例，第二个和第三个表示的是 width 和 height，必须保证 Uint8ClampedArray 的 length = 4\*width\*height 才不会报错，如果第一个参数 Uint8ClampedArray 没有的话，自动按照 width 和 height 的大小，以 0 填充整个像素矩阵。
 使用给定的`Uint8ClampedArray`创建一个 `ImageData` 对象，并包含图像的大小。如果不给定数组，会创建一个“完全透明”(因为透明度值为 0) 的黑色矩形图像。注意，这是最常见的方式去创建这样一个对象，在 `createImageData()` 不可用时。

属性
--

`ImageData.data` 只读

`Uint8ClampedArray` 描述了一个一维数组，包含以 RGBA 顺序的数据，数据使用 `0` 至 `255`（包含）的整数表示。

`ImageData.height` 只读

无符号长整型（`unsigned long`），使用像素描述 **ImageData** 的实际高度。

`ImageData.width` 只读

无符号长整型（`unsigned long`），使用像素描述 **ImageData** 的实际宽度。

规范
--

| Specification |
| --- |
| HTML Standard # imagedata |

浏览器兼容性
------

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

参见
--

* `CanvasRenderingContext2D`
* `<canvas>` 元素及其相关的接口 `HTMLCanvasElement`。


媒体流 (MediaStream) - Web API 接口参考

媒体流 (MediaStream)
=================

 **`MediaStream`** 接口是一个媒体内容的流.。一个流包含几个*轨道*，比如视频和音频轨道。属性
--

`MediaStream.active` 只读

布尔型。如果这个流处于活动状态值为 true，反之为 false

`MediaStream.ended` 只读
已弃用

布尔型。如果 `ended` 事件在这个对象上触发了，也就是说这个流已经被完全读取，值为 true。如果还没有到达这个流的尾部，值为 false。

`MediaStream.id` 只读

这是一个包含 36 个字符的 `DOMString` ，用来作为这个对象的唯一标识符 (GUID) 。

### 事件处理

`MediaStream.onaddtrack` (en-US)

这是 `addtrack` 事件在这个对象上触发时调用的事件处理器，这时一个`MediaStreamTrack`对象被添加到这个流。

`MediaStream.onended`

这是当流终止 `ended` 时触发的事件。

`MediaStream.onremovetrack` (en-US)

这是 `removetrack` 事件在这个对象上触发事调用的事件处理器，这时一个对象从流上移除。

方法
--

* `MediaStream.addTrack()`
    + : 存储传入参数 `MediaStreamTrack` 的一个副本。如果这个轨道已经被添加到了这个媒体流，什么也不会发生; 如果目标轨道为“完成”状态（也就是已经到尾部了），一个 INVALID\_STATE\_RAISE 异常会产生。
* `MediaStream.clone()` (en-US)
    + 返回这个 `MediaStream 对象的克隆版本。返回的版本会有一个新的 ID`。
    + 返回给定 ID 的轨道。如果没有参数或者没有指定 ID 的轨道，将返回 null。如果有几个轨道有同一个 ID，将返回第一个。
* `MediaStream.getTracks()`
    + : 返回流中所有的`MediaStreamTrack`列表。
* `MediaStream.getAudioTracks()`
    + : 返回流中 kind 属性为"audio"的`MediaStreamTrack`列表。顺序是不确定的，不同浏览器间会有不同，每次调用也有可能不同。
* `MediaStream.getTrackById()` (en-US)
    + : 返回给定 ID 的轨道。如果没有参数或者没有指定 ID 的轨道，将返回 null。如果有几个轨道有同一个 ID，将返回第一个。
* `MediaStream.getVideoTracks()` (en-US)
    + : 返回流中 kind 属性为"video"的`MediaStreamTrack`列表。顺序是不确定的，不同浏览器间会有不同，每次调用也有可能不同。
* `MediaStream.removeTrack()` (en-US)
    + : 移除作为参数传入的 `MediaStreamTrack`。如果这个轨道不在 `MediaStream` 对象中什么也不会发生；
     如果目标轨道为“完成”状态，一个 INVALID\_STATE\_RAISE 异常会产生。
规范
--

| Specification |
| --- |
| Media Capture and Streams # mediastream |

浏览器兼容性
------

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

相关内容
----

* Using the MediaStream API


Media Source Extensions API - Web API 接口参考

Media Source Extensions API
===========================

**实验性:** **这是一项实验性技术**
在将其用于生产之前，请仔细检查浏览器兼容性表格。

媒体源扩展 API（MSE）提供了实现无插件且基于 Web 的流媒体的功能。使用 MSE，媒体串流能够通过 JavaScript 创建，并且能通过使用 `<audio>` 和 `<video>` 元素进行播放。

概念和用法
-----

近几年来，我们已经可以在 Web 应用程序上无插件地播放视频和音频了。但是，现有架构过于简单，只能满足一次播放整个曲目的需要，无法实现拆分/合并数个缓冲文件。流媒体直到现在还在使用 Flash 进行服务，以及通过 RTMP 协议进行视频串流的 Flash 媒体服务器。

### MSE 标准

媒体源扩展（MSE）实现后，情况就不一样了。MSE 使我们可以把通常的单个媒体文件的 `src` 值替换成引用 `MediaSource` 对象（一个包含即将播放的媒体文件的准备状态等信息的容器），以及引用多个 `SourceBuffer` 对象（代表多个组成整个串流的不同媒体块）的元素。MSE 让我们能够根据内容获取的大小和频率，或是内存占用详情（例如什么时候缓存被回收），进行更加精准地控制。它是基于它可扩展的 API 建立自适应比特率流客户端（例如 DASH 或 HLS 的客户端）的基础。

在现代浏览器中创造能兼容 MSE 的媒体（assets）非常费时费力，还要消耗大量计算机资源和能源。此外，还须使用外部实用程序将内容转换成合适的格式。虽然浏览器支持兼容 MSE 的各种媒体容器，但采用 H.264 视频编码、AAC 音频编码和 MP4 容器的格式是非常常见的，且一定兼容。MSE 同时还提供了一个 API，用于运行时检测容器和编解码是否受支持。

如果没有精确的控制时间、媒体质量和内存释放等需求，使用 `<video>` 和 `<source>` 是一个更加简单但够用的方案。

### DASH

DASH（Dynamic Adaptive Streaming over HTTP）是一个规范了自适应内容应当如何被获取的协议。它实际上是建立在 MSE 顶部的一个层，用来构建自适应比特率串流客户端。虽然已经有一个类似的协议了（例如 HTTP 串流直播（HLS）），但 DASH 有最好的跨平台兼容性，这就是我们在这里介绍它的原因。

DASH 将大量逻辑从网络协议中移出到客户端应用程序逻辑中，使用更简单的 HTTP 协议获取文件。这样就可以用一个简单的静态文件服务器来支持 DASH，这对 CDN 也很友好。这与之前的流传输解决方案形成鲜明对比，那些流解决方案需要昂贵的许可证来获得非标准的客户端/服务器协议才能实现。

DASH 的两个最常见的用例涉及“点播”或“直播”观看内容。点播功能让开发者有时间把媒体文件转码出多种不同的分辨率质量。

实时处理内容会引入由转码和播发带来的延迟。因此 DASH 并不适用于类似 WebRTC 的即时通讯。但它可以支持比 WebRTC 更多的客户端连接。

有非常多的自由开源的工具，能实现转码内容，并将其改造，以适应 DASH、DASH 文件服务器和用 JavaScript 编写的 DASH 客户端库。

媒体源扩展接口
-------

`MediaSource`

代表了将由 `HTMLMediaElement` 对象播放的媒体资源。

`SourceBuffer`

代表了一个经由 `MediaSource` 对象被传入 `HTMLMediaElement` 的媒体块。

`SourceBufferList`

列出多个 `SourceBuffer` 对象的简单的容器列表。

`VideoPlaybackQuality`

包含了有关正被 `<video>` 元素播放的视频的质量信息，例如被丢弃或损坏的帧的数量。由 `HTMLVideoElement.getVideoPlaybackQuality()` (en-US) 方法返回。

其他接口的扩展
-------

`URL.createObjectURL()`

创建一个指向一个 `MediaSource` 对象的 URL。要求此 URL 可以被指定为一个用来播放媒体流的 HTML 媒体元素的 `src` 的值。

`HTMLMediaElement.seekable`

当一个 `MediaSource` 对象被 HTML 媒体元素播放时，此属性将返回一个包含用户能够在什么时间范围内进行调整的对象 `TimeRanges`。

`HTMLVideoElement.getVideoPlaybackQuality()` (en-US)

针对正在播放的视频，返回一个 `VideoPlaybackQuality` 对象。

`AudioTrack.sourceBuffer` (en-US), `VideoTrack.sourceBuffer` (en-US), `TextTrack.sourceBuffer`

返回创建了相关轨道的 `SourceBuffer`。

规范
--

| Specification |
| --- |
| Media Source Extensions™  |

参见
--

* 媒体源扩展的音视频资源转码 (en-US)
* 用 MSE 创建基础的流服务（待定）
* 用 MPEG DASH 创建流应用（待定）
* `<audio>` 和 `<video>` 元素。
* `HTMLMediaElement`、`HTMLVideoElement`、`HTMLAudioElement`。


PerformanceResourceTiming - Web API 接口参考

PerformanceResourceTiming
=========================

PerformanceResourceTiming 接口可以检索和分析有关加载应用程序资源的详细网络计时数据。应用程序可以使用 timing 指标来确定获取特定资源所需的时间长度，例如`XMLHttpRequest`，`<SVG>`，image 或 script。这个接口使用`high-resolution timestamps` 属性创建加载资源时间轴，用于网络事件，例如重定向开始 ( redirect start ) 和结束时间，获取开始 ( fetch start )，DNS 查找开始 ( DNS lookup start ) 和结束时间，响应开始 ( response start ) 和结束时间等。此外，接口扩展`PerformanceEntry`与其他属性，这些属性提供有关获取资源大小的数据以及初始化时获取的资源类型。
PerformanceEntry

PerformanceResourceTiming

**备注：** 此特性在 Web Worker 中可用

属性
--

此接口通过限定和约束`PerformanceEntry`属性来扩展资源性能条目类型，如下所示：

`PerformanceEntry.entryType`只读

返回 `"resource"`.

`PerformanceEntry.name`只读

返回 resources URL.

`PerformanceEntry.startTime` (en-US)只读

在资源提取开始的时间返回`timestamp`。该值等于`PerformanceEntry.fetchStart` (en-US)。

`PerformanceEntry.duration` (en-US)只读

返回`timestamp`，它是`responseEnd` (en-US)和`startTime` (en-US)属性之间的差异。

该接口还支持以下属性，这些属性按记录顺序列出以获取单个资源。按字母顺序排列的列表显示在左侧的导航栏中。

`PerformanceResourceTiming.initiatorType` (en-US)只读

返回`string`，表示初始化性能条目的资源类型，如`PerformanceResourceTiming.initiatorType` (en-US)中所规定。

`PerformanceResourceTiming.nextHopProtocol` (en-US)只读

返回`string` ，表示用于获取资源的网络协议，由ALPN Protocol ID (RFC7301)标识。

`PerformanceResourceTiming.workerStart` (en-US)只读

如果 Service Worker 线程已在运行，则在调用`FetchEvent`之前立即返回`DOMHighResTimeStamp`，如果尚未运行，则在启动 Service Worker 线程之前立即返回`DOMHighResTimeStamp`。如果资源未被 Service Worker 拦截，则该属性将始终返回 0。

`PerformanceResourceTiming.redirectStart` (en-US)只读

返回`DOMHighResTimeStamp`，表示初始重定向的开始获取时间。

`PerformanceResourceTiming.redirectEnd` (en-US)只读

返回`DOMHighResTimeStamp` ，紧接在收到最后一次重定向响应的最后一个字节后。

`PerformanceResourceTiming.fetchStart` (en-US)只读

返回`DOMHighResTimeStamp` ，紧接在浏览器开始获取资源之前。

`PerformanceResourceTiming.domainLookupStart` (en-US)只读

返回`DOMHighResTimeStamp`，紧接在浏览器启动资源的域名查找之前。

`PerformanceResourceTiming.domainLookupEnd` (en-US)只读

返回`DOMHighResTimeStamp` ，表示浏览器完成资源的域名查找后的时间。

`PerformanceResourceTiming.connectStart` (en-US)只读

返回`DOMHighResTimeStamp` ，紧接在浏览器检索资源，开始建立与服务器的连接之前。

`PerformanceResourceTiming.connectEnd` (en-US)只读

返回`DOMHighResTimeStamp` ，紧接在浏览器完成与服务器的连接以检索资源之后。

`PerformanceResourceTiming.secureConnectionStart` (en-US)只读

返回`DOMHighResTimeStamp` ，紧接在浏览器启动握手过程之前，以保护当前连接。

`PerformanceResourceTiming.requestStart` (en-US)只读

返回`DOMHighResTimeStamp` ，紧接在浏览器开始从服务器请求资源之前。

`PerformanceResourceTiming.responseStart` (en-US)只读

返回`DOMHighResTimeStamp` ，紧接在浏览器收到服务器响应的第一个字节后。

`PerformanceResourceTiming.responseEnd` (en-US)只读

返回`DOMHighResTimeStamp` ，紧接在浏览器收到资源的最后一个字节之后或紧接在传输连接关闭之前，以先到者为准。

`PerformanceResourceTiming.transferSize` (en-US)只读

表示获取资源的大小（以八位字节为单位）的`数字`。包括响应头字段和响应 payload body 的大小。

`PerformanceResourceTiming.encodedBodySize` (en-US)只读

在删除任何应用的内容编码之前，从 payload body 的提取（HTTP 或高速缓存）接收的大小（以八位字节为单位）的`数字`。

`PerformanceResourceTiming.decodedBodySize` (en-US)只读

在删除任何应用的内容编码之后，从消息正文 ( message body ) 的提取（HTTP 或缓存）接收的大小（以八位字节为单位）的`数字`。

`PerformanceResourceTiming.serverTiming` (en-US)只读

包含服务器时序度量 ( timing metrics ) 的`PerformanceServerTiming` (en-US) 条目数组。

方法
--

`PerformanceResourceTiming.toJSON()` (en-US)

返回`DOMString`，它是 `PerformanceResourceTiming` 对象的 JSON 表示形式。

示例
--

在 Resource Timing（概述）中查看相关示例。

规范
--

| Specification |
| --- |
| Resource Timing # resources-included-in-the-performanceresourcetiming-interface |

浏览器兼容性
------

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

参考
--

* Resource Timing（概述）


BeforeInstallPrompt - Web API 接口参考

BeforeInstallPrompt
===================

**非标准:** 该特性是非标准的，请尽量不要在生产环境中使用它！

在一个用户被提示”安装“一个网站到移动设备的一个主屏幕之前，**`BeforeInstallPromptEvent`** 被 `Window.onbeforeinstallprompt` 处理程序触发。

该接口继承自`Event`接口。

构造器
---

`new window.BeforeInstallPromptEvent(name, eventInitOptions)`

创建一个新的 **`BeforeInstallPromptEvent`**.

属性
--

*继承自父类，`Event`.*

`BeforeInstallPromptEvent.platform` 只读

返回一个包含了调度事件的平台（s）的 `DOMString` 数组。这是为希望向用户提供版本选择的 user agent 提供的，例如，“web”或“play”允许用户在 web 版本或 Android 版本之间进行选择。

`BeforeInstallPromptEvent.userChoice` (en-US) 只读

返回一个可以解析为 `DOMString` 的 `Promise` ，其值为 'installed' 或 'dismissed'，用以判断用户是否选择安装该 PWA。

方法
--

`BeforeInstallPromptEvent.prompt()`

立即弹出安装提示。允许开发者按照自己选择的时间弹出安装提示。该方法返回 `Promise`。

例子
--
```

window.addEventListener("beforeinstallprompt", function(e) {
  // log the platforms provided as options in an install prompt
  console.log(e.platforms); // e.g., ["web", "android", "windows"]
  e.userChoice.then(function(outcome) {
    console.log(outcome); // either "installed", "dismissed", etc.
  }, handleError);
});
```

浏览器兼容性
------

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


Channel Messaging API - Web API 接口参考

Channel Messaging API
=====================

**Channel Messaging API** 允许两个不同的脚本运行在同一个文档的不同浏览器上下文（比如两个 iframe，或者文档主体和一个 iframe，使用 `SharedWorker` 的两个文档，或者两个 worker）来直接通讯，在每端使用一个端口（port）通过双向频道（channel）向彼此传递消息。

**备注：** 此特性在 Web Worker 中可用

Channel 通信的概念和用法
----------------

使用 `MessageChannel()` 构造函数来创建通讯信道。一旦创建，信道的两个端口即可通过 `MessageChannel.port1` 和 `MessageChannel.port2` 属性进行访问（都会返回 `MessagePort` 对象）。创建信道的应用程序使用 `port1`，在另一端的程序使用 `port2`——你向 `port2` 发送信息，然后携带 2 个参数（需要传递的消息，要传递所有权的对象，在这里是 port 自身）调用 `window.postMessage` 方法将端口信息传递到另一个浏览器上下文。

当这些可传递的对象被传递后，他们就从之前所属的上下文中消失了。比如一个 port，一旦被发送，在原本的上下文中就再也不可用了。注意当前仅有 `ArrayBuffer` 和 `MessagePort` 对象可以被发送。

另一个浏览器上下文可以使用 `MessagePort.onmessage` 监听信息，并使用事件的 `data` 属性获取消息内容。你可以通过 `MessagePort.postMessage` (en-US) 向原来的文档发送应答消息。

当你想要停止通过信道发送消息时，你可以调用来关闭 `MessagePort.close` (en-US) 端口。

更多使用这个 API 的资料参见：Using channel messaging 。

Channel 通信接口
------------

`MessageChannel`

创建一个新的发送消息的信道。

`MessagePort`

控制消息信道的端口，允许从一个端口发送消息，并监听另一端消息的到来。

`PortCollection`

`MessagePort` 数组，一种同时向多个端口广播消息的实验性解决方案。

例子
--

* 我们在 Github 上发布了 channel messaging 基本演示，在这里直接尝试。这个例子展示了一次页面和嵌入 `<iframe>` 间的真实而简易的消息传递。
* 你也可以参考多个消息演示（在线演示）。这个例子展示了稍微复杂些的设置，可以在主页面和 IFrame 之间传递多条消息。
规范
--

| Specification |
| --- |
| HTML Standard # channel-messaging |

浏览器兼容性
------

### api.MessageChannel

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

### api.MessagePort

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

参见
--

* Using channel messaging
* Web Workers API
* Broadcast Channel API


DOMImplementation - Web API 接口参考

DOMImplementation
=================

**`DOMImplementation`** 接口代表了一个对象，这个对象提供了不依赖于任何 document 的方法。这个对象可以通过`Document.implementation`属性获得

属性
--

*这个接口没有特定的属性，并且也没有继承到任何属性。*

方法
--

*没有继承的方法。*

`DOMImplementation.createDocument()`

创建并返回一个 `XMLDocument`对象。

`DOMImplementation.createDocumentType()`

创建并返回一个 `DocumentType`对象。

`DOMImplementation.createHTMLDocument()`

创建并返回一个 `Document`对象。

`DOMImplementation.hasFeature()` (en-US)

返回一个是否支持所给定特性的`Boolean` (en-US)值。这个方法是不可靠的，仅用于兼容性目的：除了 SVG 相关的查询，它总是返回 `true`。旧浏览器的行为非常不一致

规范
--

| Specification |
| --- |
| DOM Standard # interface-domimplementation |

浏览器兼容性
------

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

参见
--

* DOM 接口索引


TouchList - Web API 接口参考

TouchList
=========

**`TouchList`** 接口代表一个触摸平面上所有触点的列表。例如，如果一个用户用三根手指接触屏幕（或者触控板），与之对应的 `TouchList` 会包含每根手指的 `Touch` 对象，总共三个。

属性
--

`TouchList.length` (en-US) 只读

返回`TouchList`中 `Touch` 对象的数量。

方法
--

`TouchList.identifiedTouch()`
已弃用

列表中标示符与指定值匹配的第一个`Touch` 对象会被返回。

`TouchList.item()` (en-US)

返回列表中以指定值作为索引的 `Touch` 对象。

示例
--

参考这个主要 Touch 事件的示例.

规范
--

| Specification |
| --- |
| Touch Events # touchlist-interface |

浏览器兼容性
------

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

相关链接
----

* Touch 事件
* `Document.createTouchList()` (en-US)


CSS 分页规则 - Web API 接口参考

CSS 分页规则
========

**`CSSPageRule`** 是代表一个 css 接口 `@page` 规则。它实现了 `CSSRule` 类型值为 6 的接口 (`CSSRule.PAGE_RULE`).

语法
--

这个语法是使用 WebIDL 格式。
```

interface CSSPageRule : CSSRule {
  attribute DOMString selectorText;
  readonly attribute CSSStyleDeclaration style;
};
```

Properties
----------

`CSSRule`, `CSSPageRule` 也实现了此接口的属性。它具有以下特定属性：

`CSSPageRule.selectorText` (en-US)

表示与规则关联的页面选择器的文本。

`CSSPageRule.style` (en-US) 只读

返回与规则关联的声明块。

Methods
-------

作为 `CSSRule`, `CSSPageRule` 的 CSSPageRule 还实现了该接口的方法。它没有具体方法。

Specifications
--------------

| Specification |
| --- |
| CSS Object Model (CSSOM) # the-csspagerule-interface |

Browser compatibility
---------------------

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


Web Worker API - Web API 接口参考

Web Worker API
==============

**Web Worker** 使得在一个独立于 Web 应用程序主执行线程的后台线程中运行脚本操作成为可能。这样做的好处是可以在独立线程中执行费时的处理任务，使主线程（通常是 UI 线程）的运行不会被阻塞/放慢。

Web Worker 概念与用法
----------------

Worker 是一个使用构造函数创建的对象（例如 `Worker()`），它运行一个具名 JavaScript 文件——该文件包含将在 worker 线程中运行的代码。

除了标准的 JavaScript 函数集（如 `String`、`Array`、`Object`、`JSON` 等），你可以在 worker 线程中运行任何你喜欢的代码，有一些例外：你不能直接在 worker 线程中操作 DOM 元素，或使用 `window` 对象中的某些方法和属性。有关你可以运行的代码的信息，请参见下面的 Worker 全局上下文和函数和支持的 Web API 。

数据通过消息系统在 worker 和主线程之间发送——双方都使用 `postMessage()` 方法发送消息，并通过 `onmessage` 事件处理程序响应消息（消息包含在 `message` 事件的 `data` 属性中）。数据是复制的，而不是共享的。

worker 可以依次生成新的 worker，只要这些 worker 与父页面托管在同一个 origin 中。此外，worker 可以通过 `XMLHttpRequest` 来访问网络，但 `XMLHttpRequest` 的 `responseXML` 和 `channel` 属性始终返回 `null`。

### Worker 类型

有许多不同类型的 worker：

* 专用 worker 是由单个脚本使用的 worker。该上下文由 `DedicatedWorkerGlobalScope` 对象表示。
* `Shared worker` 是可以由在不同窗口、IFrame 等中运行的多个脚本使用的 worker，只要它们与 worker 在同一域中。它们比专用的 worker 稍微复杂一点——脚本必须通过活动端口进行通信。
* Service Worker 基本上是作为代理服务器，位于 web 应用程序、浏览器和网络（如果可用）之间。它们的目的是（除开其他方面）创建有效的离线体验、拦截网络请求，以及根据网络是否可用采取合适的行动并更新驻留在服务器上的资源。它们还将允许访问推送通知和后台同步 API。

**备注：** 根据 web worker 规范，worker 错误事件不应该冒泡（参见 Firefox bug 1188141）。该规范已在 Firefox 42 中实现。

### Worker 全局上下文和函数

worker 在一个与当前 `window` 不同的全局上下文中运行！虽然 `Window` 不能直接用于 worker，但许多相同的方法被定义在一个共享的混入（`WindowOrWorkerGlobalScope`）中，并通过 worker 自己的 `WorkerGlobalScope` (en-US) 衍生的上下文提供给它们：

* `DedicatedWorkerGlobalScope` 用于专用 worker
* `SharedWorkerGlobalScope` (en-US) 用于共享 worker
* `ServiceWorkerGlobalScope` 用于 service worker

所有 worker 和主线程（来自 `WindowOrWorkerGlobalScope`）共有的一些函数（子集）是：

* `atob()`
* `btoa()`
* `clearInterval()`
* `clearTimeout()`
* `dump()`
非标准
* `queueMicrotask()`
* `setInterval()`
* `setTimeout()`
* `structuredClone()`
* `window.requestAnimationFrame`（仅专用 worker）
* `window.cancelAnimationFrame`（仅专用 worker）

以下函数**仅**对 worker 可用：

* `WorkerGlobalScope.importScripts()`（所有 worker）
* `DedicatedWorkerGlobalScope.postMessage` (en-US)（仅限专用 worker）
### 支持的 Web API

**备注：** 如果列出的 API 被某一平台的特定版本所支持，那么一般可以认为它在 web worker 中是可用的。你也可以使用网站来测试对某个特定对象/函数的支持：https://worker-playground.glitch.me/

以下 Web API 对 worker 是可用的：

* `Barcode Detection API`
* `Broadcast Channel API`
* `Cache API`
* `Channel Messaging API`
* `Console API`
* Web Crypto API（例如 `Crypto`）
* CSS Font Loading API
* `CustomEvent`
* `Encoding API`（例如 `TextEncoder`、`TextDecoder`）
* `Fetch API`
* `FileReader`
* `FileReaderSync`（仅在 worker 中有效！）
* `FormData`
* `ImageBitmap`
* `ImageData`
* `IndexedDB`
* Media Source Extensions API（仅限专用 worker）
* Network Information API
* `Notifications API`
* `OffscreenCanvas`（和所有的 canvas context API）
* `Performance API`，包括：
    + `Performance`
    + `PerformanceEntry`
    + `PerformanceMeasure` (en-US)
    + `PerformanceMark` (en-US)
    + `PerformanceObserver`
    + `PerformanceResourceTiming`
* Server-sent 事件
* `ServiceWorkerRegistration` (en-US)
* `URL API`（例如 `URL`）
* WebCodecs\_API
* `WebSocket`
* `XMLHttpRequest`

worker 也可以派生其他 worker，所以这些 API 也是可用的：

* `Worker`
* `WorkerGlobalScope` (en-US)
* `WorkerLocation` (en-US)
* `WorkerNavigator` (en-US)
Web Worker 接口
-------------

`Worker`

表示正在运行的 worker 线程，允许你将信息传递到正在运行的 worker 程序代码。

`WorkerLocation` (en-US)

定义由 `Worker` 执行的脚本的绝对位置。

`SharedWorker`

表示一种特定的 worker，可以从多个浏览上下文（即窗口、标签或 iframe）甚至其他 worker 访问。

`WorkerGlobalScope` (en-US)

表示任意 worker 的通用作用域（对于正常的网页类容来说与 `Window` 有相同的作用）。不同类型的 worker 都有从接口继承作用域对象，并且可以添加更多特定特性。

`DedicatedWorkerGlobalScope`

表示一个专用 worker 的作用域，继承自 `WorkerGlobalScope` (en-US)，且可添加一些特有的特性。

`SharedWorkerGlobalScope` (en-US)

表示一个共享 worker 的作用域，继承自 `WorkerGlobalScope` (en-US)，且可添加一些特有的特性。

`WorkerNavigator` (en-US)

表示用户代理（客户端）的身份和状态。

示例
--

我们创建了几个演示来展示 Web Worker 的使用：

* 基本的专用 worker 示例（运行专用 worker）。
* 基本的共享 worker 示例（运行共享 worker）。
* OffscreenCanvas worker 示例（运行 OffscreenCanvas worker）。

你可以在使用 web worker 中找到有关这些演示是如何工作的更多信息。

规范
--

| Specification |
| --- |
| HTML Standard # workers |

参见
--

* 使用 Web Worker
* `Worker` 接口
* `SharedWorker` 接口
* Service Worker API