新增标签
其他更详细的见jsfiddle实例:
http://jsfiddle.net/utLs39y7/10/
1、embed
embed标签是html5新增的标签,用来嵌入内容,比如插件等,常用于视频文件的播放(为外部应用程序定义容器)。
这篇文章介绍了embed的常用属性,基本都是定义播放器的一些设置的,自动播放loop、开始时间starttime等:
http://www.cnblogs.com/lgx5/p/5714494.html
注:一些视频文件swf的大小只有几KB,但是视频本身是比较大的,自己的理解是视频网站只是将视频的地址封装进了swf文件,然后链接到真正的视频地址进行播放。
2、artical section aside
都是block块级元素。
- artical一般是指独立的一篇文章,一般不与页面上的其他内容有关联,一般用于新闻文章、论坛的帖子、用户评论等,可以独立被外部引用,里面包含自己的头、尾、内容。
- section类似于div,但是更语义化,将内容分块,一般section都包含标题。
- aside侧边栏,一般用于定义文章artical的引用、注解等部分。
3、progress
进度条
............................懒得写了,见jsfiddle实例....................................
其他新增内容
1、本地存储 localStorage sessionStorage
支持setItem getItem removeItem clear等方法,而且支持点操作符和[]访问某字段。clear清除所有的数据项。
与cookie的对比:
- cookie是为http请求服务的,与服务器进行交互;
- localStorage sessionStorage是为本地数据存储而服务的,localStorage是永久本地存储,sessionStorage是会话级别的,会话关闭即失效;
- cookie有大小限制及跨域限制,且每次请求都会被携带;
2、web worker
参考:http://www.cnblogs.com/giggle/p/5350288.html
通过创建子线程,解决js单线程会阻塞的问题。
我的理解就是把一些耗费性能的计算等操作,分离出来到一个单独的js中,通过创建new Worker()对象,创建当前线程的一个子线程,不影响主线程上的DOM操作等,等计算结束,子线程通知到主线程,进行内容更新及子线程销毁等操作。
子线程的执行上下文不是window,所以无法获取window等对象,无法操作DOM,但可以通过postMessage方法与主进程进行互相通信,通过监听worker.onmessage方法获取传递的数据,主进程可以通过worker.terminate() 关闭子进程。worker对象一经销毁,则无法重新启动,需要重新新建Worker对象来启动。
3、geolocation支持用户地理位置的获取
经用户同意才被允许获取。用于导航,可以监控用户地理位置的移动等。
navigator.geolocation.getCurrentPosition(success(position), error());
//第一个函数正确返回地理位置:经纬度、海拔等,position.coords.latitude position.coords.longitude
//错误处理函数
//监控用户位置的变化
navigator.geolocation.watchPosition clearWatch()
4、websocket
基于TCP协议,双向的全双工通信,服务端和客户端可以相互推送消息。除了IE外,其他浏览器基本支持了WebSocket()接口(不同于ajax,websocket允许跨域通信)。相关的API如下:
send + onopen + onmessage + onerror + onclose等。相关的库有socket.io,一般用于聊天应用等。
5、canvas
定义画布,一个矩形框,但是真正的图像绘制需要用js来完成。
相关的绘制方法有:fillRect() arc moveTo lineTo drawImage等。
6、postMessage
解决跨域、跨窗口消息传递问题。原理是:html5新增的API,不管同不同源,都可以向其他window对象发送消息。postMessage只管消息的发送,而不用等待消息处理完成,仅仅是将消息插入到对应窗口的消息队列中即可(不阻塞程序)。
// 调用postmessage的window对象为要接收消息的那个window对象
// origin指明要接收消息的window对象所在的域,不需指明时,可以设置 *
window.top.postMessage(data, origin);
//要接收消息的window对象注册message事件
window.addEventListener('message', function(e){
//e.data e.source e.origin
})
7、history API
实现无刷新跳转,减少网络请求、改进用户体验等。
history.pushState(data, title, url)
history.replaceState(data, title, url)
window.onPopState(event)
8、FileReader定义异步读取本地文件的API,详见:
http://www.jianshu.com/p/75e84ddf9339
9、Mutation observer 监控DOM元素的变化,防止xss攻击。
用法:实例化一个观察者对象,传入监控对象以及监控设置。
参考:http://www.jianshu.com/p/b5c9e4c7b1e1
// Firefox和Chrome早期版本中带有前缀
var MutationObserver = window.MutationObserver || window.WebKitMutationObserver || window.MozMutationObserver;
// 选择目标节点
var target = document.querySelector('#some-id');
// 创建观察者对象
var observer = new MutationObserver(function(mutations) {
mutations.forEach(function(mutation) {
console.log(mutation.type);
});
});
// 配置观察选项:
var config = { attributes: true, childList: true, characterData: true }
// 传入目标节点和观察选项
observer.observe(target, config);
// 随后,你还可以停止观察
observer.disconnect();