新增的API

1.語義： 能夠讓你更恰當地描述你的內容是什么。

2.連通性： 能夠讓你和服務器之間通過創新的新技術方法進行通信（web sockets等）。

3.離線 & 存儲：能夠讓網頁在客戶端本地存儲數據以及更高效地離線運行（離線資源、在線和離線事件、DOM存儲、IndexDB、自web應用程序中使用文件[FileReader]）。

4.多媒體：使 video 和 audio 成為了在所有 Web 中的一等公民。

5.2D/3D 繪圖 & 效果：提供了一個更加分化范圍的呈現選擇(canvas、webGL)。

6.性能 & 集成：提供了非常顯著的性能優化和更有效的計算機硬件使用（WebWorkers、XMLHttpRequest2、HistoryAPI、拖放、requestAnimationFrame、全屏API、指針鎖定API、在線和離線事件）。

7.設備訪問 Device Access：能夠處理各種輸入和輸出設備（觸控事件touch、使用地理位置定位、檢測設備方向）。

部分API詳述

web存儲機制

Web Storage的目的是克服由cookie帶來的一些限制，當數據需要被嚴格控制在客戶端上時，無需持續地將數據發回服務器。Web Storage的兩個主要目標是：提供一種在cookie之外存儲會話數據的途徑；提供一種存儲大量可以跨會話存在的數據機制。最初的Web Storage規范包含了兩種對象的定義：sessionStorage和globalStorage。這兩個對象在支持的瀏覽器中都是以windows對象屬性的形式存在的。

sessionStorage對象

sessionStorage對象存儲特定于某個會話的數據，也就是該數據只保持到瀏覽器關閉。這個對象就像會話cookie，也會在瀏覽器關閉后消失。存儲在sessionStorage中的數據可以跨越頁面刷新而存在，同時如果瀏覽器支持，瀏覽器崩潰并重啟之后依然可用（FireFox和WebKit都支持，IE不支持） 因為sessionStorage對象綁定于某個服務器會話，所以當文件在本地運行的時候是不可用的，存儲在sessionStorage中的數據只能由最初給對象存儲數據的野蠻訪問到，所以對多頁面應用有限制。 sessionStorage對象可以使用setItem()或者直接設置新的屬性來存儲數據
//使用sessionStorage方法存儲數據sessionStorage.setitem('name','Nicholas');//使用屬性存儲數據sessionStorage.book = 'Profession JavaScript';

不同瀏覽器寫入數據方面略有不同。FireFox和WebKit實現了同步寫入，所以添加到存儲空間中的數據時立刻被提交的。而IE的實現則是異步寫入數據，所以在設置數據和將數據實際寫入磁盤之間可能有一些延遲。對于少量數據而言，這個差異是可以忽略的。對于大量數據，IE要比其他瀏覽器更快的恢復執行，因為它會跳過實際的磁盤寫入過程 在IE8中可以強制把數據寫入磁盤：在設置新數據之前使用begin()方法，并且在所有設置完成后調用commit()方法
sessionStorage.begin();//確保在這段代碼執行的時候不會發生其他磁盤寫入操作sessionStorage.setitem('name','Nicholas');sessionStorage.book = 'Profession JavaScript';sessionStorage.commit();

sessionStorage中有數據時，可以使用getItem()或者通過直接訪問屬性名來獲取數據。
//使用方法讀取數據var name = sessionStorage.getItem('name');//使用屬性讀取數據var book = sessionStorage.book;

還可以通過結合length屬性和key()方法來迭代sessionStorage的值。
for(var i = 0,len = sessionStorage.length; i < len; i++){ var key = sessionStorage.key(i); var value = sessionStorage.getItem(key); alert(key + "=" + value);}

要從sessionStorage中刪除數據可以使用delete操作符刪除對象屬性，也可以調用removeItem()方法。
delete sessionStorage.name;sessionStorge.removeItem('book');

globalStorage對象

sessionStorage對象應該主要用于針對會話的小段數據的存儲。如果需要跨越花花存儲數據，那么globalStorage或者localStorage更為合適 要使用globalStorage，首先要制定哪些域可以訪問該數據。可以通過方括號標記使用屬性來實現。
//保存數據globalStorage['wrox.com'].name = 'Nicholas';//獲取數據var name = globalStorage['wrox.com].name;

在這里，訪問的是針對域名wrox.com的存儲空間。這個存儲空間對于wrox.com及其所有子域都是可以訪問的。 對globalStorage空間的訪問，是依據發起請求的頁面的域名、協議和端口來限制的（類似于ajax請求的同源策略）。如果實現不能確定域名，那么使用location.host作為屬性名比較安全
globalStorage[location.host].name = 'Nicholas';var book = globalStorage[location.host].getItem('book');

如果不使用removeItem()或者delete刪除，或者用戶為清除瀏覽器緩存，存儲在globalStorage屬性中的數據會一直保留在磁盤上。這讓globalStorage非常適合在客戶端存儲文檔或者長期保存用戶偏好設置
localStorage對象
localStorage對象在修訂過的HTML5規范中作為持久保存客戶端數據的方案取代了globalStorage。與globalStorage不同，不能給localStorage指定任何訪問規則；規則實現就設定好了。要訪問同一個localStorage對象，頁面必須來自同一個域名，使用同一種協議，在同一個端口上。這相當于globalStorage[location.host] 由于localStorage是Storage的實例，所以可以像使用sessionStorage一樣來使用它。
//使用方法存儲數據localStorage.setItem('name','Nichoalas');//使用屬性存儲數據localStorage.book = 'Professional JavaScript';//使用方法讀取數據var name = localStorage.getItem('name')//使用屬性讀取數據var book = localStorage.book;

存儲在localStorage中的數據和存儲在globalStorage中的數據一樣，都遵循相同的規則：數據保留到通過JavaScript 刪除或者是用戶清除瀏覽器緩存

File API

File API在表單中的文件輸入字段的基礎上，又添加了一些直接訪問文件信息的接口。H5在DOM中為文件輸入元素添加了一個files集合，在通過文本輸入字段選擇了一或多個文件時，files集合中將包含一組File對象，每個File對象對應著一個文件。每個File對象都有下列只讀屬性
name: 本地文件系統的文件名
size： 文件的字節大小
type：字符串，文件的MIME類型。
lastModifiedDate：字符串，文件上一次被修改的事件（只有chrome實現了這個屬性）

現在我們獲取id為‘files-list’的input為file的元素，將該元素中上傳的文件輸出到控制臺
var filesList = document.getElementById('files-list'); EventUtil.addHandler(filesList,'change',funciton(e){ var files = EventUtil.getTarget(e).files, i = 0, len = files.length; while(i<len){ console.log(files[i].name + '('+files[i].type+','+files[i].size +'bytes)'); i++; } })

FileReader類型

FlieReader類型實現的是一種異步文件讀取機制。可以把FileReader想象成XMLHttpRequest，區別只是它讀取的是文件心痛，而不是遠程服務器。為了讀取文件中的數據，FileReader提供了如下幾個方法：
readAsText(file, encoding):以純文本的形式讀取文件，將讀取到的文本保存在result屬性中。
readAsDataURL(file)：讀取文件并將文件一數據URI的形式保存在result屬性中
readAsBinaryString(file)(已廢棄)：讀取文件并將一個字符串保存在result屬性中，字符串中的每一個字符表示一字節
readAsArrayBuffer(file)：讀取文件并將一個包含文件內容的ArrayBuffer保存在result屬性中。

由于讀取過程是異步的，因此FileReader也提供了幾個事件。其中最有用的三個事件是progress、error和load，分別表示是否又讀取了新數據，是否發生了錯誤以及是否讀完了整個文件。

讀取部分內容
File對象支持一個slice()方法以實現讀取文件的一部分而不是全部內容，這個方法在FireFox中的實現叫mozSlice()，在chrome中的實現是webkitSlice()，Safiri的5.1及之前的版本不支持這個方法。Slice()方法接收兩個參數：起始字節及要讀取的字節數。這個方法返回一個Blob實例，Blob是File類型的父類型。下面是一個通用的函數，可以在不同實踐中使用slice()方法：
function blobSlice(blob,startByte,length){ if(blob.slice){ return blob.slice(startByte,length); } else if(blob.webkitSlice){ return blob.webkitSlice(startByte,length); } else if(blob.webkitSlice){ return blob.webkitSlice(startByte,length); } else { return null; }}

blob類型有一個size屬性和一個type屬性，而且它也支持slice()方法，以便進一步切割數據。通過FileReader也可以從Blob中讀取數據。
只讀取文件的一部分可以節省時間，非常適合只關注數據中某個特定部分（如請求頭部）的情況

對象URL

對象URL也被稱為blob URL，指的是引用保存在File或Blob中數據的URL。使用對象URL的好處是可以不必把文件內容讀取到JavaScript中而直接使用文件內容。為此，只要在需要文件內容的地方提供對象URL即可。要創建對象URL，可以使用window.URL.createObjectURL()方法，并傳入File或Blob對象。這個方法在Chrome中的實現叫window.webkitURL.createObjectURL()，因此可以通過如下函數來消除命名的差異：
function createObjectURL(blob){ if(window.URL){ return window.URL.createObjectURL(blob); } else if (window.webkitURL) { return window.webkitURL.createObjectURL(blob); } else { return null; }}

這個函數的返回值是一個字符串，指向一塊內存的地址。因為這個字符串是URL，所以在DOM中也能使用

讀取拖放的文件

圍繞讀取文件信息，結合使用Html5拖放API和文件API，能夠創造出令人矚目的用戶界面：在頁面上創建了自定義的放置目標后，可以從桌面上把文件拖放到該目標。與拖放一張圖片或者一個鏈接類似，從桌面上把文件拖放到瀏覽器中也會觸發drop事件。而且可以在e.dataTransfer.files中讀到被放置的文件，當然此時它是一個File對象，與童年過文件輸入字段取得的File對象一樣。

Web Workers

專用Web Worker提供可一個簡單的方法使的web內容能夠在后臺運行腳本。一旦worker創建后，它可以向由它的創建者指定的事件監聽函數傳遞消息，這樣改worker生成的所有任務就都會接收到這個消息。worker線程能夠在不干擾UI的情況下執行任務。
生成worker
創建一個新的worker十分簡單。就是調用Worker()構造函數，指定一個要在worker線程內運行的腳本的URI，如果希望能夠收到worker的通知，可以將worker的onmessage屬性設置成一個特定的事件處理函數，如果希望能夠發送信息到worker，可以使用postmessage方法

傳遞數據

在主頁面與worker之間傳遞的數據是通過拷貝，而不是共享來完成的。傳遞給worker的對象需要經過序列化，接下來在另一端還需要反序列化。頁面與worker不會共享同一個實例，最終的結果就是在每次通信結束時生成了數據的一個副本。大部分瀏覽器使用結構化拷貝來實現該特性。 example.html（主頁面）
var myWorker = new Worker("my_task.js");myWorker.onmessage = function (oEvent) { console.log("Worker said : " + oEvent.data);};myWorker.postMessage("ali");

Worker全局作用域

關于Web Worker，最重要的是要知道它所執行的JavaScript代碼完全在另一個作用域，與當前網頁中的代碼不共享作用域。在Web Worker中，同樣有一個全局對象和其他對象以及方法。但是Web Worker中的代碼不能訪問DOM，也無法通過任何方式影響頁面的外觀 Web Worker中的全局對象是worker對象本身。也就是說，在這個特殊的全局作用域中，this和sele引用的都是worker對象。為便于處理數據，Web Worker本身也是一個最小化的運行環境
最小化的navgator對象 : online、appName、appVersion、userAgent、platform
只讀的location對象 : 所有屬性都是只讀的
self : 指向全局 worker 對象
所有的ECMA對象，Object、Array、Date等
XMLHttpRequest構造器
setTimeout、setInterval、clearTimeout()和clearInterval()方法

在worker內部，調用close()方法也可以停止工作。Worker停止工作后就不會再有事件發生。 另外，Worker的全局作用域中提供了importScripts()方法。這個方法接收一個或多個指向JavaScript文件的URL。每個加載過程都是異步進行的，因此素有的腳本加載并執行完成之后，importScripts()才會執行
importScripts('file1.js','file2.js');

即使file2.js先于file1.js下載完，執行的時候仍然會按照先后順序實行。而且，這些腳本是在Worker的全局作用域中執行，如果腳本中包含與頁面香瓜你的JavaScript代碼，那么腳本可能無法正確運行。

history對象

history對象保存著用戶上網的歷史記錄，從窗口被打開的那一刻算起。 使用Go()方法可以在用戶的歷史記錄中任意跳轉，可以向后也可以向前。這個方法接受一個參數，表示向后或向前跳轉的頁面數的一個整數值。負數表示向后跳轉（類似于單擊瀏覽器的‘后退’按鈕），正數表示向前跳轉（類似于單擊瀏覽器的“前進”按鈕）
history.go(-1);//后退一頁history.go(1);//前進一頁history.go(2);//前進兩頁

也可以給go()方法傳遞一個字符串參數，此時瀏覽器會跳轉到歷史記錄中包含該字符串的第一個位置–可能后退，也可能前進，具體看那個位置最近。如果歷史記錄中不包含該字符串，那么這個方法什么也不做
history.go('wrox.com');//跳到最近的wrox.com頁面

另外，還可以使用兩個簡寫方法back()和forward()來代替go()。這兩個方法都可以模仿瀏覽器的‘后退’和‘前進’按鈕。
history.back();//后退一頁history.forward();//前進一頁

history對象還有一個length屬性，保存著歷史記錄的數量。這個數量包括所有的歷史記錄，即所有向后和向前的記錄。
history在h5中新增的屬性和方法
h5中的history對象新增了兩個新方法：history.pushState()和history.replaeState(); 兩種方法都允許我們添加和更新歷史記錄，它們的工作原理相同并且可以添加數量相同的參數。但是pushState()是在history棧中添加一個新的條目，replaceState()是替換當前的記錄值。除了方法之外，還有popstate 事件 pushState(data，title[,url])和replaceState(data，title[,url])參數一樣，參數說明如下：
data:一個表示狀態的對象，json格式數據
title：一個string格式的標題（大多數瀏覽器不支持或忽略這個參數，最好用null代替）
url：一個url（用于替換當前URL）

當瀏覽會話記錄的時候，不管點擊前進或者后退按鈕，還是使用history.go和history.back方法，popstate事件都會被觸發。當事件發生時，瀏覽器會從history中取出URL和對應的state對象替換當前的URL和history.state。通過event.state也可以獲取history.state 需要說明的是pushState只是將當前頁面保存到history的歷史記錄中（并作為最近的一個記錄），并且將當前瀏覽器的地址欄改為參數url指定的值，但并不會加載它。這點與普通的通過鏈接打開或瀏覽器地址輸入url完全不一樣。所以如果想在url改變的時候需要監聽popstate事件。
利用history可以彌補ajax無法回退的缺陷。

2D繪圖（canvas和svg）

SVG

SVG 是一種使用 XML 描述 2D 圖形的語言。 SVG 基于 XML，這意味著 SVG DOM 中的每個元素都是可用的。您可以為某個元素附加 JavaScript 事件處理器。 在 SVG 中，每個被繪制的圖形均被視為對象。如果 SVG 對象的屬性發生變化，那么瀏覽器能夠自動重現圖形。

canvas

Canvas 通過 JavaScript 來繪制 2D 圖形。 Canvas 是逐像素進行渲染的。 在 canvas 中，一旦圖形被繪制完成，它就不會繼續得到瀏覽器的關注。如果其位置發生變化，那么整個場景也需要重新繪制，包括任何或許已被圖形覆蓋的對象。
Canvas 與 SVG 的比較
下表列出了 canvas 與 SVG 之間的一些不同之處。 Canvas
依賴分辨率不支持事件處理器弱的文本渲染能力能夠以 .png 或 .jpg 格式保存結果圖像最適合圖像密集型的游戲，其中的許多對象會被頻繁重繪

SVG

不依賴分辨率支持事件處理器最適合帶有大型渲染區域的應用程序（比如谷歌地圖）復雜度高會減慢渲染速度（任何過度使用 DOM 的應用都不快）不適合游戲應用

h5的兼容性問題

IE6/IE7/IE8支持通過document.createElement方法產生的標簽，可以利用這一特性讓這些瀏覽器支持HTML5新標簽。但是瀏覽器支持新標簽后，還需要添加標簽默認的樣式。