新增的API

1.語義： 能夠讓你更恰當(dāng)?shù)孛枋瞿愕膬?nèi)容是什么。

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

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

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

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

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

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

部分API詳述

web存儲機制

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

sessionStorage對象

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

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

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

還可以通過結(jié)合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中刪除數(shù)據(jù)可以使用delete操作符刪除對象屬性，也可以調(diào)用removeItem()方法。
delete sessionStorage.name;sessionStorge.removeItem('book');

globalStorage對象

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

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

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

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

File API

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

現(xiàn)在我們獲取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類型實現(xiàn)的是一種異步文件讀取機制?？梢园袴ileReader想象成XMLHttpRequest，區(qū)別只是它讀取的是文件心痛，而不是遠(yuǎn)程服務(wù)器。為了讀取文件中的數(shù)據(jù)，F(xiàn)ileReader提供了如下幾個方法：
readAsText(file, encoding):以純文本的形式讀取文件，將讀取到的文本保存在result屬性中。
readAsDataURL(file)：讀取文件并將文件一數(shù)據(jù)URI的形式保存在result屬性中
readAsBinaryString(file)(已廢棄)：讀取文件并將一個字符串保存在result屬性中，字符串中的每一個字符表示一字節(jié)
readAsArrayBuffer(file)：讀取文件并將一個包含文件內(nèi)容的ArrayBuffer保存在result屬性中。

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

讀取部分內(nèi)容
File對象支持一個slice()方法以實現(xiàn)讀取文件的一部分而不是全部內(nèi)容，這個方法在FireFox中的實現(xiàn)叫mozSlice()，在chrome中的實現(xiàn)是webkitSlice()，Safiri的5.1及之前的版本不支持這個方法。Slice()方法接收兩個參數(shù)：起始字節(jié)及要讀取的字節(jié)數(shù)。這個方法返回一個Blob實例，Blob是File類型的父類型。下面是一個通用的函數(shù)，可以在不同實踐中使用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()方法，以便進一步切割數(shù)據(jù)。通過FileReader也可以從Blob中讀取數(shù)據(jù)。
只讀取文件的一部分可以節(jié)省時間，非常適合只關(guān)注數(shù)據(jù)中某個特定部分（如請求頭部）的情況

對象URL

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

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

讀取拖放的文件

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

Web Workers

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

傳遞數(shù)據(jù)

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

Worker全局作用域

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

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

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

history對象

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

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

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

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

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

2D繪圖（canvas和svg）

SVG

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

canvas

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

SVG

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

h5的兼容性問題

IE6/IE7/IE8支持通過document.createElement方法產(chǎn)生的標(biāo)簽，可以利用這一特性讓這些瀏覽器支持HTML5新標(biāo)簽。但是瀏覽器支持新標(biāo)簽后，還需要添加標(biāo)簽?zāi)J(rèn)的樣式。