首先回顾一下以前了解过的Web API（强确实强，但很少用到…）
Intersection Observer API Intersection Observer API 提供了一种异步检测目标元素与祖先元素或 viewport 相交情况变化的方法。
Fullscreen API 全屏 API 为使用用户的整个屏幕展现网络内容提供了一种简单的方式，并且在不需要时退出全屏模式。这种 API 让你可以简单地控制浏览器，使得一个元素与其子元素，如果存在的话，可以占据整个屏幕，并在此期间，从屏幕上隐藏所有的浏览器用户界面以及其他应用。
Notifications API Notifications API 允许网页控制向最终用户显示系统通知 —这些都在顶级浏览上下文视口之外，因此即使用户已经切换标签页或移动到不同的应用程序，也可以显示。该API被设计成与不同平台上的现有通知系统兼容。
Resize Observer API Resize Observer API提供了一种高性能的机制，通过该机制，代码可以监视元素的大小更改，并且每次大小更改时都会向观察者传递通知。
Window.matchMedia 通过JS进行媒体查询，返回一个MediaQueryList对象，在页面满足指定的媒体查询规则时触发绑定的事件处理器；
mqList = window.matchMedia(mediaQueryString); //返回MediaQueryList对象 MediaQueryList.addListener(MediaQueryListListener listener); MediaQueryList.removeListener(MediaQueryListListener listener);
MutationObserver MutationObserver 接口提供了监视对 DOM 树所做更改的能力，它被设计为旧的 Mutation Events 功能的替代品，该功能是 DOM3 Events 规范的一部分。
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()
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)); // 𠮷
EyeDropper API EyeDropper API提供了一种创建吸管工具的机制。使用这个工具，用户可以从他们的屏幕上采样颜色，包括浏览器窗口之外的颜色，该API目前只有Chrome浏览器支持。
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.动画控制
Animation.cancel()，清除此动画的所有keyframeEffects ，并中止播放。 Animation.finish()，设置动画中止播放。 Animation.pause() ，暂停播放动画。. Animation.play()，开始或恢复播放动画，或者如果之前完成，则重新开始动画。 Animation.reverse() ，反转播放动画，直到播放到动画开始时停止。如果动画完成或未播放，它将从头到尾播放。
EventSource
