Better

H5新增了很多新特性，比如语义化标签，服务器通信新技术，离线与存储，多媒体，绘图等，在这里做一个摘要，有使用需求时可以做到心中有数！

Web Storage

• sessionStorage对象
  sessionStorage对象存储特定于某个会话的数据，也就是该数据只保持到浏览器关闭。
• globalStorage对象
  在客户端存储文档或者长期保存用户偏好设置
• localStorage对象
  localStorage对象在修订过的HTML5规范中作为持久保存客户端数据的方案取代了globalStorage。与globalStorage不同，不能给localStorage指定任何访问规则；规则实现就设定好了。要访问同一个localStorage对象，页面必须来自同一个域名，使用同一种协议，在同一个端口上。这相当于globalStorage[location.host]

File API

• 属性
  H5在DOM中为文件输入元素添加了一个files集合，在通过文本输入字段选择了一或多个文件时，files集合中将包含一组File对象，每个File对象对应着一个文件。每个File对象都有下列只读属性：
  • name: 本地文件系统的文件名
  • size： 文件的字节大小
  • type：字符串，文件的MIME类型。
  • lastModifiedDate：字符串，文件上一次被修改的事件（只有chrome实现了这个属性）
• FileReader类型
  FlieReader类型实现的是一种异步文件读取机制。
  • readAsText(file, encoding):以纯文本的形式读取文件，将读取到的文本保存在result属性中。
  • readAsDataURL(file)：读取文件并将文件一数据URI的形式保存在result属性中
  • readAsArrayBuffer(file)：读取文件并将一个包含文件内容的ArrayBuffer保存在result属性中。
• 事件
  最有用的三个事件是progress、error和load，分别表示是否又读取了新数据，是否发生了错误以及是否读完了整个文件。
• 文件拖放
  结合使用Html5拖放API和文件API，从桌面上把文件拖放到浏览器中也会触发drop事件。而且可以在e.dataTransfer.files中读到被放置的文件。
  事件有：dragenter，dragover，dragenter，drop

Web Workers

专用Web Worker提供可一个简单的方法使web内容能够在后台运行脚本。一旦worker创建后，它可以向由它的创建者指定的事件监听函数传递消息，这样该worker生成的所有任务就都会接收到这个消息。worker线程能够在不干扰UI的情况下执行任务。

• 创建work，demo示例

    var w;
    function startWorker() {
        if (typeof(Worker) !== "undefined") {
            if (typeof(w) == "undefined") {
                w = new Worker("my_task.js");
            }
            w.onmessage = function (event) {
                document.getElementById("result").innerHTML = event.data;
            };
        } else {
            document.getElementById("result").innerHTML = "抱歉，你的浏览器不支持 Web Workers...";
        }
    }
    function stopWorker() {
        w.terminate();
        w = undefined;
    }
  

• 创建任务

  var i=0;
  function timedCount()
  {
    i=i+1;
    postMessage(i);
    setTimeout("timedCount()",500);
  }
  timedCount();
  

• 注意事项 用来测试的js和html文件都需要发布到站点才可以正常访问，否则会提示这个错误： Uncaught SecurityError: Failed to construct 'Worker'

history对象

• history.pushState()和history.replaeState()
  两种方法都允许我们添加和更新历史记录，它们的工作原理相同并且可以添加数量相同的参数。但是pushState()是在history栈中添加一个新的条目，replaceState()是替换当前的记录值。
  • data:一个表示状态的对象，json格式数据
  • title：一个string格式的标题（大多数浏览器不支持或忽略这个参数，最好用null代替）
  • url：一个url（用于替换当前URL）
• popstate事件
  当浏览会话记录的时候，不管点击前进或者后退按钮，还是使用history.go和history.back方法，popstate事件都会被触发。当事件发生时，浏览器会从history中取出URL和对应的state对象替换当前的URL和history.state。通过event.state也可以获取history.state。

2D绘图（Canvas 和SVG ）

• Canvas
  • Canvas 通过 JavaScript 来绘制 2D 图形。
  • Canvas 是逐像素进行渲染的。
  • 在 Canvas 中，一旦图形被绘制完成，它就不会继续得到浏览器的关注。如果其位置发生变化，那么整个场景也需要重新绘制，包括任何或许已被图形覆盖的对象。
• SVG
  • SVG 是一种使用 XML 描述 2D 图形的语言。
  • SVG 基于 XML，这意味着 SVG DOM 中的每个元素都是可用的。您可以为某个元素附加 JavaScript 事件处理器。
  • 在 SVG 中，每个被绘制的图形均被视为对象。如果 SVG 对象的属性发生变化，那么浏览器能够自动重现图形。
• Canvas比较
  • 依赖分辨率
  • 不支持事件处理器
  • 弱的文本渲染能力
  • 能够以 .png 或 .jpg 格式保存结果图像
  • 最适合图像密集型的游戏，其中的许多对象会被频繁重绘
• SVG比较
  • 不依赖分辨率
  • 支持事件处理器
  • 最适合带有大型渲染区域的应用程序（比如谷歌地图）
  • 复杂度高会减慢渲染速度（任何过度使用 DOM 的应用都不快）
  • 不适合游戏应用

多媒体

• 音频
• 视频

更多特性

• 菜鸟教程HTML5
• H5的新特性及API详解