记录一些在此之前不知道的Web API

首先回顾一下以前了解过的 Web API（强确实强，但很少用到 …）

Intersection Observer API 

Intersection Observer API 提供了一种异步检测目标元素与祖先元素或 viewport 相交情况变化的方法。

相关文档：https://developer.mozilla.org/zh-CN/docs/Web/API/Intersection_Observer_API 

Fullscreen API 

全屏 API 为使用用户的整个屏幕展现网络内容提供了一种简单的方式，并且在不需要时退出全屏模式。这种 API 让你可以简单地控制浏览器，使得一个元素与其子元素，如果存在的话，可以占据整个屏幕，并在此期间，从屏幕上隐藏所有的浏览器用户界面以及其他应用。

相关文档：https://developer.mozilla.org/zh-CN/docs/Web/API/Fullscreen_API

Notifications API 

Notifications API 允许网页控制向最终用户显示系统通知 —这些都在顶级浏览上下文视口之外，因此即使用户已经切换标签页或移动到不同的应用程序，也可以显示。该 API 被设计成与不同平台上的现有通知系统兼容。

相关文档：https://developer.mozilla.org/zh-CN/docs/Web/API/Notifications_API

Resize Observer API 

Resize Observer API 提供了一种高性能的机制，通过该机制，代码可以监视元素的大小更改，并且每次大小更改时都会向观察者传递通知。

相关文档：https://developer.mozilla.org/zh-CN/docs/Web/API/Resize_Observer_API

Window.matchMedia

通过 JS 进行媒体查询，返回一个 MediaQueryList 对象，在页面满足指定的媒体查询规则时触发绑定的事件处理器；

mqList = window.matchMedia(mediaQueryString); // 返回 MediaQueryList 对象
MediaQueryList.addListener(MediaQueryListListener listener);
MediaQueryList.removeListener(MediaQueryListListener listener);

相关文档：https://developer.mozilla.org/zh-CN/docs/Web/API/Window/matchMedia 

MutationObserver

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

相关文档：https://developer.mozilla.org/zh-CN/docs/Web/API/MutationObserver 

Broadcast Channel API

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

// 连接到广播频道
var bc = new BroadcastChannel('test_channel');
// 发送简单消息的示例
bc.postMessage('This is a test message.');
// 简单示例，用于将事件打印到控制台
bc.onmessage = function (ev) {console.log(ev); }
// 断开频道连接
bc.close()

相关文档：https://developer.mozilla.org/zh-CN/docs/Web/API/Broadcast_Channel_API 

Encoding API 

Encoding API 提供了一种机制来处理各种字符编码文本，包括传统的非 UTF-8 编码。实现对字符串和字节流互转。

// 字符串转字节流
const encoder = new TextEncoder()
const view = encoder.encode('€')
console.log(view); // Uint8Array(3) [226, 130, 172]

// 字节转字符串
let utf8decoder = new TextDecoder(); // default 'utf-8' or 'utf8'

let u8arr = new Uint8Array([240, 160, 174, 183]);
let i8arr = new Int8Array([-16, -96, -82, -73]);
let u16arr = new Uint16Array([41200, 47022]);
let i16arr = new Int16Array([-24336, -18514]);
let i32arr = new Int32Array([-1213292304]);

console.log(utf8decoder.decode(u8arr)); // 𠮷
console.log(utf8decoder.decode(i8arr)); // 𠮷
console.log(utf8decoder.decode(u16arr)); // 𠮷
console.log(utf8decoder.decode(i16arr)); // 𠮷
console.log(utf8decoder.decode(i32arr)); // 𠮷

相关文档：https://developer.mozilla.org/zh-CN/docs/Web/API/Encoding_API

EyeDropper API 

EyeDropper API 提供了一种创建吸管工具的机制。使用这个工具，用户可以从他们的屏幕上采样颜色，包括浏览器窗口之外的颜色，该 API 目前只有 Chrome 浏览器支持。

相关文档：https://developer.mozilla.org/en-US/docs/Web/API/EyeDropper_API

Web Animations API 

web 动画 API 可以让我们用 JavaScript 写动画并且控制动画。通过 Web 动画 API，我们可以将交互式动画从样式表移动到 JavaScript，将表现与行为分开。

1. 创建帧动画

// 创建帧对象
var aliceTumbling = [{ transform: 'rotate(0) translate3D(-50%, -50%, 0)', color: '#000' },
  {color: '#431236', offset: 0.3},
  {transform: 'rotate(360deg) translate3D(-50%, -50%, 0)', color: '#000' }
];

每个对象代表原始 CSS 中的一个键。与 CSS 不同，Web 动画 API 不需要明确地告知每个键出现的动画的百分比。它将根据您给出的按键数量自动将动画划分为相等的部分。当想要明确地设置一个键与其他键的偏移量时，可以直接在对象中指定一个偏移量，并与逗号分隔。

必须至少指定两个关键帧（表示动画序列的开始和结束状态）. 如果您的关键帧列表只有一个条目，Element.animate() 将抛出不支持的异常报错。

2. 时间属性

// 描述动画的时间
var aliceTiming = {
  duration: 3000,
  iterations: Infinity
}

3. 播放动画

// 指定 dom 对象，播放动画
// 返回 Animation 对象
document.getElementById("alice").animate(
  aliceTumbling,
  aliceTiming
)

4. 动画控制

1. Animation.cancel()，清除此动画的所有 keyframeEffects，并中止播放。
2. Animation.finish()，设置动画中止播放。
3. Animation.pause()，暂停播放动画。.
4. Animation.play()，开始或恢复播放动画，或者如果之前完成，则重新开始动画。
5. Animation.reverse()，反转播放动画，直到播放到动画开始时停止。如果动画完成或未播放，它将从头到尾播放。

EventSource

服务端推送：https://developer.mozilla.org/zh-CN/docs/Web/API/EventSource