HTML5技術(shù)調(diào)研報(bào)告

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

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

3、基于 HTML、CSS、DOM 以及 JavaScript。 減少對(duì)外部插件的需求（比如 Flash） 更優(yōu)秀的錯(cuò)誤處理 更多取代腳本的標(biāo)記 HTML5 應(yīng)該獨(dú)立于設(shè)備 開(kāi)發(fā)進(jìn)程應(yīng)對(duì)公眾透明總的來(lái)說(shuō)，HTML 5有兩大特點(diǎn)：首先，強(qiáng)化了 Web 網(wǎng)頁(yè)的表現(xiàn)性能。其次，追加了本地?cái)?shù)據(jù)庫(kù)等 Web 應(yīng)用的功能。由圖1-1可以看出，在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 , saf

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

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

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

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

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

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

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

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

12、放的，不需要任何插件的多媒體標(biāo)準(zhǔn)。這就是HTML 5的新標(biāo)簽和帶來(lái)的新特性，他提供了一個(gè)嵌入音頻或視頻（以及與其交互）而不需要類似Flash的私有插件的方法。然而，多媒體并非那么簡(jiǎn)單。不僅僅是瀏覽器需要理解這些標(biāo)簽，而且需要一個(gè)必要的編碼譯碼器來(lái)播放音頻或視頻。明顯的解決方法只能是HTML 5規(guī)范的設(shè)計(jì)者們選擇一個(gè)編碼譯碼器，并且讓每一個(gè)瀏覽器執(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視頻音頻應(yīng)用Google宣布推出開(kāi)發(fā)者預(yù)覽版的WebRTC，這是一個(gè)可讓網(wǎng)友之間通過(guò)音頻和視頻實(shí)時(shí)交流的開(kāi)放工程，只要是支持Real-Time Communications (RTC)的瀏覽器都可實(shí)現(xiàn)實(shí)時(shí)音頻和視頻聊天。這個(gè)新的技術(shù)使用了HTML 5和簡(jiǎn)單的Javascript API，開(kāi)發(fā)者可以很輕松的創(chuàng)建RTC應(yīng)用，只要瀏覽器支持，就可在不安裝任何擴(kuò)展和插件的前提下進(jìn)行實(shí)時(shí)

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

15、。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這類基本的繪圖軟

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

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

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

19、的速度，但是 4 KB 的大小有時(shí)候確實(shí)會(huì)捉襟見(jiàn)肘。我們真正想要的是： 更大的存儲(chǔ)空間； 在客戶端上的； 不受頁(yè)面刷新的影響； 不需要提交到服務(wù)器；“HTML5 存儲(chǔ)（HTML5 Storage）”，也就是標(biāo)準(zhǔn)上說(shuō)的 Web Storage，這曾經(jīng)是 HTML5 標(biāo)準(zhǔn)的一部分，后來(lái)由于某些不和諧的政治因素從 HTML5 分離，成為一個(gè)獨(dú)立的標(biāo)準(zhǔn)。有些瀏覽器廠商也稱為“本地存儲(chǔ) Local Storage” 或者 “DOM 存儲(chǔ) DOM Storage”。簡(jiǎn)單來(lái)說(shuō)，HTML5 Storage就是一種讓 web 頁(yè)面能夠以鍵值對(duì)的形式，在客戶端web瀏覽器中將數(shù)據(jù)存儲(chǔ)在本地的方法。就像 cookie 一樣，這種數(shù)據(jù)在你離開(kāi) web 站點(diǎn)、關(guān)閉標(biāo)簽頁(yè)、退出瀏覽器等等的時(shí)候依然保存。不同于 cookie 的地方是，這個(gè)數(shù)據(jù)不會(huì)被發(fā)送到遠(yuǎn)程 web 服務(wù)器（除非你自己手動(dòng)發(fā)送）。另外，不同于我們前面所說(shuō)的那些解決方案，這種機(jī)制是 web 瀏覽器原生提供的，所以不需要第三方插件的支持。2.7. 離線緩存以及速度相對(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ú)處，連接斷了，數(shù)據(jù)也就沒(méi)了。在飛機(jī)上，汽車上，火車上，有很多地方都無(wú)法被網(wǎng)絡(luò)信號(hào)所覆