Html5新特性（个人）部分

移除的元素

（简单了解）纯表现的元素：basefont、big、center、font等

新特性

<–W3C官方文档提出–>

• 用于绘画的 canvas 元素
• 用于媒介回放的 video 和 audio 元素
• 对本地离线存储的更好的支持
• 新的特殊内容元素，比如 article、footer、header、nav、section
• 新的表单控件，比如 calendar、date、time、email、url、search

<–简单汇总–>

1. 新增语义化的标签： 恰当地描述内容是什么。【header…】
2. 连通性： 连接工作效率更有效【基于页面的实时聊天，更快速的网页游戏体验，更优化的在线交流得到了实现】。【Server-Sent
   Event和WebSockets】。
3. 离线 & 存储：网页在客户端本地存储数据以及更高效地离线运行（离线资源、在线和离线事件、DOM存储、IndexDB、自web应用程序中使用文件[FileReader]）。【本地存储 localStorage 和 sessionStorage】
4. 多媒体：使 video 和 audio 成为了在所有 Web 中的一等公民。
5. 2D/3D 绘图 & 效果：提供了一个更加分化范围的呈现选择(canvas、webGL)。
6. 性能 & 集成：提供了非常显著的性能优化和更有效的计算机硬件使用（WebWorkers、XMLHttpRequest2、HistoryAPI、拖放、requestAnimationFrame、全屏API、指针锁定API、在线和离线事件）。
7. 设备访问 Device Access：能够处理各种输入和输出设备（触控事件touch、使用地理位置定位、检测设备方向）。

新标签

<仅汇总，若遇到坑再填，摘自W3Chtml5参考手册>
—article 文章、内容…
—aside 页面内容之外的内容
—audio 声音内容
—bdi 定义文本的文本方向，使其脱离其周围文本的方向设置。
—canvas 定义图形(画布)。
—command 定义命令按钮。
—datalist 定义下拉列表。
—details 定义元素的细节。
—embed 定义外部交互内容或插件。
—figcaption 定义 figure 元素的标题。
—figure 定义媒介内容的分组，以及它们的标题。
—footer 定义 section 或 page 的页脚。
—header 定义 section 或 page 的页眉。
—hgroup 定义有关文档中的 section 的信息。
—keygen 定义生成密钥。
—mark 定义有记号的文本。
—meter 定义预定义范围内的度量。
—nav 定义导航链接。
—output 定义输出的一些类型。
—progress 定义任何类型的任务的进度。
—rp 定义若浏览器不支持 ruby 元素显示的内容。
—rt 定义 ruby 注释的解释。
—ruby 定义 ruby 注释。
—section 定义 section。
—source 定义媒介源。
—summary 定义 details 元素的标题。
—time 定义日期/时间。
—track 定义用在媒体播放器中的文本轨道。
—video 定义视频。

<——分类（简单）——>
1.多媒体：audio,video,source, embed, track
2.新表单元素：datalist,output , keygen
3.新文档节段和纲要:header页面头部、section章节、aside边栏、article文档内容、footer页面底部、section章节、aside边栏、article文档内容、footer页面底部等

web存储（Web Storage）

• 包含了两种对象的定义：sessionStorage和globalStorage（在支持的浏览器中都是以windows对象属性的形式存在的）
• 克服由cookie带来的一些限制：

1. 特定域名数量限制（IE6或更低版本 20，IE7和之后的版本 50，firefox最多 50,chrome和Safari没有做硬性限制）
2. IE和Opera 会清理近期最少使用的cookie，Firefox会随机清理cookie
3. cookie的最大大约为4096字节(不适合大量数据的存储)

localStorage

——没有时间限制的数据存储(设置多久存多久)

• 直接使用 localStorage 即可

• 注意 localStorage 的值限定为 string ，常用的 JSON 数据时需要转换【JSON.stringify( ) 转换为JSON字符串||JSON.parse( ) 还原为JSON对象】

• 隐私模式下无效

• 兼容性（用到的时候先判断 localStorage 是否被支持）
  

• 自带方法：获取 getItem( )、设置 setItem( )【优于 cookie 需要自配方法】；删除全部 .clear( )、删除某个 removeItem( )；获取键 .key( )
  请参见Web技术文档 : localStorage

sessionStorage

——针对一个 session 的数据存储（浏览器关闭即清除）
~~同上

Web Worker

——主线程创建 Worker 线程，将一些任务分配给后者运行
参考 阮一峰

• 独立于其他脚本，不会影响页面的性能
• 同源限制【分配给 Worker 线程运行的脚本文件，必须与主线程的脚本文件同源】
• DOM 限制【Worker 线程所在的全局对象，与主线程不一样，无法读取主线程所在网页的 DOM 对象，也无法使用document、window、parent这些对象。但是，Worker 线程可以navigator对象和location对象】
• 通信联系【Worker 线程和主线程不在同一个上下文环境，它们不能直接通信，必须通过消息完成】
• 脚本限制【Worker 线程不能执行alert()方法和confirm()方法，但可以使用 XMLHttpRequest 对象发出 AJAX 请求】
• 文件限制【Worker 线程无法读取本地文件，即不能打开本机的文件系统（file://），它所加载的脚本，必须来自网络】

基本使用

1 主线程：
首先，采用new命令，调用Worker()构造函数，新建一个 Worker 线程

var worker = new Worker('work.js');

然后，主线程调用worker.postMessage()方法，向 Worker 发消息

worker.postMessage('Hello World');
worker.postMessage({method: 'echo', args: ['Work']});

worker.postMessage()方法的参数，就是主线程传给 Worker 的数据。它可以是各种数据类型，包括二进制数据。
接着，主线程通过worker.onmessage指定监听函数，接收子线程发回来的消息

worker.onmessage = function (event) {
  console.log('Received message ' + event.data);
  doSomething();
}

function doSomething() {
  // 执行任务
  worker.postMessage('Work done!');
}

Worker 完成任务以后，主线程就可以把它关掉

worker.terminate();

2 Worker 线程
Worker 线程内部需要有一个监听函数，监听message事件

self.addEventListener('message', function (e) {
  self.postMessage('You said: ' + e.data);
}, false);

上面代码中，self代表子线程自身，即子线程的全局对象。因此，等同于下面两种写法：

// 写法一
this.addEventListener('message', function (e) {
  this.postMessage('You said: ' + e.data);
}, false);

// 写法二
addEventListener('message', function (e) {
  postMessage('You said: ' + e.data);
}, false);

除了使用self.addEventListener()指定监听函数，也可以使用self.onmessage指定。监听函数的参数是一个事件对象，它的data属性包含主线程发来的数据。self.postMessage()方法用来向主线程发送消息。

根据主线程发来的数据，Worker 线程可以调用不同的方法，下面是一个例子。

self.addEventListener('message', function (e) {
  var data = e.data;
  switch (data.cmd) {
    case 'start':
      self.postMessage('WORKER STARTED: ' + data.msg);
      break;
    case 'stop':
      self.postMessage('WORKER STOPPED: ' + data.msg);
      self.close(); // Terminates the worker.
      break;
    default:
      self.postMessage('Unknown command: ' + data.msg);
  };
}, false);

3 Worker 加载脚本
Worker 内部加载其他脚本专门的方法 importScripts()

    importScripts('script1.js');

4 错误处理
主线程可以监听 Worker 是否发生错误。如果发生错误，Worker 会触发主线程的error事件

worker.onerror(function (event) {
  console.log([
    'ERROR: Line ', e.lineno, ' in ', e.filename, ': ', e.message
  ].join(''));
});

// 或者
worker.addEventListener('error', function (event) {
  // ...
});

Worker 内部也可以监听error事件
5 关闭 Worker

// 主线程
worker.terminate();

// Worker 线程
self.close();

实例

有时，浏览器需要轮询服务器状态，以便第一时间得知状态改变。这个工作可以放在 Worker 里面

    function createWorker(f) {
      var blob = new Blob(['(' + f.toString() +')()']);
      var url = window.URL.createObjectURL(blob);
      var worker = new Worker(url);
      return worker;
    }

    var pollingWorker = createWorker(function (e) {
      var cache;

      function compare(new, old) { ... };

      setInterval(function () {
        fetch('/my-api-endpoint').then(function (res) {
          var data = res.json();

          if (!compare(data, cache)) {
            cache = data;
            self.postMessage(data);
          }
        })
      }, 1000)
    });

    pollingWorker.onmessage = function () {
      // render data
    }

    pollingWorker.postMessage('init');

上面代码中，Worker 每秒钟轮询一次数据，然后跟缓存做比较。如果不一致，就说明服务端有了新的变化，因此就要通知主线程。

API

1. 主线程

Worker.onerror：指定 error 事件的监听函数。
Worker.onmessage：指定 message 事件的监听函数，发送过来的数据在Event.data属性中。
Worker.onmessageerror：指定 messageerror 事件的监听函数。发送的数据无法序列化成字符串时，会触发这个事件。
Worker.postMessage()：向 Worker 线程发送消息。
Worker.terminate()：立即终止 Worker 线程。

2. Worker 线程

self.name： Worker 的名字。该属性只读，由构造函数指定。
self.onmessage：指定message事件的监听函数。
self.onmessageerror：指定 messageerror 事件的监听函数。发送的数据无法序列化成字符串时，会触发这个事件。
self.close()：关闭 Worker 线程。
self.postMessage()：向产生这个 Worker 线程发送消息。
self.importScripts()：加载 JS 脚本。