Animation Timing
- Window.requestAnimationFrame(callback)： 告诉浏览器希望执行一个动画，让浏览器在下一个动画帧安排一次网页重绘（类似于 setTimeout，但是更精确）
- 该函数返回一个唯一标识符，在取消动画请求时使用
- callback： 你希望调用的函数
使用上面函数的方法是 反复调用 即可。
| 12345 | // 使用 setTimeout 模拟 requestAnimationFrame// 1秒 内刷新 60次function( callback ){window.setTimeout(callback, 1000 / 60);}; |
- Window.cancelAnimationFrame(requestID)： 取消对应 requestID 的动画请求
使用 requestAnimationFrame 的目的是为了让各种网页动画效果（DOM动画、Canvas动画、SVG动画、WebGL动画）能够有一个统一的刷新机制，从而节省系统资源，提高系统性能，改善视觉效果。
requestAnimationFrame 的优势，在于充分利用显示器的刷新机制，比较节省系统资源。显示器有固定的刷新频率（60Hz 或 75Hz），也就是说，每秒最多只能重绘 60次 或 75次，requestAnimationFrame 的基本思想就是与这个刷新频率保持同步，利用这个刷新频率进行页面重绘。此外，使用这个 API，一旦页面不处于浏览器的当前标签，就会自动停止刷新。这就节省了 CPU、GPU 和电力。
不过有一点需要注意，requestAnimationFrame 是在主线程上完成。这意味着，如果主线程非常繁忙，requestAnimationFrame 的动画效果会大打折扣。
Fullscreen API
Fullscreen API Living Standard — Last Updated 24 February 2017
使用以下方法需要带上浏览器前缀。
- Element.requestFullscreen()： 发出一个异步请求，使指定元素全屏显示
| 123456789101112 | // 兼容各个浏览器function launchFullscreen(element) {if(element.requestFullscreen) {element.requestFullscreen();} else if(element.mozRequestFullScreen) {element.mozRequestFullScreen();} else if(element.msRequestFullscreen){element.msRequestFullscreen();} else if(element.webkitRequestFullscreen) {element.webkitRequestFullScreen();}} |
- Document.exitFullscreen()： 取消全屏
| 123456789101112 | // 兼容各个浏览器function exitFullscreen() {if (document.exitFullscreen) {document.exitFullscreen();} else if (document.msExitFullscreen) {document.msExitFullscreen();} else if (document.mozCancelFullScreen) {document.mozCancelFullScreen();} else if (document.webkitExitFullscreen) {document.webkitExitFullscreen();}} |
- Document.fullscreenElement： 返回当前处于全屏的节点
| 12 | // 兼容各个浏览器var fullscreenElement = document.fullscreenElement || document.mozFullScreenElement || document.webkitFullscreenElement; |
- Document.fullscreenEnabled： 返回一个布尔值，表示当前文档是否可以切换到全屏状态
| 12 | // 兼容各个浏览器var fullscreenEnabled = document.fullscreenEnabled || document.mozFullScreenEnabled || document.webkitFullscreenEnabled || document.msFullscreenEnabled; |
Page Visibility API
PageVisibility API 用于判断页面是否处于浏览器的当前窗口，即是否可见
- Document.hidden： 只读属性，返回一个布尔值标识当前页面是否隐藏（hidden）
- Document.visibilityState： 只读属性，表示当前页面的状态，可以取三个值，分别是 visibile（页面可见）、hidden（页面不可见）、prerender（页面正处于渲染之中，不可见）
- visibilitychange 事件： 当当前页面状态发生变化时触发
| 1234 | // 小测试document.addEventListener(“visibilitychange”, function() {console.log( document.visibilityState );}); |
Geolocation API
Geolocation 接口是一个用来获取设备地理位置的可编程的对象，它可以让Web内容访问到设备的地理位置，这将允许Web应用基于用户的地理位置提供定制的信息。
-
navigator.geolocation： 只读属性，返回一个 Geolocation 对象，通过这个对象可以访问到设备的位置信息
-
Geolocation.getCurrentPosition(success, error, options)： 获取设备当前位置
- Geolocation.watchPosition(success[, error[, options]])： 注册监听器，在设备的地理位置发生改变的时候自动被调用，返回一个唯一标识符
- Geolocation.clearWatch(id)： 清除指定 ID 的监听器
这个 API 在本机上试验时，暂时还没有一次成功获得到地理位置，以后成功补。
Web Notification API
Notification 对象使用来为用户设置和显示桌面通知。
-
new Notification(title, options)
- title： 显示通知的标题
- options： 一个用来设置通知的对象（下面只列出部分参数，全部参数看这里）
- dir： 文字的方向， auto（自动）, ltr（从左到右）, rtl（从右到左）
- lang： 指定通知中所使用的语言
- body： 通知中额外显示的字符串
- tag： 赋予通知一个 ID，以便在必要的时候对通知进行刷新、替换或移除。
- icon： 一个图片的URL，将被用于显示通知的图标。
-
事件
- click 事件： 用户点击通知时触发
- show 事件： 通知显示时触发
- error 事件： 通知遇到错误时触发
- close 事件： 用户关闭通知时触发
-
Notification.permission： 静态只读属性，返回一个状态字符串（granted、denied、default），可以用来判断当前页面是否允许显示通知
- Notification.requestPermission()： 静态方法，返回一个 Promise 对象，用于向用户申请当前页面显示通知的权限。这个方法只能被用户行为调用（比如：onclick 事件），并且不能被其他的方式调用
- close()： 实例方法，关闭通知
| 1234567891011121314 | // 小例子 document.body.onclick = function() {// 请求允许通知Notification.requestPermission().then(function(result) {if (result == ‘granted’) {let msg = new Notification(‘Notification Title’, {body: ‘I am notification body~’});} else {alert(‘Can\’t get permission~’);}});}; |
HTML5 Web Performance Timing APIs
