html5带来的新的webApi

1.更高效率的时间API

var time = performance.now();

该时间API提供了当前时间的亚毫秒级的精确度,它不受系统时钟影响。可以精确到0.001毫秒。
属于系统属性，且只有一个调用时间方法.now()；
单个web使用.now()方法的时候是单调递增的，后面返回的值永远比之前的大。
兼容性：opera15和Firefox 15 +不需要加前缀。
从20+Chrome支持该API以其“webkit”前缀,
这里的兼容性。更详细

2.用户时间APi

performance.mark("startFoo");
// A time consuming function
foo();
performance.mark("endFoo");

performance.measure("durationFoo", "startFoo", "endFoo");

用于测试我们的代码的性能和时间
performance,允许我们存储和删除标志和措施。mark(name)方法用于存储时间戳和一个相关的名字,而measure(name[, mark1[, mark2]])我们可以返回两个标记之间的时间间隔

3.浏览时间API
提供页面加载的各个时间戳

performance.timing

4. 网络信息api

navigator.connection//网络对象
navigator.connection.metered//返回布尔型 确认连接是否正常
navigator.connection.bandwidth //返回带宽 单位是MB / s(兆字节每秒)

目前只Firefox 12 +和Chrome(移动)提供实验支持.

5.震动api

navigator.vibrate(2000);//调用震动功能2分钟

6.电量api

var percentageLevel = navigator.battery.level * 100;

只有火狐浏览器支持、

7. 页面标签状态

document.addEventListener("visibilitychange", function(e){
    console.log(document.visibilityState);
});

属于dcoument属性
获取浏览器是否打开当前页面标签
visibilityState：四个状态 hidden, visible, prerender, and unloaded.

支持情况:Chrome 13+, Internet Explorer 10, Firefox 10+, Safari 7, and Opera 12.10 (source).
手机端 需要安卓4.0以上的chrome浏览器

8.全屏接口

var i = document.getElementById("elem");.

    i.onclick=function(){//必须用户触发
        // go full-screen
        if (i.requestFullscreen) {
            i.requestFullscreen();
        } else if (i.webkitRequestFullscreen) {
            i.webkitRequestFullscreen();
        } else if (i.mozRequestFullScreen) {
            i.mozRequestFullScreen();
        } else if (i.msRequestFullscreen) {
            i.msRequestFullscreen();
        }
    }

必须由用户触发全屏事件，无法由js直接执行。
退出全屏事件：exitFullscreen()；
大多数主流浏览器基本支持 特殊的：Internet Explorer 11+, Firefox 10+, Chrome 15+, Safari 5.1+, and Opera 12.10+

9. 获取用户媒体权限 API

具体demo
主要用来操作用户浏览器的视频，音频等；

10. WebSocket API

只需要建立一个websocket通信就可以直接使用send()和close()方法。
（需要后台配合建立websocket协议，且浏览器需要支持该协议）
大多数主流浏览器已经支持

11.预加载

<!-- 页面，可以使用绝对或者相对路径 --> 
<link rel="prefetch" href="page2.html" /> 
<!-- 图片，也可以是其他类型的文件 --> 
<link rel="prefetch" href="sprite.png" /> 

阻止预加载
Firefox 允许禁止预加载模式，代码如下：

user_pref("network.prefetch-next", false); 

何时需要预加载
网站是否采用预加载取决于你的需求，下面是一些建议：
- 如果一系列的页面幻灯片一样展示，那么可以预加载前后各1至3个页面.
- 加载网站内部通用的图片
- 在搜索结果页预加载下一页

注：预加载html时 只会加载单个文件，不会加载html内部引用的文件

12.缓动函数

示例代码

<div id="test" style="width:1px;height:17px;background:#0f0;">0%</div>
<input type="button" value="Run" id="run"/>
复制代码
window.requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
var start = null;
var ele = document.getElementById("test");
var progress = 0;

function step(timestamp) {
    progress += 1;
    ele.style.width = progress + "%";
    ele.innerHTML=progress + "%";
    if (progress < 100) {
        requestAnimationFrame(step);
    }
}
requestAnimationFrame(step);
document.getElementById("run").addEventListener("click", function() {
    ele.style.width = "1px";
    progress = 0;
    requestAnimationFrame(step);
}, false);

根据浏览器性能自动控制运行时间跟高效

13.伪元素修改属性

var color=window.getComputedStyle(document.querySelector('div'),':before').getPropertyValue('height');
    console.log(color);