Web2.0帶來(lái)的豐富互聯(lián)網(wǎng)技術(shù)讓所有人都享受到了技術(shù)發(fā)展和體驗(yàn)進(jìn)步的樂(lè)趣。作為下一代互聯(lián)網(wǎng)標(biāo)準(zhǔn)，HTML5自然也是備受期待和矚目，技術(shù)人員、設(shè)計(jì)者、互聯(lián)網(wǎng)愛(ài)好者們都在熱議HTML5究竟能帶來(lái)什么。那么就一起來(lái)窺探一下這個(gè)還未誕生就已經(jīng)聲名在外的新標(biāo)準(zhǔn)吧。

在探討HTML5的新特性之前，先說(shuō)HTML5究竟離我們還有多遠(yuǎn)？用一張時(shí)間軸來(lái)說(shuō)明兩個(gè)關(guān)鍵點(diǎn)。

如圖，在2012年，將會(huì)由W3C發(fā)布候選推薦版，這個(gè)版本的發(fā)布就代表著HTML5的規(guī)范編寫已經(jīng)完成了。而2022年推出的計(jì)劃推薦版，則意味著至少會(huì)有兩個(gè)瀏覽器會(huì)完全的支持HTML5的所有特性。2022年聽(tīng)起來(lái)似乎很遙遠(yuǎn)，但通過(guò)觀察現(xiàn)階段chrome, firefox , safari，IE等瀏覽器對(duì)HTML5的支持程度，可以看出各大瀏覽器廠商都非常積極。應(yīng)該不需要到2022年就會(huì)有至少兩個(gè)瀏覽器支持HTML5。因此現(xiàn)在關(guān)注和討論HTML5，了解HTML5的新特性，為以后的產(chǎn)品規(guī)劃并非毫無(wú)意義。

HTML5其實(shí)是關(guān)于圖像，位置，存儲(chǔ)，速度的優(yōu)化和改進(jìn)，以下分別論述。

圖像：
到目前為止，基本上想要直接在網(wǎng)頁(yè)上進(jìn)行繪圖還是不能輕易完成的，即使是幾何圖形也不可以。在瀏覽器當(dāng)中直接能跟圖片的交互操作也很有限，多數(shù)是保存和點(diǎn)擊。如果希望能夠跟圖片進(jìn)行更多的操作或者在瀏覽器當(dāng)中畫出圖形，就需要flash, silverlight 這類插件來(lái)幫忙。

HTML5了解人們的需求，HTML5已經(jīng)確定引入canvas標(biāo)簽，通過(guò)canvas，用戶將可以動(dòng)態(tài)的生成各種圖形圖像，圖表以及動(dòng)畫。下面是一個(gè)示例網(wǎng)站，展示了不通過(guò)插件，使用HTML5直接繪制圖片有興趣的朋友可以自己親自去試玩一下。

不僅如此，HTML5也賦予圖片圖形更多的交互可能，HTML5的canvas標(biāo)簽還能夠配合javascript來(lái)利用鍵盤控制圖形圖像，這無(wú)疑為現(xiàn)有的網(wǎng)頁(yè)游戲提供了新的選擇和更好的維護(hù)性和通用性，脫離了flash插件的網(wǎng)頁(yè)游戲必然能夠獲得更大的訪問(wèn)量，更多的用戶。一些統(tǒng)計(jì)數(shù)據(jù)表格也可以通過(guò)使用canvas標(biāo)簽來(lái)達(dá)到和用戶的交互，例如某網(wǎng)站對(duì)2009年德國(guó)的大選情況統(tǒng)計(jì)就全部通過(guò)了HTML5來(lái)實(shí)現(xiàn)用戶點(diǎn)擊和數(shù)據(jù)的變更，點(diǎn)選某個(gè)區(qū)域就可以實(shí)時(shí)的看到該區(qū)域各黨派選票率，大大增強(qiáng)了統(tǒng)計(jì)圖表的可讀性。

通過(guò)HTML5對(duì)圖形圖像的新特性，未來(lái)可能會(huì)有在線繪圖的工具和應(yīng)用，人們將不再需要安裝painter這類基本的繪圖軟件，而直接使用基于瀏覽器的應(yīng)用。而對(duì)用戶體驗(yàn)人員和開(kāi)發(fā)者來(lái)說(shuō)，將能夠在用戶毫不知情的情況下收集和生成用戶鼠標(biāo)的瀏覽軌跡，從而生成一部分可用的熱點(diǎn)圖，這對(duì)于找出網(wǎng)站的不足，提升用戶體驗(yàn)有著重要作用。現(xiàn)在對(duì)canvas標(biāo)簽的支持情況如下，可以看到，基本所有的瀏覽器都已經(jīng)不同程度上支持了這一特性。

位置：

這個(gè)大頭針圖標(biāo)從2010年到2011年在各類應(yīng)用和互聯(lián)網(wǎng)上應(yīng)該是非?；鸨税?？沒(méi)錯(cuò)，就是地理位置，各處都可以看到人們?cè)诤灥剑檎易约寒?dāng)前的地理位置和周邊。作為新標(biāo)準(zhǔn)的HTML5自然也不會(huì)置身事外，HTML5通過(guò)提供應(yīng)用接口—Geolocation API，在用戶允許的情況下共享當(dāng)前的地理位置信息，并為用戶提供其他相關(guān)的信息。

HTML5的Geolocation API主要特點(diǎn)在于：1. 本身不去獲取用戶的位置，而是通過(guò)其他三方接口來(lái)獲取，例如IP,GPS,WIFI等方式。2. 用戶可以隨時(shí)開(kāi)啟和關(guān)閉，在被程序調(diào)用時(shí)也會(huì)首先征得用戶同意，保證了用戶的隱私。

存儲(chǔ)以及速度：
現(xiàn)在，web應(yīng)用的火爆已經(jīng)是不折不扣的現(xiàn)實(shí)，并且相對(duì)傳統(tǒng)的應(yīng)用,web應(yīng)用不需要安裝，所占空間小的特性使其具備傳統(tǒng)軟件應(yīng)用所不具備的優(yōu)勢(shì)，然而，目前制約web應(yīng)用最大的問(wèn)題在于網(wǎng)絡(luò)連接不能夠無(wú)時(shí)無(wú)處。在飛機(jī)上，汽車上，火車上，有很多地方都無(wú)法被網(wǎng)絡(luò)信號(hào)所覆蓋，因此web應(yīng)用也就無(wú)法使用。

HTML5的離線存儲(chǔ)使得這個(gè)問(wèn)題迎刃而解。HTML5的web storage API 采用了離線緩存，會(huì)生成一個(gè)清單文件（manifest file），這個(gè)清單文件實(shí)質(zhì)就是一系列的URL列表文件，這些URL分別指向頁(yè)面當(dāng)中的HTML,CSS,Javascrpit,圖片等相關(guān)內(nèi)容。當(dāng)使用離線應(yīng)用時(shí)，應(yīng)用會(huì)引入這一清單文件，瀏覽器會(huì)讀取這一文件，下載相應(yīng)的文件，并將其緩存到本地。使得這些web應(yīng)用能夠脫離網(wǎng)絡(luò)使用，而用戶在離線時(shí)的更改也同樣會(huì)映射到清單文件中，并在重新連線之后將更改返回應(yīng)用，工作方式與我們現(xiàn)在所使用的網(wǎng)盤有著異曲同工之處。

感興趣的朋友們可以試下這個(gè)網(wǎng)站，就屬于便攜筆記本的離線應(yīng)用，可以在離線的時(shí)候記錄一些便簽，在下次上線，或使用其他平臺(tái)登錄時(shí)，仍然能夠看到之前的記錄。

緩存的強(qiáng)大并不止在于離線應(yīng)用，同樣在于對(duì)cookies的替代，目前我們經(jīng)常使用的保存網(wǎng)站密碼，使用的就是cookies將密碼信息緩存到本地，當(dāng)需要時(shí)再發(fā)送至服務(wù)器端。然而，cookies有其本身的缺點(diǎn)—4KB的大小和反復(fù)在服務(wù)器和本地之間傳輸，并且無(wú)法被加密。對(duì)于cookies的反復(fù)傳輸，不僅浪費(fèi)了使用者的帶寬、供應(yīng)商的服務(wù)器的性能，更增加了被泄露的危險(xiǎn)。

Web storage API 解救了cookies, 據(jù)現(xiàn)有的資料，web storage API將至少支持4M的空間作為緩存，對(duì)于日常的清單文件和基礎(chǔ)信息，應(yīng)該已經(jīng)足夠使用了，畢竟4KB我們不是都使用了這么多年了？速度的提升方式在于，webstorage API 將不再無(wú)休止的傳輸相同的數(shù)據(jù)給服務(wù)器，而只在服務(wù)器請(qǐng)求和做出更改時(shí)傳輸變更的必須文件，這樣就大大節(jié)省了帶寬，也減輕了服務(wù)器的壓力。可謂是一舉數(shù)得!

小結(jié)：
HTML5的還有很多令人心動(dòng)的特性和新功能，限于篇幅無(wú)法一一舉出，但我對(duì)于HTML5的前景還是非?？春玫模吘关S富web應(yīng)用的大勢(shì)已經(jīng)掀起，web2.0的浪潮也正在繼續(xù)，讓我們共同期待HTML5的降臨

參考：

(本文出自騰訊CDC博客:?http://cdc.tencent.com/?p=4012)