淺談HTML5的新特性

2014年10月29日，W3C宣佈，通過接近8年的艱苦努力，HTML5標準規範終於制定完成。

HTML5將會取代1999年制定的HTML 4.0一、XHTML 1.0標準，使網絡標準達到符合當代的網絡需求，爲桌面和移動平臺帶來無縫銜接的豐富內容。

HTML5 的新特性

① 語義特性（Semantic）

HTML5賦予網頁更好的意義和結構。

② 本地存儲特性（OFFLINE & STORAGE）

基於HTML5開發的網頁APP擁有更短的啓動時間，更快的聯網速度，這些全得益於HTML5 APP Cache，以及本地存儲功能。

③ 設備訪問特性 (DEVICE ACCESS)

從Geolocation功能的API文檔公開以來，HTML5爲網頁應用開發者們提供了更多功能上的優化選擇，帶來了更多體驗功能的優點。HTML5提供了史無前例的數據與應用接入開放接口。使外部應用能夠直接與瀏覽器內部的數據直接相連，例如視頻影音可直接與microphones及攝像頭相聯。

④ 鏈接特性（CONNECTIVITY）

更有效的鏈接工做效率，使得基於頁面的實時聊天，更快速的網頁遊戲體驗，更優化的在線交流獲得了實現。HTML5擁有更有效的服務器推送技術，Server-Sent Event和WebSockets就是其中的兩個特性，這兩個特性可以幫助咱們實現服務器將數據「推送」到客戶端的功能。

⑤ 網頁多媒體特性(MULTIMEDIA)

支持網頁端的Audio、Video等多媒體功能， 與網站自帶的APPS，攝像頭，影音功能相得益彰。

⑥ 三維、圖形及特效特性（3D, Graphics & Effects）

基於SVG、Canvas、WebGL及CSS3的3D功能，用戶會驚歎於在瀏覽器中，所呈現的驚人視覺效果。

⑦ 性能與集成特性（Performance & Integration）

沒有用戶會永遠等待你的Loading——HTML5會經過XMLHttpRequest2等技術，解決之前的跨域等問題，幫助您的Web應用和網站在多樣化的環境中更快速的工做。

---

下面分別對這七個新特性進行研究：

① 語義特性（Semantic）

　　HTML4中的內容標籤級別相同，沒法區分各部份內容。

　　而HTML5中的內容標籤互相獨立，級別不一樣，搜索引擎以及統計軟件等都可快速識別各部份內容。

　　這些標籤在新聞類網站，博客類網站頗有用。

　　最大的問題就是當使用這些新的語義元素時，那些不支持的瀏覽器如何處理這些元素。

② 本地存儲特性（OFFLINE & STORAGE）

　　HTML5提供了網頁存儲的API，方便Web應用的離線使用。除此以外，新的API相對於cookie也有着高安全性，高效率，更大空間等優勢。

　　HTML5離線存儲包含 應用程序緩存，本地存儲，索引數據庫，文件接口。

　（1）應用程序緩存（Application Cache）

　　  應用程序緩存爲應用帶來三個優點：

　　  離線瀏覽 – 用戶可在應用沒有因特網鏈接時進行訪問。

　　  速度 – 已緩存資源加載得更快。

　　  減小服務器負載 – 瀏覽器將只從服務器下載更新過或更改過的資源。

　　  Demo連接：http://www.ganecheng.tech/welcome_offline.html

　（2）本地存儲（Local Storage）

　　  最先的Cookies天然是你們都知道，問題主要就是過小，大概也就4KB的樣子，並且IE6只支持每一個域名20個cookies，太少了。優點就是你們都支持，並且支持得還蠻好。

　　  首先天然是檢測瀏覽器是否支持本地存儲。

　　  在HTML5中，本地存儲是一個window的屬性，包括localStorage和sessionStorage。

　　  從名字應該能夠很清楚的辨認兩者的區別，前者是一直存在本地的，後者只是伴隨着session，窗口一旦關閉就沒了。兩者用法徹底相同。

　（3）索引數據庫（Indexed DB）

　　 IndexedDB則更適合存儲如廣告等數據（它更象一個真正的數據庫）。

　　  通常來講,有兩種不一樣類型的數據庫:關係型和文檔型(也稱爲NoSQL或對象)。

　　  關係數據庫如SQL Server,MySQL,Oracle的數據存儲在表中。文檔數據庫如MongoDB,CouchDB,Redis將數據集做爲個體對象存儲。

　　  IndexedDB是一個文檔數據庫，它在徹底內置於瀏覽器中的一個沙盒環境中(強制依照（瀏覽器）同源策略)。

　　  若是您的應用程序真正須要一個客戶端數據庫，你想要達到的最高級別的採用可能,當IndexedDB不可用時，

　　  也許您的應用程序可能看起來須要選擇使用Web SQL來支持客戶端數據架構。

　（4）文件接口（File API）

③ 設備訪問特性 (DEVICE ACCESS)

　　大體包含 地理位置API ，媒體訪問API ，訪問聯繫人及事件，設備方向。

　　  好比說：地理定位、獲取麥克風、攝像頭、獲取重力感應、搖一搖功能……

④ 鏈接特性（CONNECTIVITY）

　　HTTP是無鏈接的，一次請求，一次響應。想要實現微信網頁版掃一掃登陸，網頁版微信聊天的功能，須要使用輪詢的方式達到長鏈接的效果，

　　  輪詢的大部分時間是在作無用功，浪費網絡，浪費資源。

　　  如今HTML5爲咱們帶來了更高效的鏈接方案 Web Sockets 和 Server-Sent Events 。

⑤ 網頁多媒體特性(MULTIMEDIA)

　　看的出來HTML5原生支持音視頻讓W3C很興奮。也是廣大開發者多年的期待。終於能夠將Flash踹入茅坑了。

　　  Audio和Video標籤

⑥ 三維、圖形及特效特性（3D, Graphics & Effects）

　　大體包含SVG（可縮放的矢量圖形）, Canvas（畫布）, WebGL（網頁圖形庫，3D繪圖標準）, 和 CSS3 3D。

　　 Canvas 與 SVG 的比較

　　 Canvas 
　　　　-依賴分辨率 
　　　　-不支持事件處理器 
　　　　-弱的文本渲染能力 
　　　　-可以以 .png 或 .jpg 格式保存結果圖像 
　　　　-最適合圖像密集型的遊戲，其中的許多對象會被頻繁重繪

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

⑦ 性能與集成特性（Performance & Integration）

　　 性能與集成特性主要包括兩個東西，Web Workers （網頁後臺任務）和 XMLHttpRequest 2（新的Ajax）。

 

參考連接：

　　http://blog.csdn.net/gane_cheng/article/details/52819118