Web API参考

[coconilu]

介绍

Web API 是浏览器（也叫用户代理）需要提供给开发者的一套API。

分类

MDN维护了一份 API 参考列表。
但是没有对它们分类，我简单对一些常用的API进行了分类。

1. DOM 相关

除了之前提到过的：EventTarget、Node、Document、Element、Window。
还有下面的：

1. Attr，表示一个DOM元素的属性。
2. CSS，涵盖CSS相关的实用方法。
3. DocumentFragment，表示一个没有父级文件的最小文档对象。
4. DomParser，可以将存储在字符串中的XML或HTML源代码解析为一个 DOM文档。
5. DataTransfer，在进行拖放操作时，DataTransfer 对象用来保存，通过拖放动作，拖动到浏览器的数据。
6. MutationObserver，给开发者们提供了一种能在某个范围内的DOM树发生变化时作出适当反应的能力。
7. TreeWalker，表示一个当前文档的子树中的所有节点及其位置。

2. 浏览器相关

1. History，允许操作浏览器的曾经在标签页或者框架里访问的会话历史记录。

back()，回退
forward()，前进
go(step)

HTML5 新增了几个API， history.pushState() 和 history.replaceState() 方法，它们分别可以添加和修改历史记录条目。这些方法通常与window.onpopstate 配合使用，用于无刷新变更历史记录。——他们的作用非常大，可以做到改变网址却不需要刷新页面，这个特性后来用到了单页面应用中。

pushState(stateObj, title, URL)
replaceState(stateObj, title, URL)

第三个参数RUL必须是同域的。

popstate事件，window.addEventListener('popstate', cb)

调用history.pushState()或者history.replaceState()不会触发popstate事件. popstate事件只会在浏览器某些行为下触发, 比如点击后退、前进按钮(或者在JavaScript中调用history.back()、history.forward()、history.go()方法)

2. IDBIndex，让程序可以异步存取 indexed databases。
3. Location，表示其链接到的对象的位置（URL）。
4. Navigator，表示用户代理的状态和标识。
5. Notification，用于向用户配置和显示桌面通知。
6. Screen，表示屏幕。
7. Storage，作为 Web Storage API 的接口，Storage 提供了访问特定域名下的会话存储（session storage）或本地存储（local storage）的功能，例如，可以添加、修改或删除存储的数据项。

3. 系统相关

1. ClipBoard，提供了一种读写操作系统剪贴板的方式。
2. Console，提供对浏览器控制台的接入。
3. File，提供有关文件的信息，并允许网页中的 JavaScript 访问其内容。

通常情况下， File 对象是来自用户在一个   <input> 元素上选择文件后返回的 FileList 对象；
也可以是来自由拖放操作生成的 DataTransfer 对象；
或者来自 HTMLCanvasElement 上的 mozGetAsFile() API。

File 对象是特殊类型的 Blob，且可以用在任意的 Blob 类型的 context 中。
比如说， FileReader, URL.createObjectURL(), createImageBitmap(), 及 XMLHttpRequest.send() 都能处理 Blob  和 File。

4. FileReader，允许Web应用程序异步读取存储在用户计算机上的文件（或原始数据缓冲区）的内容，使用 File 或 Blob 对象指定要读取的文件或数据。
5. Performance，可以获取到当前页面中与性能相关的信息。

4. 网络请求

1. Fetch，提供了一个获取资源的接口（包括跨域）。
2. FormData，利用FormData对象,我们可以通过JavaScript用一些键值对来模拟一系列表单控件。
3. XMLHttpRequest，为客户端提供了在客户端和服务器之间传输数据的功能。

4.1 Fetch

Fetch 的核心在于对 HTTP 接口的抽象，包括 Request，Response，Headers，Body，以及用于初始化异步请求的 global fetch。Fetch 还利用到了请求的异步特性——它是基于 Promise 的。

使用方式：

Promise<Response> fetch(input[, init]);

?input，定义要获取的资源。这可能是：
一个 USVString 字符串，包含要获取资源的 URL。一些浏览器会接受 blob: 和 data: 作为 schemes.
一个 Request 对象。

init（可选），一个配置项对象，包括所有对请求的设置。可选的参数有：
method: 请求使用的方法，如 GET、POST。
headers: 请求的头信息，形式为 Headers 的对象或包含 ByteString 值的对象字面量。
body: 请求的 body 信息：可能是一个 Blob、BufferSource、FormData、URLSearchParams 或者 USVString 对象。注意 GET 或 HEAD 方法的请求不能包含 body 信息。
mode: 请求的模式，如 cors、 no-cors 或者 same-origin。
credentials: 请求的 credentials，如 omit、same-origin 或者 include。为了在当前域名内自动发送 cookie ， 必须提供这个选项， 从 Chrome 50 开始， 这个属性也可以接受 FederatedCredential 实例或是一个 PasswordCredential 实例。
cache:  请求的 cache 模式: default 、 no-store 、 reload 、 no-cache 、 force-cache 或者 only-if-cached 。
redirect: 可用的 redirect 模式: follow (自动重定向), error (如果产生重定向将自动终止并且抛出一个错误), 或者 manual (手动处理重定向). 在Chrome中，Chrome 47之前的默认值是 follow，从 Chrome 47开始是 manual。
referrer: 一个 USVString 可以是 no-referrer、client或一个 URL。默认是 client。
referrerPolicy: Specifies the value of the referer HTTP header. May be one of no-referrer、 no-referrer-when-downgrade、 origin、 origin-when-cross-origin、 unsafe-url 。
integrity: 包括请求的  subresource integrity 值 （ 例如： sha256-BpfBw7ivV8q2jLiT13fxDYAe2tJllusRSZ273h2nFSE=）。

相关接口

Body（由Request 和Response实现）：
Body.bodyUsed，指示body是否被读取过的 Boolean 值。
Body.arrayBuffer()，使用一个buffer数组来读取 Response流中的数据，并将bodyUsed状态改为已使用。
Body.blob()，使用一个Blob对象来读取 Response流中的数据，并将bodyUsed状态改为已使用。
Body.formData()，使用一个 FormData 对象来读取 Response流中的数据，并将bodyUsed状态改为已使用。
Body.json()，使用一个 JSON 对象来读取 Response流中的数据，并将bodyUsed状态改为已使用。
Body.text()，使用一个USVString (文本) 对象来读取 Response流中的数据，并将bodyUsed状态改为已使用。

Headers（Request.headers 和Response.headers）：
Headers.append()，给现有的header添加一个值, 或者添加一个未存在的header并赋值.
Headers.delete()，从Headers对象中删除指定header.
Headers.entries()，以 迭代器 的形式返回Headers对象中所有的键值对.
Headers.get()，从Headers对象中返回指定header的第一个值.
Headers.getAll()，以数组的形式从Headers对象中返回指定header的全部值.
Headers.has()，以布尔值的形式从Headers对象中返回是否存在指定的header.
Headers.keys()，以迭代器的形式返回Headers对象中所有存在的header名.
Headers.set()，替换现有的header的值, 或者添加一个未存在的header并赋值.
Headers.values()，以迭代器的形式返回Headers对象中所有存在的header的值.

Response：
Response.type（只读），包含Response的类型 (例如, basic, cors).
Response.url（只读），包含Response的URL.
Response.useFinalURL，包含了一个布尔值来标示这是否是该Response的最终URL.
Response.status （只读），包含Response的状态码 (例如, 200 成功).
Response.ok （只读），包含了一个布尔值来标示该Response成功(状态码200-299) 还是失败.
Response.redirected （只读），表示该Response是否来自一个重定向，如果是的话，它的URL列表将会有多个.
Response.statusText （只读），包含了与该Response状态码一致的状态信息 (例如, OK对应200).
Response.headers （只读），包含此Response所关联的Headers 对象.

Request：
new Request(input, init)，跟fetch(input[, init]);一样

4.2 XMLHttpRequest

LEVEL 1：
受同源策略的限制，不能发送跨域请求；
不能发送二进制文件（如图片、视频、音频等），只能发送纯文本数据；
在发送和获取数据的过程中，无法实时获取进度信息，只能判断是否完成；

LEVEL 2：
可以发送跨域请求，在服务端允许的情况下；
支持发送和接收二进制数据；
新增formData对象，支持发送表单数据；
发送和获取数据时，可以获取进度信息；
可以设置请求的超时时间；

实例属性

readyState：

0：UNSENT（代理被创建，但尚未调用 open() 方法。）；
1：OPENED（open() 方法已经被调用。）；
2：HEADERS_RECEIVED（send() 方法已经被调用，并且头部和状态已经可获得。）；
3：LOADING（下载中； responseText 属性已经包含部分数据。）；
4：DONE（下载操作已完成。）

onreadystatechange：只要 readyState 属性发生变化，就会调用相应的处理函数。
timeout：默认值为 0，意味着没有超时。
status：http响应数字状态码。
statusText：stateState为3、4时，赋值为"OK"
response：返回响应的正文。可以是 ArrayBuffer, Blob, Document, JavaScript对象 或 一个 DOMString 类型
responseType：default：DOMString；"arraybuffer"：ArrayBuffer；"blob"：Blob；"document"：Document；"text"：“DOMString”
responseURL：当URL被返回的时候，任何包含在URL # 后面的fragment都会被删除。
upload：返回一个 XMLHttpRequestUpload对象，表示上传的进度。
withCredentials：一个Boolean类型，它指示了是否该使用类似cookies,authorization headers(头部授权)或者TLS客户端证书这一类资格证书来创建一个跨站点访问控制（cross-site Access-Control）请求。

实例方法

open(method, url, async, user, password)：初始化一个请求。
send([data])：用于发送 HTTP 请求。
abort()：终止该请求。readyState 属性将被置为0（ UNSENT )。
getAllResponseHeaders()：返回所有的响应头.
getResponseHeader()：返回包含指定头文本的字符串。
setRequestHeader()：设置HTTP请求头部的方法。此方法必须在 open() 方法和 send() 之间调用。

5. 多线程

1. Worker，代表一个可以轻松创建的后台任务，并可以将消息发送回其创建者。
2. ShareWork，代表一种特定类型的工作者，可以从几个浏览上下文中访问，例如几个窗口，内联框架或甚至工作者。
3. ServiceWorker，提供一个对一个服务工作者的引用。 多个浏览上下文（例如页面，工作者等）可以与相同的服务工作者相关联，每个都通过唯一的ServiceWorker对象。

6. 通信

1. MessageChannel，允许我们创建一个新的消息通道，并通过它的两个MessagePort 属性发送数据。
2. RTCDataChannel，代表在两者之间建立了一个双向数据通道的连接。
3. WebSockets，是一个可以创建和服务器间进行双向会话的高级技术。
4. Transferable，代表一个能在不同可执行上下文中相互传递的对象，列如主线程和 Worker 间。它也没有定义任何方法和属性；它只是一个标签，用来指示对象在特定场合可用。
5. URL，一个包含若干静态方法的对象，用来创建 URLs。URL.createObjectURL()：返回一个DOMString ，包含一个唯一的blob链接。

7. 数据结构

1. TypeArray，描述一个底层的二进制数据缓存区的一个类似数组(array-like)视图。
2. Blob，表示一个不可变、原始数据的类文件对象。Blob 表示的不一定是JavaScript原生格式的数据。File 接口基于Blob，继承了 blob 的功能并将其扩展使其支持用户系统上的文件。从Blob中读取内容的唯一方法是使用 FileReader。
3. ArrayBuffer，用来表示通用的、固定长度的原始二进制数据缓冲区。

8. 安全

1. Crypto，提供了基本的加密功能，可用于当前的上下文中。它允许访问一个密码强度的随机数生成器和 cryptographic primitives。

9. 优化

1. requestAnimationFrame，告诉浏览器您希望执行动画并请求浏览器在下一次重绘之前调用指定的函数来更新动画。该方法使用一个回调函数作为参数，这个回调函数会在浏览器重绘之前调用。

2. DocumentFragment，表示一个没有父级文件的最小文档对象。它被当做一个轻量版的 Document 使用，用于存储已排好版的或尚未打理好格式的XML片段。最大的区别是因为DocumentFragment不是真实DOM树的一部分，它的变化不会引起DOM树的重新渲染的操作(reflow) ，且不会导致性能等问题。

3. requestIdleCallback，会在浏览器空闲时期依次调用函数， 这就可以让开发者在主事件循环中执行后台或低优先级的任务，而且不会对像动画和用户交互这样延迟触发而且关键的事件产生影响。函数一般会按先进先调用的顺序执行，除非函数在浏览器调用它之前就到了它的超时时间。

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

9.1 window.requestAnimationFrame

细节：

1. requestAnimationFrame的优势，在于充分利用显示器的刷新机制，比较节省系统资源。
2. 设置这个API的目的是为了让各种网页动画效果（DOM动画、Canvas动画、SVG动画、WebGL动画）能够有一个统一的刷新机制，从而节省系统资源，提高系统性能，改善视觉效果。
3. 此外，使用这个API，一旦页面不处于浏览器的当前标签，就会自动停止刷新。这就节省了CPU、GPU和电力。

API：

window.requestAnimationFrame(callback);

callback：
一个指定函数的参数，该函数在下次重新绘制动画时调用。这个回调函数只有一个传参，DOMHighResTimeStamp，指示requestAnimationFrame() 开始触发回调函数的当前时间（performance.now() 返回的时间）。

返回值：
一个 long 整数，请求 ID ，是回调列表中唯一的标识。是个非零值，没别的意义。你可以传这个值给 window.cancelAnimationFrame() 以取消回调函数。

window.cancelAnimationFrame()，取消requestAnimationFrame注册的回调。

9.2 window.requestIdleCallback

var handle = window.requestIdleCallback(callback[, options])

callback：
一个即将被调用的函数的引用。函数会接收到一个名为 deadline 的参数，它具有如下属性 :
    timeRemaining：一个返回DOMHighResTimeStamp的函数的引用
    didTimeout： 布尔型，如果 callback 在空闲时间被客户端执行，它的值为 false，其他情况它的值为 true(例如：options 中给了超时时间，并且在超时过期时仍没有足够的空闲时间)。

options：
包括可选的配置参数。具有如下属性：
    timeout：timeout 值被指定为正数时，当做浏览器调用 callback 的最后期限。它的单位是毫秒。

返回值：
一个无符号长整数，可以把它传入 Window.cancelIdleCallback() 方法，来结束回调

9.3 window.performance

属性：
navigation，对象，提供了在指定的时间段里发生的操作相关信息，包括页面是加载还是刷新、发生了多少次重定向等等。
onresourcetimingbufferfull，事件处理器，当触发 resourcetimingbufferfull 事件的时候会被调用。
timeOrigin，数值，返回性能测量开始时的时间的高精度时间戳。
timing，对象，包含延迟相关的性能信息。

方法：
clearMarks()
clearMeasures()
clearResourceTimings() 
getEntries()
getEntriesByName() 
getEntriesByType()
mark()，标记
measure(name, startMark, endMark)，测量
now()
setResourceTimingBufferSize()
toJSON()

参考

Web API接口
使用 Fetch
分时函数/requestAnimationFrame优化页面数据渲染