这篇文章主要介绍了html5中有哪些api，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。
创新互联主要从事网站设计、成都网站建设、网页设计、企业做网站、公司建网站等业务。立足成都服务肇东,十年网站建设经验,价格优惠、服务专业,欢迎来电咨询建站服务:13518219792
html5的api有：1、requestAnimationFrame；2、客户端存储；3、历史记录（History）；4、worker；5、file Reader；6、websocoket等等。
本教程操作环境：windows7系统、HTML5版、Dell G3电脑。
一、requestAnimationFrame（请求动画关键帧）
1.1 requestAnimationFrame怎么使用？
铺垫：
先看一下，我们平时在JS中是怎么让一个元素产生动画效果的。
我们平时都是用定时器来设置多长时间后发生什么动画，或者位移
我们可以看到，用JS定时器就可以实现动画效果
但是，JS定时器会有一个缺点
浏览器的重绘是每1s ——》 60次，所以大约为16ms重绘一次
如果我们像上面执行的一样，每隔10ms就增加 left50px 。页面就会造成关键帧丢失
requestAnimationFrame：（优化后）
1.2 requestAnimationFrame与setTImeout的区别？
setTimeout 是以 n 毫秒后执行回调函数，回调函数中可以递归 调用 setTimeout 来实现动画。
.demo {
width: 100px;
height: 100px;
background-color: red;
position: absolute;
left: 0;
}
使用 requestAnimationFrame 执行动画，最大优势是能保证回调函数在屏幕每一次刷 新间隔中只被执行一次，这样就不会引起丢帧，动画也就不会卡顿。
.demo {
width: 100px;
height: 100px;
background-color: red;
position: absolute;
left: 0;
}
1.3 requestAnimationFrame的优势
二、客户端存储
2.1 Storage: 不会传到服务器
2.1.1 Storage 如何使用 掌握方法
存储对象：
取出对象：
储存数组：
取出数组：
API localstorage sessionStorage 共同适用
设置，获得
移除属性（指定个别属性）
清除所有已设置的属性
2.1.2 localstorage sessionStorage cookie区别
localstorage:
存储信息到用户的设备上，一般为5MB
永久存储，除非手动清除
会存储到同域下
sessionStorage:
存储信息到用户的设备上，一般为5MB
临时存储，页面关闭就会清除
不会存储到同域下
cookie:
存储信息到用户的设备上，数据量较小 4k
navigator.cookieEnabled 检查是否启用了cookie
三、历史记录
BOM中的 History对象方法
现在已知我有三个标签页（从红色小方块开始）
3.1history.length 长度
通过调用这个方法就可以知道，当前历史记录里面有几条数据（几个网页）
3.1history.back() 回退
当前位置在第三页（淘宝页面），回退一页就会跳转到第二页（百度页面）
3.2 history.forward() 前进
当前在红色小方块当前页，前进一页就会跳转至第二页（百度页面）
3.3 history.go(n) 跳转至指定页
当前在红色小方块页面即为第0页，go（2）就会跳转至第三页（淘宝页面）
当前在淘宝页面即为第三页，go（-2）就会跳转至第一页（红色方块页面）
HTML5中新增的方法 此方法受同源策略限制，需要在服务器下操作
1、pushState 添加一条历史记录
2、replaceState 替换当前的历史记录
1. popstate 监听页面历史记录一旦发生改变时触发
history.pushState(null, null, '#a');
window.addEventListener('popstate', function(e){ //监听 popstate事件 有没有发生改变
console.log("历史记录发生改变，我触发了");
}, false)
应用场景
多应用于搜索，后台管理系统，或者父子页面之间的切换（开发一个页面就够了）
