Server-Sent Events 简介 服务器向客户端推送数据，有很多解决方案。除了“轮询” 和 WebSocket，HTML 5 还提供了 Server-Sent Events（以下简称 SSE）。 一般来说，HTTP 协议只能客户端向服务器发起请求，服务器不能主动向客户端推送。但是有一种特殊情况，就是服务器向客户端声明，接下来要发送的是流信息（streaming）。也就是说，发送的不是一次性的数据包，而是一个数据流，会连续不断地发送过来。这时，客户端不会关闭连接，会一直等着服务器发过来的新的数据流。本质上，这种通信就是以流信息的方式，完成一次用时很长的下载。 SSE 就是利用这种机制，使用流信息向浏览器推送信息。它基于 HTTP 协议，目前除了 IE/Edge，其他浏览器都支持。 与 WebSocket 的比较 SSE 与 WebSocket 作用相似，都是建立浏览器与服务器之间的通信渠道，然后服务器向浏览器推送信息。 总体来说，WebSocket 更强大和灵活。因为它是全双工通道，可以双向通信；SSE 是单向通道，只能服务器向浏览器发送，因为 streaming 本质上就是下 ...

Page Visibility API 简介 有时候，开发者需要知道，用户正在离开页面。常用的方法是监听下面三个事件。 pagehide beforeunload unload 但是，这些事件在手机上可能不会触发，页面就直接关闭了。因为手机系统可以将一个进程直接转入后台，然后杀死。 用户点击了一条系统通知，切换到另一个 App。 用户进入任务切换窗口，切换到另一个 App。 用户点击了 Home 按钮，切换回主屏幕。 操作系统自动切换到另一个 App（比如，收到一个电话）。 上面这些情况，都会导致手机将浏览器进程切换到后台，然后为了节省资源，可能就会杀死浏览器进程。 以前，页面被系统切换，以及系统清除浏览器进程，是无法监听到的。开发者想要指定，任何一种页面卸载情况下都会执行的代码，也是无法做到的。为了解决这个问题，就诞生了 Page Visibility API。不管手机或桌面电脑，所有情况下，这个 API 都会监听到页面的可见性发生变化。 这个新的 API 的意义在于，通过监听网页的可见性，可以预判网页的卸载，还可以用来节省资源，减缓电能的消耗。比如，一旦用户不看网页 ...

Page Lifecycle API Android、iOS 和最新的 Windows 系统可以随时自主地停止后台进程，及时释放系统资源。也就是说，网页可能随时被系统丢弃掉。以前的浏览器 API 完全没有考虑到这种情况，导致开发者根本没有办法监听到系统丢弃页面。 为了解决这个问题，W3C 新制定了一个 Page Lifecycle API，统一了网页从诞生到卸载的行为模式，并且定义了新的事件，允许开发者响应网页状态的各种转换。 有了这个 API，开发者就可以预测网页下一步的状态，从而进行各种针对性的处理。Chrome 68 支持这个 API，对于老式浏览器可以使用谷歌开发的兼容库 PageLifecycle.js。 生命周期阶段 网页的生命周期分成六个阶段，每个时刻只可能处于其中一个阶段。 （1）Active 阶段 在 Active 阶段，网页处于可见状态，且拥有输入焦点。 （2）Passive 阶段 在 Passive 阶段，网页可见，但没有输入焦点，无法接受输入。UI 更新（比如动画）仍然在执行。该阶段只可能发生在桌面同时有多个窗口的情况。 （3）Hidden 阶段 在 Hidd ...

Intl.RelativeTimeFormat 很多日期库支持显示相对时间，比如“昨天”、“五分钟前”、“两个月之前”等等。由于不同的语言，日期显示的格式和相关词语都不同，造成这些库的体积非常大。 现在，浏览器提供内置的 Intl.RelativeTimeFormat API，可以不使用这些库，直接显示相对时间。 基本用法 Intl.RelativeTimeFormat()是一个构造函数，接受一个语言代码作为参数，返回一个相对时间的实例对象。如果省略参数，则默认传入当前运行时的语言代码。 12345678910const rtf = new Intl.RelativeTimeFormat('en');rtf.format(3.14, 'second') // "in 3.14 seconds"rtf.format(-15, 'minute') // "15 minutes ago"rtf.format(8, 'hour') // "in 8 hours&qu ...

IntersectionObserver 网页开发时，常常需要了解某个元素是否进入了“视口”（viewport），即用户能不能看到它。 上图的绿色方块不断滚动，顶部会提示它的可见性。 传统的实现方法是，监听到scroll事件后，调用目标元素（绿色方块）的getBoundingClientRect()方法，得到它对应于视口左上角的坐标，再判断是否在视口之内。这种方法的缺点是，由于scroll事件密集发生，计算量很大，容易造成性能问题。 IntersectionObserver API，可以自动“观察”元素是否可见，Chrome 51+ 已经支持。由于可见（visible）的本质是，目标元素与视口产生一个交叉区，所以这个 API 叫做“交叉观察器”（intersection oberserver）。 简介 IntersectionObserver API 的用法，简单来说就是两行。 12var observer = new IntersectionObserver(callback, options);observer.observe(target); 上面代码中，Intersecti ...

Geolocation API Geolocation API 用于获取用户的地理位置。 由于该功能涉及用户隐私，所以浏览器会提示用户，是否同意给出地理位置，用户可能会拒绝。另外，这个 API 只能在 HTTPS 环境使用。 浏览器通过navigator.geolocation属性提供该 API。 Geolocation 对象 navigator.geolocation属性返回一个 Geolocation 对象。该对象具有以下三个方法。 Geolocation.getCurrentPosition()：返回一个 Position 对象，表示用户的当前位置。 Geolocation.watchPosition()：指定一个监听函数，每当用户的位置发生变化，就执行该监听函数。 Geolocation.clearWatch()：取消watchPosition()方法指定的监听函数。 Geolocation.getCurrentPosition() Geolocation.getCurrentPosition()方法用于获取用户的位置。 1navigator.geolocation.get ...

FontFace API FontFace API 用来控制字体加载。 这个 API 提供一个构造函数FontFace()，返回一个字体对象。 1new FontFace(family, source, descriptors) FontFace()构造函数接受三个参数。 family：字符串，表示字体名，写法与 CSS 的@font-face的font-family属性相同。 source：字体文件的 URL（必须包括 CSS 的url()方法），或者是一个字体的 ArrayBuffer 对象。 descriptors：对象，用来定制字体文件。该参数可选。 123456var fontFace = new FontFace( 'Roboto', 'url(https://fonts.example.com/roboto.woff2)');fontFace.family // "Roboto" FontFace()返回的是一个字体对象，这个对象包含字体信息。注意，这时字体文件还没有开始加载。 字体对象包含以下属性。 ...

Fetch API 教程 fetch()是 XMLHttpRequest 的升级版，用于在 JavaScript 脚本里面发出 HTTP 请求。 浏览器原生提供这个对象。本章详细介绍它的用法。 基本用法 fetch()的功能与 XMLHttpRequest 基本相同，但有三个主要的差异。 （1）fetch()使用 Promise，不使用回调函数，因此大大简化了写法，写起来更简洁。 （2）fetch()采用模块化设计，API 分散在多个对象上（Response 对象、Request 对象、Headers 对象），更合理一些；相比之下，XMLHttpRequest 的 API 设计并不是很好，输入、输出、状态都在同一个接口管理，容易写出非常混乱的代码。 （3）fetch()通过数据流（Stream 对象）处理数据，可以分块读取，有利于提高网站性能表现，减少内存占用，对于请求大文件或者网速慢的场景相当有用。XMLHTTPRequest 对象不支持数据流，所有的数据必须放在缓存里，不支持分块读取，必须等待全部拿到后，再一次性吐出来。 在用法上，fetch()接受一个 URL 字符串作为参数，默 ...

剪贴板操作 Clipboard API 教程 简介 浏览器允许 JavaScript 脚本读写剪贴板，自动复制或粘贴内容。 一般来说，脚本不应该改动用户的剪贴板，以免不符合用户的预期。但是，有些时候这样做确实能够带来方便，比如“一键复制”功能，用户点击一下按钮，指定的内容就自动进入剪贴板。 目前，一共有三种方法可以实现剪贴板操作。 Document.execCommand()方法 异步的 Clipboard API copy事件和paste事件 本文逐一介绍这三种方法。 Document.execCommand() 方法 Document.execCommand()是操作剪贴板的传统方法，各种浏览器都支持。 它支持复制、剪切和粘贴这三个操作。 document.execCommand('copy')（复制） document.execCommand('cut')（剪切） document.execCommand('paste')（粘贴） （1）复制操作 复制时，先选中文本，然后调用document.execCommand('copy')，选中的文本就会进入剪贴板。 123con ...