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);
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值