天天看點

HTML5新增功能

HTML5 新增功能與特性介紹 發表于2011 年 07 月 14 日  ⁄ 營運推廣  ⁄ 5條評論 ⁄ 被圍觀 9,550 次

Web2.0 帶來的豐富網際網路技術讓所有人都享受到了技術發展和體驗進步的樂趣。作為下一代網際網路标準,HTML5 自然也是備受期待和矚目,技術人員、設計者、網際網路愛好者們都在熱議 HTML5 究竟能帶來什麼。那麼就一起來窺探一下這個還未誕生就已經聲名在外的新标準吧。

在探讨 HTML5 的新特性之前,先說 HTML5 究竟離我們還有多遠?用一張時間軸來說明兩個關鍵點。

HTML5新增功能

如圖,在2012年,将會由 W3C 釋出候選推薦版,這個版本的釋出就代表着 HTML5 的規範編寫已經完成了。而2022年推出的計劃推薦版,則意味着至少會有兩個浏覽器會完全的支援 HTML5 的所有特性。2022年聽起來似乎很遙遠,但通過觀察現階段chrome, firefox , safari,IE等浏覽器對 HTML5 的支援程度,可以看出各大浏覽器廠商都非常積極。應該不需要到2022年就會有至少兩個浏覽器支援 HTML5。是以現在關注和讨論 HTML5,了解 HTML5 的新特性,為以後的産品規劃并非毫無意義。

HTML5其實是關于圖像,位置,存儲,速度的優化和改進,以下分别論述。

圖像

到目前為止,基本上想要直接在網頁上進行繪圖還是不能輕易完成的,即使是幾何圖形也不可以。在浏覽器當中直接能跟圖檔的互動操作也很有限,多數是儲存和點選。如果希望能夠跟圖檔進行更多的操作或者在浏覽器當中畫出圖形,就需要 flash, silverlight 這類插件來幫忙。

HTML5新增功能

HTML5 了解人們的需求,HTML5 已經确定引入 canvas 标簽,通過 canvas,使用者将可以動态的生成各種圖形圖像,圖表以及動畫。下面是一個示例網站,展示了不通過插件,使用 HTML5 直接繪制圖檔有興趣的朋友可以自己親自去試玩一下。

HTML5新增功能

不僅如此,HTML5 也賦予圖檔圖形更多的互動可能,HTML5 的 canvas 标簽還能夠配合 javascript 來利用鍵盤控制圖形圖像,這無疑為現有的網頁遊戲提供了新的選擇和更好的維護性和通用性,脫離了 flash 插件的網頁遊戲必然能夠獲得更大的通路量,更多的使用者。一些統計資料表格也可以通過使用 canvas 标簽來達到和使用者的互動,例如某網站對2009年德國的大選情況統計就全部通過了 HTML5 來實作使用者點選和資料的變更,點選某個區域就可以實時的看到該區域各黨派選票率,大大增強了統計圖表的可讀性。

HTML5新增功能

通過 HTML5 對圖形圖像的新特性,未來可能會有線上繪圖的工具和應用,人們将不再需要安裝 painter 這類基本的繪圖軟體,而直接使用基于浏覽器的應用。而對使用者體驗人員和開發者來說,将能夠在使用者毫不知情的情況下收集和生成使用者滑鼠的浏覽軌迹,進而生成一部分可用的熱點圖,這對于找出網站的不足,提升使用者體驗有着重要作用。現在對 canvas 标簽的支援情況如下,可以看到,基本所有的浏覽器都已經不同程度上支援了這一特性。

HTML5新增功能

位置

HTML5新增功能

這個大頭針圖示從2010年到2011年在各類應用和網際網路上應該是非常火爆了吧?沒錯,就是地理位置,各處都可以看到人們在簽到,查找自己目前的地理位置和周邊。作為新标準的 HTML5 自然也不會置身事外,HTML5 通過提供應用接口—Geolocation API,在使用者允許的情況下共享目前的地理位置資訊,并為使用者提供其他相關的資訊。

HTML5 的 Geolocation API 主要特點在于:1. 本身不去擷取使用者的位置,而是通過其他三方接口來擷取,例如IP,GPS,WIFI等方式。2. 使用者可以随時開啟和關閉,在被程式調用時也會首先征得使用者同意,保證了使用者的隐私。

存儲以及速度

現在,Web 應用的火爆已經是不折不扣的現實,并且相對傳統的應用,Web應用不需要安裝,所占空間小的特性使其具備傳統軟體應用所不具備的優勢,然而,目前制約 Web 應用最大的問題在于網絡連接配接不能夠無時無處。在飛機上,汽車上,火車上,有很多地方都無法被網絡信号所覆寫,是以 Web 應用也就無法使用。

HTML5新增功能

HTML5 的離線存儲使得這個問題迎刃而解。HTML5 的 Web storage API 采用了離線緩存,會生成一個清單檔案(manifest file),這個清單檔案實質就是一系列的 URL 清單檔案,這些URL分别指向頁面當中的 HTML,CSS,Javascrpit,圖檔等相關内容。當使用離線應用時,應用會引入這一清單檔案,浏覽器會讀取這一檔案,下載下傳相應的檔案,并将其緩存到本地。使得這些web應用能夠脫離網絡使用,而使用者在離線時的更改也同樣會映射到清單檔案中,并在重新連線之後将更改傳回應用,工作方式與我們現在所使用的網盤有着異曲同工之處。

HTML5新增功能

緩存的強大并不止在于離線應用,同樣在于對cookies的替代,目前我們經常使用的儲存網站密碼,使用的就是cookies将密碼資訊緩存到本地,當需要時再發送至伺服器端。然而,cookies有其本身的缺點—4KB的大小和反複在伺服器和本地之間傳輸,并且無法被加密。對于cookies的反複傳輸,不僅浪費了使用者的帶寬、供應商的伺服器的性能,更增加了被洩露的危險。

Web storage API  解救了cookies, 據現有的資料,Web storage API 将至少支援 4M 的空間作為緩存,對于日常的清單檔案和基礎資訊,應該已經足夠使用了,畢竟 4KB 我們不是都使用了這麼多年了?速度的提升方式在于,webstorage API 将不再無休止的傳輸相同的資料給伺服器,而隻在伺服器請求和做出更改時傳輸變更的必須檔案,這樣就大大節省了帶寬,也減輕了伺服器的壓力。可謂是一舉數得!

小結

HTML5的還有很多令人心動的特性和新功能,限于篇幅無法一一舉出,但我對于HTML5的前景還是非常看好的,畢竟豐富web應用的大勢已經掀起,web2.0的浪潮也正在繼續,讓我們共同期待HTML5的降臨。(本文出自Tencent CDC Blog,轉載時請注明出處)