html5的發(fā)展與現(xiàn)狀

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