recursal/MDN huggingface dataset:
WebGLProgram
============

**WebGLProgram** 是 WebGL API 的一部分，它由两个`WebGLShader`s（webgl 着色器）组成，分别为顶点着色器和片元着色器（两种着色器都是采用 GLSL 语言编写的）。创建一个 **WebGLProgram** 需要调用 GL 上下文的`createProgram()` 方法，然后调用`attachShader()`方法附加上着色器，之后你才能将它们连接到一个可用的程序。

WebGLProgram 的创建过程请参考下面的代码：


```js
var program = gl.createProgram();

// 添加预先存在的着色器
gl.attachShader(program, vertexShader);
gl.attachShader(program, fragmentShader);

gl.linkProgram(program);

if (!gl.getProgramParameter(program, gl.LINK\_STATUS)) {
  var info = gl.getProgramInfoLog(program);
  throw "WebGL program 不能编译。\n\n" + info;
}
```


查看 `WebGLShader` api 了解更多关于创建以上例子中的`顶点着色器`和`片元着色器`的信息。

示例
--

### 使用着色器程序

着色器程序在使用的过程中要分为几步，包括告知 GPU 来使用这段着色器程序，绑定合适的数据缓冲区，配置相关选项，最终把图像绘制到屏幕上。


```js
// Use the program
gl.useProgram(program);

// Bind existing attribute data
gl.bindBuffer(gl.ARRAY\_BUFFER, buffer);
gl.enableVertexAttribArray(attributeLocation);
gl.vertexAttribPointer(attributeLocation, 3, gl.FLOAT, false, 0, 0);

// Draw a single triangle
gl.drawArrays(gl.TRIANGLES, 0, 3);
```

### 删除着色器程序

如果在连接着色器程序的过程中发生了错误，或者你希望删除一个已经存在的着色器程序，你可以调用代码 `WebGLRenderingContext.deleteProgram()`，这将释放连接着色器程序的内存。


```js
gl.deleteProgram(program);
```

规范
--

| Specification |
| --- |
| WebGL Specification # 5.6 |

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

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

相关链接
----

* `WebGLShader`
* `WebGLRenderingContext.attachShader()`
* `WebGLRenderingContext.compileShader()`
* `WebGLRenderingContext.createProgram()`
* `WebGLRenderingContext.createShader()`
* `WebGLRenderingContext.deleteProgram()`
* `WebGLRenderingContext.deleteShader()`
* `WebGLRenderingContext.detachShader()`
* `WebGLRenderingContext.getAttachedShaders()` (en-US)
* `WebGLRenderingContext.getProgramParameter()` (en-US)
* `WebGLRenderingContext.getProgramInfoLog()`
* `WebGLRenderingContext.getShaderParameter()`
* `WebGLRenderingContext.getShaderPrecisionFormat()` (en-US)
* `WebGLRenderingContext.getShaderInfoLog()` (en-US)
* `WebGLRenderingContext.getShaderSource()`
* `WebGLRenderingContext.isProgram()`
* `WebGLRenderingContext.isShader()`
* `WebGLRenderingContext.linkProgram()`
* `WebGLRenderingContext.shaderSource()`
* `WebGLRenderingContext.useProgram()`
* `WebGLRenderingContext.validateProgram()`
FileSystemSyncAccessHandle
==========================

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

文件系统 API 的 **`FileSystemSyncAccessHandle`** 接口用于表示一个指向某个文件系统条目的同步句柄。

这个类只在用于处理对终端用户不可见的源私有文件系统上的文件的专用 Web Worker 中可以访问（这样它的方法就不会阻塞主线程的执行）。

因此，它的方法不受与运行在用户可见文件系统中的文件上的方法相同的安全性检查，从而具有更优秀的性能。这使得这些方法适用于重要的、大规模的文件更新，例如对 SQLite 数据库进行更改。

这个接口通过 `FileSystemFileHandle.createSyncAccessHandle()` 方法来访问。

**备注：** 在规范早期版本中，`FileSystemSyncAccessHandle` 的 `close()`、`flush()`、`getSize()` 和 `truncate()` 被错误地规定为异步方法。某些浏览器的旧版本是依照异步方式来实现这些方法的，不过，现今所有支持这些方法的浏览器都将它们实现为同步方法。

实例属性
----

无。

实例方法
----

`close()`

关闭一个打开的同步文件句柄，禁止之后对其的任何操作并且释放之前加在与文件句柄相关联的文件上的独占锁。

`flush()`

将通过 `write()` 方法对句柄相关联的文件所做的所有更改持久化保存到磁盘上。

`getSize()`

返回与句柄相关联文件的字节大小。

`read()`

将与句柄相关联文件的内容读取到指定的缓冲区中，可选择在给定的偏移处开始读取。

`truncate()`

将与句柄相关联文件的大小调整为指定的字节数。

`write()`

将指定缓冲区中的内容写入到与句柄相关联的文件，可选择在给定的偏移处开始写入。

示例
--

下面的异步事件处理函数包含在一个 Web Worker 中。当收到来自主线程的消息时，它将执行：

* 创建一个同步文件访问句柄。
* 获取文件的大小然后创建一个 `ArrayBuffer` 来容纳其内容。
* 将文件内容读取到缓冲区。
* 将收到的消息编码然后写入到文件的末尾。
* 将更改保存到磁盘然后关闭访问句柄。


```js
onmessage = async (e) => {
  // 接收从主线程发来的消息
  const message = e.data;

  // 获取草稿文件的句柄
  const root = await navigator.storage.getDirectory();
  const draftHandle = await root.getFileHandle("draft.txt", { create: true });
  // Get sync access handle
  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();
};
```

规范
--

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

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

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

参见
--

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

URL API 是一个 URL 标准的组件，它定义了有效的Uniform Resource Locator和访问、操作 URL 的 API。URL 标准还定义了像域名、主机和 IP 地址等概念，并尝试以标准的方式去描述用于以键/值对的形式提交 web 表单内容的遗留`application/x-www-form-urlencoded` MIME type 。

URL 的概念和用法
----------

URL 标准的主要内容是由 URL 的定义以及它的结构和解析方式决定的。还介绍了与网络上计算机寻址有关的各种术语的定义，并指定了解析 IP 地址和 DOM 地址的算法。大多数开发人员更感兴趣的是 API 本身。

### 使用 URL 组件

给指定的 URL 创建一个 `URL` 对象将解析 URL 并通过其属性对其组成部分的快速访问。


```js
let addr = new URL("https://developer.mozilla.org/zh-CN/docs/Web/API/URL\_API");
let host = addr.host;
let path = addr.pathname;
```


上面的代码片段为你正在阅读的文章创建一个`URL`对象，然后获取 `host` 和 `pathname` 属性。在本例中，这些字符串的值分别是`developer.mozilla.org` 和`/zh-CN/docs/Web/API/URL_API`。

### 修改 URL

`URL`对象的大部分属性都是可设置的；你可以向它们写入新值来更改对象所表示的 URL。例如，要创建一个 URL 对象并设置它的用户名：


```js
let myUsername = "someguy";
let addr = new URL("https://mysite.com/login");
addr.username = myUsername;
```


设置 `username` 值不仅是设置该属性的值，而且更新整个 URL。执行上面的代码片段后， `addr.href` 的返回值是`https://someguy@mysite.com/login`。对于任何可写属性都是如此。

### 查询

`search` 属性在 URL 上包含 URL 的查询字符串部分。例如，如果 URL 是`https://mysite.com/login?user=someguy&page=news`，那么`search` 属性的值是`?user=someguy&page=news`。你还可以使用 `URLSearchParams` 对象的 `get()` 查找单个参数的值：
```

let addr = new URL("https://mysite.com/login?user=someguy&page=news");
try {
  loginUser(addr.searchParams.get("user"));
  gotoPage(addr.searchParams.get("page"));
} catch(err) {
  showErrorMessage(err);
}
```


例如，在上面的代码片段中，从查询中提取用户名和目标页面，并将其传递给适当的函数，站点代码使用这些函数登录并将用户路由到站点的目的页面。

`URLSearchParams`中的其他函数允许修改改、添加和删除键和值，甚至对参数列表进行排序。

URL API 接口
----------

URL API 是一个简单的 API，它的名字只有几个接口：

* `URL`
* `URLSearchParams`

该规范的旧版本包括一个名为`URLUtilsReadOnly` (en-US)的接口，该接口已经合并到`WorkerLocation` (en-US) 接口中。

例子
--

如果希望处理 URL 中包含的参数，可以手动进行处理，但是创建一个 URL 对象更容易。下面的`fillTableWithParameters()`函数接受一个表示`<table>`的 `HTMLTableElement` 对象作为输入。将行添加到表中，每个行对应参数中找到的键，第一列包含键，第二列包含值。

注意，在生成表之前调用 `URLSearchParams.sort()` 对参数列表进行排序。


```js
function fillTableWithParameters(tbl) {
  let url = new URL(document.location.href);
  url.searchParams.sort();
  let keys = url.searchParams.keys();

  for (let key of keys) {
    let val = url.searchParams.get(key);
    let row = document.createElement("tr");
    let cell = document.createElement("td");
    cell.innerText = key;
    row.appendChild(cell);
    cell = document.createElement("td");
    cell.innerText = val;
    row.appendChild(cell);
    tbl.appendChild(row);
  }
}
```


在 found on Glitch上可以找到这个例子的工作版本。只要在加载页面时向 URL 添加参数，就可以在表中看到它们。例如，试试`https://url-api.glitch.me?from=mdn&excitement=high&likelihood=inconceivable`。

规范
--

| Specification |
| --- |
| URL Standard # api |

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

### api.URL

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

### api.URLSearchParams

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

另见
--

* Fetch API
* CSS `<url>()` type
GPUCanvasContext
================

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

WebGPU API 的 **`GPUCanvasContext`** 接口表示 `<canvas>` 元素的 WebGPU 渲染上下文，通过 `HTMLCanvasElement.getContext()` 调用返回 `"webgpu"` 的 `contextType`。

实例属性
----

`canvas` (en-US) 
实验性
 只读 

返回创建上下文的 canvas 的引用。

实例方法
----

`configure()` 
实验性

使用给定的 `GPUDevice` 配置渲染上下文并清除 canvas 为透明的黑色。

`getCurrentTexture()` (en-US) 
实验性

返回一个由 canvas 上下文合成到文档的 `GPUTexture` (en-US)。

`unconfigure()` (en-US) 
实验性

移除预设的上下文配置，并销毁在配置 canvas 上下文时生成的任何配置。

示例
--


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

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

规范
--

| Specification |
| --- |
| WebGPU # gpucanvascontext |

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

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

参见
--

* WebGPU API
MutationObserver
================

`MutationObserver` 接口提供了监视对 DOM 树所做更改的能力。它被设计为旧的 Mutation Events 功能的替代品，该功能是 DOM3 Events 规范的一部分。

构造函数
----

`MutationObserver()`

创建并返回一个新的 `MutationObserver` 它会在指定的 DOM 发生变化时被调用。

方法
--

`disconnect()`

阻止 `MutationObserver` 实例继续接收的通知，直到再次调用其 `observe()` 方法，该观察者对象包含的回调函数都不会再被调用。

`observe()`

配置 `MutationObserver` 在 DOM 更改匹配给定选项时，通过其回调函数开始接收通知。

`takeRecords()`

从 MutationObserver 的通知队列中删除所有待处理的通知，并将它们返回到 `MutationRecord` 对象的新 `Array` 中。

Mutation Observer & customize resize event listener & demo
----------------------------------------------------------

https://codepen.io/webgeeker/full/YjrZgg/

示例
--

以下示例改编自这篇博客。


```js
// 选择需要观察变动的节点
const targetNode = document.getElementById("some-id");

// 观察器的配置（需要观察什么变动）
const config = { attributes: true, childList: true, subtree: true };

// 当观察到变动时执行的回调函数
const callback = function (mutationsList, observer) {
  // Use traditional 'for loops' for IE 11
  for (let mutation of mutationsList) {
    if (mutation.type === "childList") {
      console.log("A child node has been added or removed.");
    } else if (mutation.type === "attributes") {
      console.log("The " + mutation.attributeName + " attribute was modified.");
    }
  }
};

// 创建一个观察器实例并传入回调函数
const observer = new MutationObserver(callback);

// 以上述配置开始观察目标节点
observer.observe(targetNode, config);

// 之后，可停止观察
observer.disconnect();
```

规范
--

| Specification |
| --- |
| DOM Standard # interface-mutationobserver |

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

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

参见
--

* `PerformanceObserver`
* `ResizeObserver`
* `IntersectionObserver`
* A brief overview
* A more in-depth discussion
* A screencast by Chromium developer Rafael Weinstein
Lock
====

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

Web Locks API 的 **`Lock`** 接口提供锁的名称和模式。这可能是在 `LockManager.request()` 方法的回调中接收到的新请求的锁，也可能是 `LockManager.query()` 方法返回的活动状态的锁或队列中的锁请求。

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

实例属性
----

`Lock.mode` 只读 

返回请求锁时传递给 `LockManager.request()` 的访问模式。模式可以是 `"exclusive"`（默认值）或 `"shared"`。

`Lock.name` 只读 

返回请求锁时传递给 `LockManager.request()` 方法的名称。

示例
--

以下示例展示如何在对 `LockManager.request()` 的调用中传递模式和名称参数。`LockManager` 是 `navigator.locks` 属性返回的对象。


```js
navigator.locks.request("net\_db\_sync", show_lock_properties);
navigator.locks.request(
  "another\_lock",
  { mode: "shared" },
  show_lock_properties,
);

function show\_lock\_properties(lock) {
  console.log(`锁的名称是：${lock.name}`);
  console.log(`锁的模式是：${lock.mode}`);
}
```

规范
--

| Specification |
| --- |
| Web Locks API # api-lock |

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

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

Web Performance API 允许网页访问某些函数来测量网页和 Web 应用程序的性能，包括 Navigation Timing (en-US) API 和高分辨率时间数据。方法
--

`performance.mark()`

通过一个给定的名称，将该名称（作为键）和对应的`DOMHighResTimeStamp`（作为值）保存在一个哈希结构里。该键值对表示了从某一时刻（译者注：某一时刻通常是 navigationStart 事件发生时刻）到记录时刻间隔的毫秒数。（译者注：该方法一般用来多次记录时间，用于求得各记录间的时间差）

`performance.now()`

该方法返回一个`DOMHighResTimeStamp`对象，该对象表示从某一时刻（译者注：某一时刻通常是 navigationStart 事件发生时刻）到调用该方法时刻的毫秒数。

属性
--

`performance.timing`

是一个`PerformanceTiming` 对象，包含延迟相关的性能信息。

`performance.navigation`

是一个 `PerformanceNavigation` 对象，该对象表示在当前给定浏览上下文中网页导航的类型（译者注：TYPE\_BACK\_FORWARD，TYPE\_NAVIGATE，TYPE\_RELOAD，TYPE\_RESERVED）以及次数。

performance.memory

在 Chrome 中添加的一个非标准扩展。
MediaList
=========

**`MediaList`** 接口表示样式表的媒体查询，例如使用了 `media` 属性的`<link>` 元素。

**备注：** `MediaList` 是一个实时列表；使用以下属性或方法更新列表会立刻更新文档的表现。

属性
--

`MediaList.mediaText` (en-US)

一个字符串转化器，返回一个`DOMString`，以文本形式表示 `MediaList`，也可以通过这个方法设置新的 `MediaList`。

`MediaList.length` (en-US) 只读 

返回 `MediaList` 中媒体查询的数量。

方法
--

`MediaList.appendMedium()` (en-US)

向 `MediaList` 中添加一个媒体查询。

`MediaList.deleteMedium()` (en-US)

从 `MediaList` 中移除一个媒体查询。

`MediaList.item()` (en-US)

一个获取函数，返回一个`CSSOMString` (en-US)，表示文本形式的媒体查询，需要提供媒体查询在 `MediaList` 中的索引位置。

示例
--

下述例子会在控制台记录 `MediaList` 的文本表示，其来自应用到当前文档的第一个样式表。


```js
const stylesheets = document.styleSheets;
let stylesheet = stylesheets[0];
console.log(stylesheet.media.mediaText);
```

规范
--

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

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

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

**WebGLUniformLocation** 接口是 WebGL API 的一部分，在一个着色器程序中表示一个统一变量的位置。

说明
--

`WebGLUniformLocation` 对象未定义任何属于自己并能直接访问其内容的方法和属性。在使用 `WebGLUniformLocation` 对象时，`WebGLRenderingContext` 的方法是有用的：

* `WebGLRenderingContext.getUniformLocation()` (en-US)
* `WebGLRenderingContext.uniform()`
示例
--

### 获取一个统一位置


```js
var canvas = document.getElementById("canvas");
var gl = canvas.getContext("webgl");

var location = gl.getUniformLocation(WebGLProgram, "uniformName");
```

规范
--

| Specification |
| --- |
| WebGL Specification # 5.10 |

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

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

参见
--

* `WebGLRenderingContext.getUniformLocation()` (en-US)
PerformanceNavigationTiming
===========================

**`PerformanceNavigationTiming`** 提供了用于存储和检索有关浏览器文档事件的指标的方法和属性。例如，此接口可用于确定加载或卸载文档需要多少时间。

性能时间线中只包含当前文档，因此性能时间线中只有一个 `PerformanceNavigationTiming` 对象。它继承了 `PerformanceResourceTiming` 和 `PerformanceEntry` 的所有属性和方法。

PerformanceEntry

PerformanceResourceTiming

PerformanceNavigationTiming
下图显示了 `PerformanceNavigationTiming` 中定义的所有时间戳属性。

![按获取文档记录的顺序列出时间戳的时间戳图](/zh-CN/docs/Web/API/PerformanceNavigationTiming/timestamp-diagram.svg)

实例属性
----

该接口扩展了 `PerformanceEntry` 属性，修订和约束以下性能条目：

`PerformanceEntry.entryType` 只读 

返回 `"navigation"`。

`PerformanceEntry.name` 只读 

返回文档的 URL。

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

返回值为 0 的 `DOMHighResTimeStamp`。

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

返回 `timestamp` 值，即 `PerformanceNavigationTiming.loadEventEnd` (en-US) 和 `PerformanceEntry.startTime` (en-US) 属性之间的差值。

该接口还扩展 `PerformanceResourceTiming` 属性，修订和约束以下性能条目：

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

返回 `"navigation"`。

该接口还支持以下属性：

`PerformanceNavigationTiming.domComplete` (en-US) 只读 

一个 `DOMHighResTimeStamp` 表示用户代理将文档的 `readyState` 设置为 `"complete"` 的时间。

`PerformanceNavigationTiming.domContentLoadedEventEnd` (en-US) 只读 

一个 `DOMHighResTimeStamp` 表示当前文档的 `DOMContentLoaded` 事件处理器结束的时间。

`PerformanceNavigationTiming.domContentLoadedEventStart` (en-US) 只读 

一个 `DOMHighResTimeStamp` 表示当前文档的 `DOMContentLoaded` 事件处理器开始的时间。

`PerformanceNavigationTiming.domInteractive` (en-US) 只读 

一个 `DOMHighResTimeStamp` 表示用户代理将文档的 `readyState` 设置为 `"interactive"` 的时间。

`PerformanceNavigationTiming.loadEventEnd` (en-US) 只读 

一个 `DOMHighResTimeStamp` 表示当前文档的 `load` 事件处理器结束的时间。

`PerformanceNavigationTiming.loadEventStart` (en-US) 只读 

一个 `DOMHighResTimeStamp` 表示当前文档的 `load` 事件处理器开始的时间。

`PerformanceNavigationTiming.redirectCount` (en-US) 只读 

表示在当前浏览上下文中上次非重定向导航以来的重定向次数的数字。

`PerformanceNavigationTiming.type` (en-US) 只读 

一个表示导航类型的字符串，取值为：`"navigate"`、`"reload"`、`"back_forward"` 或 `"prerender"`。

`PerformanceNavigationTiming.unloadEventEnd` (en-US) 只读 

一个 `DOMHighResTimeStamp` 表示当前文档的 `unload` 事件处理程序结束的时间。

`PerformanceNavigationTiming.unloadEventStart` (en-US) 只读 

一个 `DOMHighResTimeStamp` 表示当前文档的 `unload` 事件处理程序开始的时间。

实例方法
----

`PerformanceNavigationTiming.toJSON()` (en-US)

返回一个表示 `PerformanceNavigationTiming` 对象的 JSON。

规范
--

| Specification |
| --- |
| Navigation Timing Level 2 # sec-PerformanceNavigationTiming |

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

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

参见
--

* `Performance.navigation`
* `PerformanceNavigation`
媒体捕捉与媒体流 API（媒体流）
=================

**媒体捕捉与媒体流 API**（Media Capture and Streams API），通常被称为**媒体流 API**（Media Streams API、MediaStream API），是与 WebRTC 相关的 API，提供对音频或视频数据流的支持。

它提供了用于处理媒体流及其组成轨道的接口和方法、与数据格式相关的约束、异步使用数据时成功和错误的回调以及在处理期间触发的事件。

概念和用法
-----

这个 API 基于对表示音视频相关数据流的 `MediaStream` 对象的所有操作。参见获取媒体流中的示例。

一个 `MediaStream` 包含零个或多个代表各种声音和视频**轨道**的 `MediaStreamTrack` 对象。每一个 `MediaStreamTrack` 可能有一个或多个**通道**。这个通道代表着媒体流的最小单元，比如一个音频信号对应着一个对应的扬声器，像是在立体声道中的*左*声道或*右*声道。

`MediaStream` 对象有着单一的**输入**和**输出**。由 `getUserMedia()` 创建的 `MediaStream` 对象是在*本地*借助用户相机和麦克风的源输入。非本地的 `MediaStream` 可能代表一个媒体元素（如 `<video>` 或 `<audio>`），或是一个通过 WebRTC `RTCPeerConnection` API 获得的源自网络的媒体流，又或是一个使用 Web 音频 API 的 `MediaStreamAudioDestinationNode` (en-US) 创建的媒体流。

`MediaStream` 对象的输出能连接到一个**消费端**（consumer）。它可以是一个媒体元素（如 `<audio>` 或 `<video>`），也可以是 WebRTC `RTCPeerConnection` API 或 Web 音频 API 的 `MediaStreamAudioSourceNode`。

接口
--

在这些参考文章中，你将找到需要了解的构成媒体捕捉和媒体流 API 的每个接口的基本信息。

* `CanvasCaptureMediaStreamTrack`
* `InputDeviceInfo` (en-US)
* `MediaDeviceInfo` (en-US)
* `MediaDevices`
* `MediaStream`
* `MediaStreamEvent`
* `MediaStreamTrack`
* `MediaStreamTrackEvent` (en-US)
* `MediaTrackConstraints`
* `MediaTrackSettings` (en-US)
* `MediaTrackSupportedConstraints` (en-US)
* `OverconstrainedError` (en-US)
* `URL`
事件
--

* `addtrack` (en-US)
* `ended` (en-US)
* `mute` (en-US)
* `overconstrained` (en-US)
* `removetrack` (en-US)
* `unmute` (en-US)
指南和教程
-----

功能、约束和设置 (en-US)文章讨论了**约束**、**功能**以及媒体设置的概念，并包含了一个约束练习器 (en-US)，它允许你尝试应用于来自计算机音视频输入设备（如网络摄像头和麦克风）的音频和视频轨道的不同约束集的结果。

使用 getUserMedia() 拍摄静态照片文章展示了如何使用 `getUserMedia()` 来访问支持 `getUserMedia()` 的计算机或移动设备上的摄像头，并使用它拍摄照片。

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

### api.MediaStream

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

### api.MediaStreamTrack

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

### api.MediaDevices

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

### api.MediaDeviceInfo

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

### api.InputDeviceInfo

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

### api.CanvasCaptureMediaStreamTrack

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

参见
--

* WebRTC——API 介绍页面
* `mediaDevices.getUserMedia()`
* 使用 WebRTC 拍摄静态照片：有关使用 `getUserMedia()` 的演示和教程。
Location
========

**`Location`** 接口表示其链接到的对象的位置（URL）。所做的修改反映在与之相关的对象上。 `Document` 和 `Window` 接口都有这样一个链接的 Location，分别通过 `Document.location`和`Window.location` 访问。

属性
--

*`Location` 接口不继承任何属性，但是实现了那些来自 `URLUtils` 的属性。*

`Location.href`

包含整个 URL 的一个`DOMString`

`Location.protocol`

包含 URL 对应协议的一个`DOMString`，最后有一个":"。

`Location.host`

包含了域名的一个`DOMString`，可能在该串最后带有一个":"并跟上 URL 的端口号。

`Location.hostname`

包含 URL 域名的一个`DOMString`。

`Location.port` (en-US)

包含端口号的一个`DOMString`。

`Location.pathname` (en-US)

包含 URL 中路径部分的一个`DOMString`，开头有一个 `/`。

`Location.search`

包含 URL 参数的一个`DOMString`，开头有一个`“?”`。

`Location.hash`

包含块标识符的`DOMString`，开头有一个 `#`。

`Location.username` (en-US)

包含 URL 中域名前的用户名的一个`DOMString`。

`Location.password` (en-US)

包含 URL 域名前的密码的一个 `DOMString`。

`Location.origin` (en-US) 只读 

包含页面来源的域名的标准形式`DOMString`。

方法
--

*`Location` 没有继承任何方法*，但实现了来自`URLUtils`*的方法。*

`Location.assign()`

加载给定 URL 的内容资源到这个 Location 对象所关联的对象上。

`Location.reload()`

重新加载来自当前 URL 的资源。他有一个特殊的可选参数，类型为 `Boolean` (en-US)，该参数为 true 时会导致该方法引发的刷新一定会从服务器上加载数据。如果是 `false`或没有制定这个参数，浏览器可能从缓存当中加载页面。

`Location.replace()`

用给定的 URL 替换掉当前的资源。与 `assign()` 方法不同的是用 `replace()`替换的新页面不会被保存在会话的历史 `History`中，这意味着用户将不能用后退按钮转到该页面。

`Location.toString()`

返回一个`DOMString`，包含整个 URL。它和读取`URLUtils.href`的效果相同。但是用它是不能够修改 Location 的值的。

例子
--


```js
// Create anchor element and use href property for the purpose of this example
// A more correct alternative is to browse to the URL and use document.location or window.location
var url = document.createElement("a");
url.href =
  "https://developer.mozilla.org/en-US/search?q=URL#search-results-close-container";
console.log(url.href); // https://developer.mozilla.org/en-US/search?q=URL#search-results-close-container
console.log(url.protocol); // https:
console.log(url.host); // developer.mozilla.org
console.log(url.hostname); // developer.mozilla.org
console.log(url.port); // (blank - https assumes port 443)
console.log(url.pathname); // /en-US/search
console.log(url.search); // ?q=URL
console.log(url.hash); // #search-results-close-container
console.log(url.origin); // https://developer.mozilla.org
```

规范
--

| Specification |
| --- |
| HTML Standard # the-location-interface |

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

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

另见
--

* Two methods creating such an object: `Window.location` and `Document.location`.
CaretPosition
=============

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

`CaretPosition` 接口表示光标位置，即文本插入点的指示器。你可以使用 `Document.caretPositionFromPoint()` 方法获取 `CaretPosition`。

实例属性
----

*该接口不继承任何属性。*

`CaretPosition.offsetNode` 只读  
实验性

返回一个包含光标位置节点的 `Node`。

`CaretPosition.offset` 只读  
实验性

返回一个 `long`，表示光标位置在节点中的字符偏移量。

实例方法
----

`CaretPosition.getClientRect` 
实验性

返回光标范围的客户端矩形。

规范
--

| Specification |
| --- |
| CSSOM View Module # caret-position |

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

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

参见
--

* `Document.caretPositionFromPoint()`
* `Range`
* `Node`
queueMicrotask()
================

`Window` 或 `Worker` 接口的 **`queueMicrotask()`** 方法，将微任务加入队列以在控制返回浏览器的事件循环之前的安全时间执行。

微任务是一个简短的函数，它将在当前任务完成其工作后运行，并且在执行上下文的控制权返回到浏览器的事件循环之前没有其他代码等待运行时运行。

它让你的代码在运行时不会干扰任何可能具有更高优先级的代码的运行，但在浏览器重新获得对执行上下文的控制之前，这可能取决于你需要完成的工作。你可以在我们的微任务指南中了解更多关于如何使用微任务以及选择这样做的原因。

微任务的重要性在于它能够以特定顺序异步执行任务。查看在 JavaScript 中通过 queueMicrotask() 使用微任务的详情。

微任务对于需要执行最后阶段的任务或其他在渲染之前的任务的库和框架特别有用。

语法
--
```

queueMicrotask(() => {/* ... */});
```

### 参数

`function`

当浏览器引擎确定可以安全调用你的代码时执行的 `function`。微任务（microtask）的执行顺序在所有进行中的任务（pending task）完成之后，在对浏览器的事件循环产生控制（yielding control to the browser's event loop）之前。

### 返回值

无（`undefined`）。

示例
--


```js
queueMicrotask(() => {
  // 函数的内容
});
```


来自 `queueMicrotask` 的规范文档：


```js
MyElement.prototype.loadData = function (url) {
  if (this._cache[url]) {
    queueMicrotask(() => {
      this.\_setData(this._cache[url]);
      this.dispatchEvent(new Event("load"));
    });
  } else {
    fetch(url)
      .then((res) => res.arrayBuffer())
      .then((data) => {
        this._cache[url] = data;
        this.\_setData(data);
        this.dispatchEvent(new Event("load"));
      });
  }
};
```

规范
--

| Specification |
| --- |
| HTML Standard # microtask-queuing |

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

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

参见
--

* Polyfill of `queueMicrotask()` in `core-js`
* Using microtasks in JavaScript with queueMicrotask()
* Asynchronous JavaScript
* queueMicrotask explainer
* Tasks, microtasks, queues and schedules by Jake Archibald
GamepadPose
===========

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

Gamepad API的接口\*\*`GamepadPose`\*\* 表示 WebVR 的控制者在某个给定时间点的姿势， (包括方向、位置、速率、加速度信息)

这个接口通过 `Gamepad.pose` (en-US) 属性使用。

属性
--

`GamepadPose.hasOrientation` (en-US) 只读 

Returns a boolean indicating whether the gamepad is capable of returning orientation information (`true`) or not (`false`).

`GamepadPose.hasPosition` (en-US) 只读 

Returns a boolean indicating whether the gamepad is capable of returning position information (`true`) or not (`false`).

`GamepadPose.position` (en-US) 只读 

Returns the position of the `Gamepad` as a 3D vector.

`GamepadPose.linearVelocity` (en-US) 只读 

Returns the linear velocity of the `Gamepad`, in meters per second.

`GamepadPose.linearAcceleration` (en-US) 只读 

Returns the linear acceleration of the `Gamepad`, in meters per second per second.

`GamepadPose.orientation` (en-US) 只读 

Returns the orientation of the `Gamepad`, as a quarternion value.

`GamepadPose.angularVelocity` (en-US) 只读 

Returns the angular velocity of the `Gamepad`, in radians per second.

`GamepadPose.angularAcceleration` (en-US) 只读 

Returns the angular acceleration of the `Gamepad`, in meters per second per second.

Examples
--------

TBD.

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

| Specification |
| --- |
| Gamepad Extensions # gamepadpose-interface |

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

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

See also
--------

* WebVR API
* Gamepad API