作者：小寶
前言：每一種新技術(shù)剛展現(xiàn)在人們面前時(shí),，人們總是習(xí)慣于從技術(shù)特性的角度（而不是用戶需求）來(lái)考慮,，能用它來(lái)做些什么。人們會(huì)先用它來(lái)重寫已有的應(yīng)用,，或?qū)崿F(xiàn)其它技術(shù)已經(jīng)能實(shí)現(xiàn)的功能,。這是一個(gè)必要的探索和積累階段。有些技術(shù)在經(jīng)歷了這個(gè)階段之后會(huì)得到蓬勃發(fā)展,，另外一些技術(shù)則像拿到了一把新的錘子到處敲敲打打,，結(jié)果發(fā)現(xiàn)它還是一把錘子，未免失望,。 1. Demo 關(guān)于HTML5已經(jīng)有很多Demo和教程網(wǎng)站了,，還有很多基于HTML5創(chuàng)建的開源項(xiàng)目，甚至《紐約時(shí)報(bào)》也已經(jīng)有了HTML5版本：http://www./skimmer/,。 最早的時(shí)候我到 http:/// 這個(gè)網(wǎng)站看HTML5的新功能,，邊看邊猜，然后對(duì)照著W3C的規(guī)范看,。 http:/// 是一個(gè)版式設(shè)計(jì)很有意思的網(wǎng)站,，假如你對(duì)W3C的一些比較簡(jiǎn)潔嚴(yán)謹(jǐn)?shù)拿枋龃嬉傻脑挘谶@里或許會(huì)找到滿意的解釋,。此外還有 w3school 等數(shù)不清的教程網(wǎng)站,，提供大量范例。 我也玩了一些HTML5編寫的網(wǎng)頁(yè)游戲,，包括在桌面電腦和手機(jī)上運(yùn)行的,，以及一些比較炫目的HTML5設(shè)計(jì)（例如網(wǎng)頁(yè)的模板、控件等）,，一方面我暗暗驚訝于HTML5的強(qiáng)大,，一方面也難免心生些許困惑：Is that all? What else? 或許是因?yàn)槲疫€沒(méi)看見一個(gè)殺手級(jí)別的HTML5應(yīng)用，類似iPhone的出現(xiàn)相對(duì)于同時(shí)代其它整個(gè)手機(jī)的意義,。 2. 從技術(shù)角度看 從技術(shù)的角度來(lái)看,，HTML5所帶來(lái)的好處是毋庸置疑的，尤其在數(shù)量和功能都劇增的移動(dòng)設(shè)備平臺(tái)（很多機(jī)構(gòu)和分析文章都預(yù)測(cè)，在不久的將來(lái),，移動(dòng)設(shè)備在數(shù)量上將超過(guò)桌面設(shè)備,，成為人們互聯(lián)網(wǎng)接入的第一選擇）；在網(wǎng)上搜一搜,，各種贊美之聲也是“罄竹難書”,，那么我們就反過(guò)來(lái)看一看，想一想,，HTML5的這些新特性是否仍有不足之處,，或者在使用上有哪些陷阱——尤其是針對(duì)移動(dòng)設(shè)備而言。 （從這里可以看到一個(gè)HTML5相比其前任的增減： http://www./TR/html5-diff/,。） 從HTML5新增的元素開始吧，這一部分貌似最簡(jiǎn)單,。 【HTML5新增排版元素】 在HTML5以前的歲月里,，我們一般通過(guò)<div>等標(biāo)簽來(lái)給一個(gè)網(wǎng)頁(yè)文檔劃分不同區(qū)域塊，HTML5則定義了一些新的,、能夠望文生義的基本語(yǔ)義來(lái)定義一片文檔的不同區(qū)域：<section> <header> <footer> <nav> <article> <aside> <figure>,。這個(gè)有點(diǎn)類似高級(jí)語(yǔ)言中的基本類庫(kù)：以前我們需要自己定義什么是header和footer，最麻煩之處還在于每個(gè)網(wǎng)站定義的風(fēng)格都各不相同,，現(xiàn)在HTML5統(tǒng)一了語(yǔ)法和語(yǔ)義,，一來(lái)節(jié)省開發(fā)者的時(shí)間和精力，二來(lái)也提供了相對(duì)統(tǒng)一的用戶體驗(yàn),。 隨之而來(lái)的問(wèn)題是,，開發(fā)者們何時(shí)可以自由的使用這些新標(biāo)簽？因?yàn)橛脩舯仨毶?jí)自己的瀏覽器（很多用戶甚至不知道如何升級(jí)）,，才能看到設(shè)計(jì)者所期望的效果,。這可不是一件簡(jiǎn)單的事情，稍有經(jīng)驗(yàn)的網(wǎng)頁(yè)開發(fā)人員肯定忘不了IE6時(shí)代各家瀏覽器之間的不兼容噩夢(mèng),，于是你必須得在代碼里探測(cè)用戶使用的是什么瀏覽器,，然后提供不同實(shí)現(xiàn)。任何一家有穩(wěn)定用戶流量的網(wǎng)站都不會(huì)輕易為了嘗試新技術(shù)而承擔(dān)老用戶因兼容性問(wèn)題而流失的后果,。 或許隨著時(shí)間的推移（例如Windows 7盜版的流行）這個(gè)問(wèn)題會(huì)輕而易舉的解決掉,，另外也有一些牛x的洋人提供了一些解決兼容性問(wèn)題的技術(shù)方案：“How to get HTML5 working in IE and Firefox 2” http:///how-to-get-html5-working-in-ie-and-firefox-2/ 【video/audio】 如果投票的話，<video>或許能成為人們最耳熟能詳?shù)腍TML5新特性之一,，因?yàn)閱滩妓拐f(shuō)有了HTML5 Video我們還要Flash干什么,？可是可是，還沒(méi)來(lái)得及高興起來(lái)的開發(fā)者們一定發(fā)現(xiàn)了一堆頭疼的問(wèn)題,，其中以視頻格式為甚,。這是W3C制定規(guī)范時(shí)，各大瀏覽器廠商們沒(méi)法解決的問(wèn)題，主要因?yàn)椴煌囊曨l格式涉及到不同的專利費(fèi)用和版權(quán)問(wèn)題,。 簡(jiǎn)單的說(shuō)有兩大陣營(yíng)：H.264和WebM（或者你更熟悉On2 VP8）,，Apple和微軟屬于前者，因?yàn)樗鼈儾糠謸碛衅浒鏅?quán),；Google和Mozilla屬于后者,，盡管后者也可能存在版權(quán)問(wèn)題，但財(cái)大氣粗的Google已經(jīng)將其買斷并開源了,，同時(shí)聲稱開發(fā)者遇到的版權(quán)問(wèn)題都可以交由它來(lái)搞定,。Google甚至聲稱在Chrome的 HTML5 <video> 標(biāo)簽中放棄對(duì) H.264 格式的支持。 這樣一來(lái)小站長(zhǎng)們就很難決定如何提供視頻支持,，或者這正是像亞馬遜這類提供“云”的巨頭公司所樂(lè)見其成的吧,。用戶們更是只有被綁架的份兒了。 所以平臺(tái)的統(tǒng)一一直是人們追求的目標(biāo),，或許永遠(yuǎn)只是一個(gè)目標(biāo),。在巴別塔的故事里，上帝不就故意讓人們說(shuō)不一樣的語(yǔ)言嗎,？ 【canvas】 HTML5新增的Canvas接口是一大利器,，讓開發(fā)者們（尤其是在游戲領(lǐng)域）感到歡欣鼓舞，這相當(dāng)于在瀏覽器（或HTML5引擎）這一級(jí)別向上層應(yīng)用提供了OS操作系統(tǒng)的繪圖接口,。盡管不如本地應(yīng)用直接操作圖形庫(kù)庫(kù)那樣強(qiáng)大,，但也足以應(yīng)付很多用例場(chǎng)景了。 性能應(yīng)該是Canvas繪圖面臨的最大問(wèn)題,，這與本地應(yīng)用（例如游戲）應(yīng)該是類似的,。本地應(yīng)用一般直接調(diào)用圖形庫(kù)文件的接口，而在HTML5的世界里,，網(wǎng)頁(yè)應(yīng)用是需要通過(guò)JavaScript來(lái)調(diào)用繪圖API的,，理論上性能就會(huì)有所下降。好在我們有硬件加速,，主流瀏覽器也正在朝這個(gè)方向發(fā)展,，例如IE9宣揚(yáng)自己比別的瀏覽器快多少多少倍，實(shí)際上主要是硬件加速的結(jié)果,。 在一些細(xì)微的問(wèn)題上,，我們可能還需要為不同瀏覽器的適配而頭疼，畢竟沒(méi)法保證不同廠商對(duì)于canvas的實(shí)現(xiàn)效果是完全一致的,。如果有一天,，我們辛辛苦苦寫了一個(gè)HTML5游戲，發(fā)布之后還得分Chrome版本和IE9版本,，那就太有諷刺效果了,。 另外一個(gè)問(wèn)題是,，我們還需要一些性能強(qiáng)、穩(wěn)定性高的HTML5的JS圖形庫(kù)（或框架）,，尤其是在移動(dòng)平臺(tái)上,。畢竟開發(fā)者們都不希望自己的代碼充滿了大量的drawLine、drawText等基礎(chǔ)操作,。 【W(wǎng)eb Socket】 這也是開發(fā)者們津津樂(lè)道的新特性之一,，客戶端可以利用WebSocket協(xié)議和主機(jī)進(jìn)行雙向通信（支持TLS加密），比XmlHttpRequest更加強(qiáng)大,、高效和減少流量,，這是因?yàn)閃ebSocket協(xié)議在建立連接之后，其交互報(bào)文中不再攜帶HTTP Header這類重復(fù)性信息,。一個(gè)顯而易見的好處是,，客戶端無(wú)需輪詢就能獲得服務(wù)器端發(fā)起的通知，類似于Push功能,。WebSocket的客戶端實(shí)現(xiàn)在各大操作系統(tǒng)上應(yīng)該都是基于Socket的,，至少在WebKit是如此；它對(duì)于服務(wù)器端則提出了比HTTP更高的性能上的要求,，因?yàn)樗举|(zhì)上畢竟是一個(gè)“長(zhǎng)連接”。 很多WebSocket的示例代碼里只是簡(jiǎn)單的和服務(wù)器交互了一下幾個(gè)單詞,，但這離Web Socket的“強(qiáng)大功能”還差得較遠(yuǎn),。在實(shí)際應(yīng)用中你需要面對(duì)更復(fù)雜的網(wǎng)絡(luò)環(huán)境和用例，你需要考慮如何協(xié)商超時(shí),，如何通過(guò)?；睿╧eep-alive ）消息來(lái)維持連接，如何應(yīng)對(duì)網(wǎng)絡(luò)（例如WiFi）的忽然中斷,，甚至服務(wù)器重啟...更詳細(xì)的信息可以看看《Is WebSocket Chat Simple?》一文中提到的問(wèn)題：http:///2010/03/02/is-websocket-chat-simple/,。 所以我們可能還需要一個(gè)網(wǎng)絡(luò)接口庫(kù)——類似于圖形庫(kù)那樣的一個(gè)東西，以便讓應(yīng)用開發(fā)者們能把精力集中在應(yīng)用及其功能的實(shí)現(xiàn)上,，而不是通信層的一些基本的邏輯和錯(cuò)誤處理機(jī)制,。 到目前為止似乎還沒(méi)看到令人耳目一新的WebSocket應(yīng)用案例，足以配得上它出來(lái)之前的千呼萬(wàn)喚,。我在想這個(gè)新特性其實(shí)更多是給服務(wù)器端,、或是“云”端使用的，也就是那些“大家伙”們,。功能和接口定義都在網(wǎng)絡(luò)側(cè),，而客戶端的“強(qiáng)大”不過(guò)依賴于云端的功能定義。這倒也十分符合當(dāng)前SNS,、電子商務(wù)等開放平臺(tái)的設(shè)計(jì)和開發(fā)理念,。讓我們拭目以待吧。 【Local Storage 本地存儲(chǔ)】 這是另外一個(gè)被津津樂(lè)道的新特性。最早有人向我介紹的時(shí)候說(shuō)的是,，瀏覽器從此可以離線瀏覽網(wǎng)頁(yè)了,。當(dāng)時(shí)一知半解，似懂非懂,，沒(méi)想明白技術(shù)上是怎么一回事,。后來(lái)才知道，本地存儲(chǔ)以key/value的方式實(shí)現(xiàn),，實(shí)際上由兩部分組成：sessionStorage與localStorage,，前者用于存儲(chǔ)一個(gè)會(huì)話（session）中的數(shù)據(jù)，這些數(shù)據(jù)可供同一個(gè)會(huì)話中的不同頁(yè)面訪問(wèn),，并且當(dāng)會(huì)話結(jié)束后數(shù)據(jù)也隨之銷毀,，因此它不是一種持久化的本地存儲(chǔ)。 localStorage用于持久化的本地存儲(chǔ),，除非應(yīng)用主動(dòng)刪除,，否則數(shù)據(jù)是是不會(huì)過(guò)期的。 簡(jiǎn)單的說(shuō),，前者更注重于保存應(yīng)用的“狀態(tài)”,，是對(duì)Cookie的缺陷的改進(jìn)；而后者則相當(dāng)于瀏覽器（HTML5引擎）對(duì)上層應(yīng)用提供了數(shù)據(jù)串行化的接口,。 HTML5網(wǎng)頁(yè)或應(yīng)用如果對(duì)Local Storage使用不當(dāng),，就可能會(huì)在用戶的本地磁盤上留下越來(lái)越多的垃圾數(shù)據(jù)；還得有錯(cuò)誤處理機(jī)制來(lái)處理文件部分損壞的情況,；另外可能還有安全性問(wèn)題,，例如某些重要的密碼被保存在本地，其它惡意程序就能獲取...總之本地存儲(chǔ)這一新特性為開發(fā)者打開了一扇門,，隨之而來(lái)的肯定會(huì)有各種問(wèn)題,，我們只能寄希望于它自身的完善。 【W(wǎng)eb Worker】 在HTML5之前,，JavaScript引擎一般都是單線程運(yùn)行的,，瀏覽器無(wú)論在什么時(shí)候都只有一個(gè)線程在運(yùn)行JavaScript程序。所以我們可以簡(jiǎn)單的把Web Worker理解為JavaScript的多線程機(jī)制,。 Web Worker的基本原理就是在當(dāng)前javascript的主線程中,，使用Worker類獨(dú)開一個(gè)新的線程，來(lái)執(zhí)行一段與界面操作無(wú)關(guān)的代碼（通常會(huì)占用一定CPU,，消耗一定內(nèi)存）,，達(dá)到不阻塞UI線程的目的，并且提供主線程和新線程之間數(shù)據(jù)交換的接口,。這個(gè)貌似比較偏門和高級(jí),，所以在各種Demo中露面的機(jī)會(huì)不如Web Socket和Local Storage,。 Web Worker一旦濫用就會(huì)導(dǎo)致糟糕的用戶體驗(yàn)，例如開發(fā)者在硬件配置高的機(jī)器上開發(fā)出來(lái)的應(yīng)用,，Worker或許還能在CPU滿負(fù)荷的情況下正常工作,，但換在配置稍低的機(jī)器上運(yùn)行可能就會(huì)奇慢無(wú)比，“該程序無(wú)響應(yīng)”一類的提示就會(huì)如噩夢(mèng)般時(shí)時(shí)出現(xiàn)... 3. 雙刃劍 由此我們大概可以看出,，隨著HTML5功能的增強(qiáng),，它對(duì)開發(fā)者的要求也就更高；同時(shí)由于更大瀏覽器/HTML引擎廠商對(duì)標(biāo)準(zhǔn)的實(shí)現(xiàn)也不盡相同,，開發(fā)者們就會(huì)面臨多平臺(tái)反復(fù)調(diào)試和適配的問(wèn)題,。 這是一個(gè)普遍性的問(wèn)題。任何應(yīng)用或平臺(tái)提供的功能越多,，復(fù)雜度就會(huì)更高（意味著開發(fā)門檻的提高）,，帶來(lái)的問(wèn)題也會(huì)更多，趨于穩(wěn)定的周期就會(huì)更長(zhǎng),。Flash就是那樣一個(gè)龐大的跨平臺(tái)系統(tǒng),，盡管它也有這樣那樣的問(wèn)題，但不可否認(rèn)的是,，很多時(shí)候其實(shí)是Flash應(yīng)用本身寫得太糟糕（很多大公司的Flash應(yīng)用是既炫又流暢的）,，占用了過(guò)多的CPU和內(nèi)存，而導(dǎo)致系統(tǒng)緩慢,。 換句話說(shuō),，平臺(tái)的開發(fā)復(fù)雜度越高，體驗(yàn)糟糕的應(yīng)用就會(huì)越多,，系統(tǒng)出現(xiàn)問(wèn)題的概率就越大——雖然其功能也會(huì)越強(qiáng)大。這是一把雙刃劍,。 4. 開發(fā)者們?cè)谧鍪裁?/p> 目前網(wǎng)上已經(jīng)有不少的HTML5演示代碼,，甚至商用網(wǎng)頁(yè)了?；蛟S是因?yàn)槿蕴幱谄鸩诫A段的緣故,，我們看到的更多是一些分散的特性，而不是渾然一體的一只大象,。HTML技術(shù)的奇妙之處就在于,，人們永遠(yuǎn)可以基于現(xiàn)有的、成熟的,、分散的技術(shù),，來(lái)組合實(shí)現(xiàn)強(qiáng)大的功能，就好象HTML4+CSS+AJAX+JSON+...這些組合一樣,，所以我們也有理由相信,，幾年之后HTML5的成熟應(yīng)用所展示出來(lái)的功能和效果,，或許會(huì)讓人們忘記它和本地應(yīng)用之間的差別。 那么現(xiàn)在開發(fā)者們都在做些什么呢,？從我接觸到的一些身邊的一些HTML愛好者,，開源社區(qū)的開發(fā)者，論壇的技術(shù)人員...等來(lái)看,，大致有以下幾類（有些分類不太嚴(yán)格,，畢竟大家都處于摸索階段）： 1）框架，或者引擎 如前所述,，HTML5確實(shí)定義了不少新接口,，但就如同不是任何網(wǎng)絡(luò)應(yīng)用開發(fā)者都希望自己直接操作Socket一樣，開發(fā)者們肯定希望基于一套功能強(qiáng)大且性能穩(wěn)定的庫(kù)來(lái)開發(fā)自己的應(yīng)用,。像游戲這類開發(fā),，人們就需要一個(gè)引擎，從而把更多精力放在內(nèi)容和邏輯的創(chuàng)建上,。 HTML4時(shí)代就有很多著名的JS框架/庫(kù),，例如Prototype、jQuery等（雖然都號(hào)稱輕量級(jí),，但在Galaxy I9000這種級(jí)別的手機(jī)上運(yùn)行起來(lái)仍然氣喘吁吁,，甚至?xí)rash）。現(xiàn)在很多公司也在提供自己的游戲引擎,，或是擴(kuò)展支持HTML5新接口,，或是改寫以前用于桌面平臺(tái)的框架/庫(kù)，使其更適合移動(dòng)設(shè)備...等等,。 2）與特定的操作系統(tǒng)整合 畢竟HTML5只是一套標(biāo)準(zhǔn),，各個(gè)平臺(tái)實(shí)現(xiàn)基本不一樣，有些平臺(tái)還提供自己特有的接口,，所以有些公司會(huì)在主流操作系統(tǒng)（例如開源的Android）上,，做一些適配甚至是改善性的功能，例如一個(gè)適合觸摸屏的,、甚至多點(diǎn)觸摸的游戲引擎,。 3）功能改善和增強(qiáng) 我們知道HTML5和JavaScript這類在客戶端解釋執(zhí)行的機(jī)制與本地二進(jìn)制應(yīng)用相比，在執(zhí)行效率,、圖形能力等方面都有先天弱勢(shì),，此外還存在代碼知識(shí)產(chǎn)權(quán)的保護(hù)等問(wèn)題。所以有些公司設(shè)計(jì)的引擎是在服務(wù)器端進(jìn)行預(yù)編譯后才嵌入到網(wǎng)頁(yè)的,，這樣對(duì)執(zhí)行效率和代碼保護(hù)都有幫助,。 4）開發(fā)工具，IDE等 這個(gè)貌似只有微軟,、IBM,、Adobe等大公司才有能力做的事情,，但一些開源社區(qū)或小組織也在默默耕耘，他們的產(chǎn)品可能不是大而全的,，但一定是因?yàn)槟硯讉€(gè)很好的feature而吸引使用者的,。 5）移植、Demo,、再造應(yīng)用等 在初期這部分開發(fā)者比例或許是最大的,，比如說(shuō)有人將一些好玩的iOS或Android應(yīng)用用HTML5來(lái)實(shí)現(xiàn)，有人用HTML5實(shí)現(xiàn)某個(gè)著名的街機(jī)游戲等,?；蛟S有人會(huì)說(shuō)做這些事情意義不大，但至少這些應(yīng)用讓我們見識(shí)到了HTML5的強(qiáng)大：我自己也沒(méi)想到,，一些HTML5的游戲這么快就能在我的智能手機(jī)上如此流暢的運(yùn)行起來(lái)了,。此外在移植和嘗試的過(guò)程中，你會(huì)率先使用新的接口,，率先遇到更深層次的問(wèn)題,，并在調(diào)試的過(guò)程中獲得大量經(jīng)驗(yàn)值和寶貴的解決方案。 6）媒體,、出版行業(yè) 其實(shí)這是我個(gè)人最希望看到：傳統(tǒng)媒體和出版行業(yè)可以利用HTML5來(lái)在互聯(lián)網(wǎng)領(lǐng)域占領(lǐng)自己的那一片山頭,，畢竟他們是內(nèi)容生產(chǎn)者，只要充分利用HTML5這個(gè)發(fā)布工具,，他們就能把傳統(tǒng)領(lǐng)域中流失的一部分用戶重新又爭(zhēng)取回來(lái),。而我們（用戶）也能在碎片時(shí)間中以更好的用戶體驗(yàn)（跨平臺(tái)的、比HTML4更好的）,，獲得更好的內(nèi)容（而不僅僅是互聯(lián)網(wǎng)的海量垃圾信息）,。 當(dāng)然還有很多開發(fā)者在做一些有意思的事情，,，沒(méi)法一一羅列,。作為個(gè)人而言，盡早的去接觸新的技術(shù)總是有益無(wú)害的,。很多人可能會(huì)發(fā)現(xiàn)，粗略學(xué)了一遍HTML5下來(lái),，還是不知道自己該做些什么——好的應(yīng)用往往是從實(shí)際需求而來(lái)的,，不是拍腦瓜空想出來(lái)的。有一個(gè)趨勢(shì)是這樣的：我發(fā)現(xiàn)越來(lái)越少有人寫一些“孤島”式的應(yīng)用（練手,、Demo,、定制等除外），不論對(duì)本地應(yīng)用還是HTML5應(yīng)用都是如此,。有實(shí)力,、技術(shù)強(qiáng)的公司和團(tuán)隊(duì)往往更愿意從事框架,、引擎等基礎(chǔ)設(shè)施，或是與內(nèi)容產(chǎn)生相結(jié)合,、與云相結(jié)合的研發(fā),。 5.小結(jié) （寫到最后發(fā)現(xiàn)實(shí)在是說(shuō)的太多了，條理也不甚清楚——因?yàn)檎f(shuō)的本身就是處于初級(jí)階段的一個(gè)技術(shù),，所以只好東扯一點(diǎn)西扯一點(diǎn),。因?yàn)檫@個(gè)緣故，最后一節(jié)也不能叫“結(jié)論”了,，因?yàn)槲也皇腔ヂ?lián)網(wǎng)神漢,，實(shí)在沒(méi)有什么結(jié)論，暫定“小結(jié)”吧,，以后想起再補(bǔ)充,。） 現(xiàn)在HTML5的鼓吹者大多集中在移動(dòng)互聯(lián)領(lǐng)域，尤其是是智能手機(jī)/平板開發(fā)領(lǐng)域,。自07年以來(lái),，iOS、Android,、Web OS等主流移動(dòng)操作系統(tǒng)的流行引發(fā)了智能移動(dòng)設(shè)備市場(chǎng)的火爆,，開發(fā)者們欣喜于這些設(shè)備的普及，同時(shí)也深受多平臺(tái)甚至同一平臺(tái)內(nèi)版本分裂的困擾,，于是HTML5就在天時(shí)地利人和中成了救世主,，畢竟這些主流操作系統(tǒng)都自帶了相當(dāng)先進(jìn)的HTML5渲染引擎。 |
|
|
