新增标签

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

通过创建子线程，解决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，详见：

9、Mutation observer 监控DOM元素的变化，防止xss攻击。

// 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();