HTML5技術調研報告

1、目 錄1. 背景及現(xiàn)狀12. HTML5新特性22.1. worker 多線程22.2. 雙向通信WebSocket22.2.1. 當前的Web通信輪詢（Polling）22.2.2. HTML5 WebSocket32.3. 視頻音頻支持42.3.1. 支持格式42.3.2. HTML5視頻音頻應用42.4. 圖像繪制42.4.1. Canvas標簽42.4.2. 圖像繪制應用52.5. 位置服務52.6. 本地存儲62.7. 離線緩存以及速度6圖目錄11 HTML5版本發(fā)布時間121輪詢和WebSocket 應用程序之間的網絡吞吐量322 HTML5圖像繪制應用51. 背景及現(xiàn)狀HTML

2、標準自1999年12月發(fā)布的 HTML 4.01 后，后繼的 HTML 5 和其它標準被束之高閣，為了推動web標準化運動的發(fā)展，一些公司聯(lián)合起來，成立了一個叫做 Web Hypertext Application Technology Working Group （Web 超文本應用技術工作組 - WHATWG） 的組織，HTML5草案的前身名為 Web Applications 1.0，於2004年被 WHATWG 提出，于2007年被 W3C 接納，并成立了新的 HTML 工作團隊。HTML 5 的第一份正式草案已于2008年1月22日公布。該團隊為HTML5建立的規(guī)則如下： 新特性應該

3、基于 HTML、CSS、DOM 以及 JavaScript。 減少對外部插件的需求（比如 Flash） 更優(yōu)秀的錯誤處理 更多取代腳本的標記 HTML5 應該獨立于設備 開發(fā)進程應對公眾透明總的來說，HTML 5有兩大特點：首先，強化了 Web 網頁的表現(xiàn)性能。其次，追加了本地數(shù)據(jù)庫等 Web 應用的功能。由圖1-1可以看出，在2012年，將會由W3C發(fā)布候選推薦版，這個版本的發(fā)布就代表著HTML5的規(guī)范編寫已經完成了。而2022年推出的計劃推薦版，則意味著至少會有兩個瀏覽器會完美的支持HTML5的所有特性。2022年聽起來似乎很遙遠，但通過觀察現(xiàn)階段chrome, firefox , saf

4、ari，IE等瀏覽器對HTML5的支持程度，可以看出各大瀏覽器廠商都非常積極。應該不需要到2022年就會有至少兩個瀏覽器支持HTML5。因此現(xiàn)在關注和討論HTML5，了解HTML5的新特性，為以后的產品規(guī)劃并非毫無意義。11 HTML5版本發(fā)布時間2. HTML5新特性2.1. worker 多線程在過去很年多里面HTML的一個限制就是多線程，所有運算和展示都在主頁面一個線程中，預算稍微大一點網頁就卡，對整個用戶體驗、性能的影響很大。有了HTML5這個問題完全解決了。多線程支持，在與主頁面分開的線程中運行處理過程，保留頁面以用于主要的功能，并可以同時算多個東西，充分利用了CPU資源。HTML5

5、的多線程是worker模式，大體的概念是：線程的創(chuàng)建由一個worker來決定，維護了一個線程池。Web Workers 是 HTML5 提供的一個javascript多線程解決方案，我們可以將一些大計算量的代碼交由web Worker運行而不凍結用戶界面。HTML5的多線程的特性：1. 在線程中是不能操作DOM節(jié)點的（想要操作的話只能發(fā)送消息給worker創(chuàng)建者回調函數(shù)）；2. 多線程的本質其實是真正的系統(tǒng)線程；3. 能使用setTimeout()，clearTimeout()，setInterval()，clearInterval()等函數(shù)；4. 能進行IO操作（ajax）。2.2. 雙向通

6、信WebSocketWebSockets是在一個(TCP)接口進行雙向通信的技術，PUSH技術類型。使用ws或wss協(xié)議。WebSocket目前由W3C進行標準化，已經受到Firefox 4、Chrome 4、Opera 10.70以及Safari 5等瀏覽器的支持。2.2.1. 當前的Web通信輪詢（Polling）通常，當瀏覽器訪問一個網頁時，會向托管該網頁的Web服務器發(fā)送一個HTTP請求，Web服務器識別這一請求，并返回響應。例如，新聞報道，門票銷售等，在瀏覽器渲染頁面時，響應可能會過期，如果你想獲得最新的“實時”信息，你可以不斷地手動刷新頁面，但顯然這不是最好的辦法。目前提供的實時W

7、eb程序主要是圍繞輪詢和其它服務器端推送技術進行的，最著名的是Comnet，它推遲了HTTP響應的結束，基于Comnet的推送通常是使用JavaScript結合長輪詢(Long Polling)或流連接策略實現(xiàn)的。使用輪詢時，瀏覽器定期發(fā)送HTTP請求，并立即收到響應。這種方式比不斷刷新好一些，瀏覽器不用一閃一閃的重新加載了，而且只傳送感興趣的那一小部分數(shù)據(jù)，占用帶寬變小。使用長輪詢時，瀏覽器向服務器發(fā)送一個請求，服務器在既定期限內保持請求處于打開狀態(tài)，如果在此期間收到通知，向客戶端發(fā)送一個包含消息的響應，如果在此期間沒有收到消息，服務器發(fā)送一個響應終止打開的請求。長輪詢相對于一般輪詢的優(yōu)點在

8、于，數(shù)據(jù)一旦可用，便立即從服務器發(fā)送到客戶機，因此沒有延時，但是服務器有大量消息要推送的時候，長輪詢與輪詢相比，實際并沒有什么本質的提高。使用流時，瀏覽器發(fā)送一個完整的請求，服務器發(fā)送一個響應，并保存打開狀態(tài)，然后不斷更新使其一直保持打開（或在一段時間內保持打開），無論何時消息準備好發(fā)送時，響應就更新，但服務器不會發(fā)送一個結束的響應，因此連接就一直保持打開狀態(tài)，后面發(fā)送的消息就可以繼續(xù)使用這個連接。但流仍然是封裝在 HTTP中的，阻擾了防火墻和代理服務器選擇緩沖區(qū)中的內容進行響應，因此消息傳遞的時間就延長了。許多流式Comnet解決方案都轉向了長輪詢，另外，TLS（SSL）連接可以用來屏蔽來自

9、緩沖區(qū)的響應，但在這種情況下，每個連接消耗的服務器資源更多了。最終，所有這些方法都提供了實時數(shù)據(jù)，包含HTTP請求和響應頭，其中包含許多額外的，不必要的頭數(shù)據(jù)。為了模擬基于半雙工HTTP上的全雙工通信，目前的許多解決方案都使用了兩個連接：一個下行連接，一個上行連接。維護和協(xié)調這兩個連接需要大量的系統(tǒng)開銷，并增加了復雜性。簡言之，HTTP不是為實時的，全雙工通信設計的，如圖2-1所示，它顯示了輪詢和WebSocket 應用程序之間的網絡吞吐量。21輪詢和WebSocket 應用程序之間的網絡吞吐量2.2.2. HTML5 WebSocketWebSocket通過一個單一的Socket實現(xiàn)一個全雙

10、工，雙向通信的信道，實現(xiàn)了服務端完美的PUSH。與Ajax相比，Ajax技術需要客戶端發(fā)起請求，而WebSocket服務器和客戶端可以彼此相互推送信息；XHR受到域的限制，而WebSocket允許跨域通信。HTML 5 Web Socket提供了一個真正的標準，可以使用它構建可擴展的實時Web應用程序。此外，由于它提供了一個瀏覽器自帶的套接字，消除了Comet解決方案的許多問題，Web Socket顯著降低了系統(tǒng)開銷和復雜性，減少不必要的網絡流量和延遲。瀏覽器通過JavaScript 向服務器發(fā)出建立WebSocket 連接的請求，連接建立以后，客戶端和服務器端就可以通過TCP連接直接交換數(shù)據(jù)

11、。HTML 5 Web Socket在實時Web應用擴展性方面朝前邁出了一大步，HTML 5 Web Socket可以提供5000：1或1000：1的比例（根據(jù)HTTP消息頭大小）減少不必要的HTTP頭流量和3：1的比例減少通信延遲，這不是一個漸進式的改進，而是一次革命性的飛躍。2.3. 視頻音頻支持目前，在網頁上嵌入音頻或視頻，最常用的是Flash等格式。這需要Adobe Flash插件，并且結合和標簽，除此之外，F(xiàn)lash具有不開放，耗電，占用系統(tǒng)資源大等缺點。大多數(shù)用戶已經安裝了Flash插件（事實上，大概95%的上網用戶都裝有Flash的某個版本），但HTML 5的支持者正在推動一個開

12、放的，不需要任何插件的多媒體標準。這就是HTML 5的新標簽和帶來的新特性，他提供了一個嵌入音頻或視頻（以及與其交互）而不需要類似Flash的私有插件的方法。然而，多媒體并非那么簡單。不僅僅是瀏覽器需要理解這些標簽，而且需要一個必要的編碼譯碼器來播放音頻或視頻。明顯的解決方法只能是HTML 5規(guī)范的設計者們選擇一個編碼譯碼器，并且讓每一個瀏覽器執(zhí)行。2.3.1. 支持格式audio 元素目前支持三種主流的音頻格式，分別是mp3、wav及ogg；video元素目前支持三類視頻格式，分別是ogg、mpeg4、webM，這三種類格式代表的視頻文件為：Ogg = 帶有 Theora 視頻編碼和 Vor

13、bis 音頻編碼的 Ogg 文件MPEG4 = 帶有 H.264 視頻編碼和 AAC 音頻編碼的 MPEG 4 文件WebM = 帶有 VP8 視頻編碼和 Vorbis 音頻編碼的 WebM 文件2.3.2. HTML5視頻音頻應用Google宣布推出開發(fā)者預覽版的WebRTC，這是一個可讓網友之間通過音頻和視頻實時交流的開放工程，只要是支持Real-Time Communications (RTC)的瀏覽器都可實現(xiàn)實時音頻和視頻聊天。這個新的技術使用了HTML 5和簡單的Javascript API，開發(fā)者可以很輕松的創(chuàng)建RTC應用，只要瀏覽器支持，就可在不安裝任何擴展和插件的前提下進行實時

14、音頻和視頻聊天。Google希望用這個開源工程擊敗微軟的Skype和蘋果的Facetime。2.4. 圖像繪制到目前為止，基本上想要直接在網頁上進行繪圖還是不能輕易完成的，即使是幾何圖形也不可以。在瀏覽器當中直接能跟圖片的交互操作也很有限，多數(shù)是保存和點擊。如果希望能夠跟圖片進行更多的操作或者在瀏覽器當中畫出圖形，就需要flash, silverlight 這類插件來幫忙。2.4.1. Canvas標簽HTML5通過引入canvas標簽使用戶可以動態(tài)的生成各種圖形圖像，圖表以及動畫。canvas 元素本身是沒有繪圖能力，其功能是創(chuàng)建一個畫布。所有的繪制工作必須在 JavaScript 內部完成

15、。HTML5也賦予圖片圖形更多的交互可能，HTML5的canvas標簽還能夠配合javascript來利用鍵盤控制圖形圖像，這無疑為現(xiàn)有的網頁游戲提供了新的選擇和更好的維護性和通用性，脫離了flash插件的網頁游戲必然能夠獲得更大的訪問量，更多的用戶。一些統(tǒng)計數(shù)據(jù)表格也可以通過使用canvas標簽來達到和用戶的交互，例如某網站對2009年德國的大選情況統(tǒng)計就全部通過了HTML5來實現(xiàn)用戶點擊和數(shù)據(jù)的變更，點選某個區(qū)域就可以實時的看到該區(qū)域各黨派選票率，大大增強了統(tǒng)計圖表的可讀性。通過HTML5對圖形圖像的新特性，未來可能會有在線繪圖的工具和應用，人們將不再需要安裝painter這類基本的繪圖軟

16、件，而直接使用基于瀏覽器的應用。而對用戶體驗人員和開發(fā)者來說，將能夠在用戶毫不知情的情況下收集和生成用戶鼠標的瀏覽軌跡，從而生成一部分可用的熱點圖，這對于找出網站的不足，提升用戶體驗有著重要作用。2.4.2. 圖像繪制應用示例網站/Write展示了不通過插件，使用HTML5直接繪制圖片的功能，圖2-1是示例網站效果截圖：22 HTML5圖像繪制應用2.5. 位置服務HTML5提供了一組API用來獲取用戶的地理位置，如果瀏覽器支持且設備具有定位功能，就能夠直接使用這組API來獲取當前位置信息。該API是navigator對象的一個屬性 Geolocat

17、ion。目前除了ie內核瀏覽器外，其他瀏覽器的最新版本基本都支持Geolocation。同時，移動設備IOS 3.0+ 和 Android 2.0+ 系統(tǒng)也支持它，現(xiàn)在很多移動設備的應用加入了地理定位的元素。navigator.geolocation有三個方法getCurrentPosition()、watchPosition()和clearWatch()，其功能分別是檢索但只檢索一次用戶的當前位置、定期輪詢用戶的位置，查看用戶的位置是否發(fā)生改變、終止正在進行的watchPosition()。HTML5的Geolocation API主要特點在于：1. 本身不去獲取用戶的位置，而是通過其他三方

18、接口來獲取，例如IP,GPS,WIFI等方式。2. 用戶可以隨時開啟和關閉，在被程序調用時也會首先征得用戶同意，保證了用戶的隱私。2.6. 本地存儲本地持久化存儲一直是本地客戶端程序優(yōu)于 web 程序的一個方面。在 web 早期就發(fā)明了 cookie，目的是在本地持久存儲少量數(shù)據(jù)。但是，cookie 有三個致命缺點： cookie 會包含進每一個 HTTP 請求，因此會減慢 web 應用程序，產生不必要的重復數(shù)據(jù)； cookie 會包含進每一個 HTTP 請求，因此網絡上發(fā)送的數(shù)據(jù)就不能加密（除非你的整個應用都是用的 SSL）； cookie 限制數(shù)據(jù)大小為 4 KB這已經足以降低你的應用程序

19、的速度，但是 4 KB 的大小有時候確實會捉襟見肘。我們真正想要的是： 更大的存儲空間； 在客戶端上的； 不受頁面刷新的影響； 不需要提交到服務器；“HTML5 存儲（HTML5 Storage）”，也就是標準上說的 Web Storage，這曾經是 HTML5 標準的一部分，后來由于某些不和諧的政治因素從 HTML5 分離，成為一個獨立的標準。有些瀏覽器廠商也稱為“本地存儲 Local Storage” 或者 “DOM 存儲 DOM Storage”。簡單來說，HTML5 Storage就是一種讓 web 頁面能夠以鍵值對的形式，在客戶端web瀏覽器中將數(shù)據(jù)存儲在本地的方法。就像 cookie 一樣，這種數(shù)據(jù)在你離開 web 站點、關閉標簽頁、退出瀏覽器等等的時候依然保存。不同于 cookie 的地方是，這個數(shù)據(jù)不會被發(fā)送到遠程 web 服務器（除非你自己手動發(fā)送）。另外，不同于我們前面所說的那些解決方案，這種機制是 web 瀏覽器原生提供的，所以不需要第三方插件的支持。2.7. 離線緩存以及速度相對傳統(tǒng)的應用,web應用不需要安裝，所占空間小的特性使其具備傳統(tǒng)軟件應用所不具備的優(yōu)勢，然而，目前制約web應用最大的問題在于網絡連接不能夠無時無處，連接斷了，數(shù)據(jù)也就沒了。在飛機上，汽車上，火車上，有很多地方都無法被網絡信號所覆