HTML5 一些有用的 APIs

Animation Timing

• Window.requestAnimationFrame(callback)： 告诉浏览器希望执行一个动画，让浏览器在下一个动画帧安排一次网页重绘（类似于 setTimeout，但是更精确）
  • 该函数返回一个唯一标识符，在取消动画请求时使用
  • callback： 你希望调用的函数

使用上面函数的方法是 反复调用 即可。

1 2 3 4 5

// 使用 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()： 发出一个异步请求，使指定元素全屏显示

1 2 3 4 5 6 7 8 9 10 11 12

// 兼容各个浏览器 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()： 取消全屏

1 2 3 4 5 6 7 8 9 10 11 12

// 兼容各个浏览器 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： 返回当前处于全屏的节点

1 2	// 兼容各个浏览器 var fullscreenElement = document.fullscreenElement || document.mozFullScreenElement || document.webkitFullscreenElement;

• Document.fullscreenEnabled： 返回一个布尔值，表示当前文档是否可以切换到全屏状态

1 2	// 兼容各个浏览器 var fullscreenEnabled = document.fullscreenEnabled || document.mozFullScreenEnabled || document.webkitFullscreenEnabled || document.msFullscreenEnabled;

Page Visibility API

PageVisibility API 用于判断页面是否处于浏览器的当前窗口，即是否可见

Page Visibility Level 2 W3C Editor’s Draft 17 November 2016

• Document.hidden： 只读属性，返回一个布尔值标识当前页面是否隐藏（hidden）
• Document.visibilityState： 只读属性，表示当前页面的状态，可以取三个值，分别是 visibile（页面可见）、hidden（页面不可见）、prerender（页面正处于渲染之中，不可见）
• visibilitychange 事件： 当当前页面状态发生变化时触发

1 2 3 4

// 小测试 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()： 实例方法，关闭通知

1 2 3 4 5 6 7 8 9 10 11 12 13 14

// 小例子   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