HTML5之榮耀與苦澀

● HTML5在移動互聯上的勝利

劉宗凡：近兩年來，炒得最火熱的互聯網詞匯之一就是HTML5。在上期我們回顧了HTML5的歷史和現狀，現在請幾位嘉賓來聊一聊自己的看法。

譚劍儀：喬布斯在宣布蘋果不支持Flash而轉為支持HTML5后，iPad、iPhone等移動設備風靡一時，安卓設備后來居上，移動互聯風光無限。目前移動互聯網已經超出傳統PC互聯網的規模，并且還以驚人的速度發展。要在互聯網上取勝，就必須要占領移動互聯的橋頭堡。安卓系統從4.0開始也不再支持Flash，HTML5在移動互聯網上取得大勝。現在HTML5如日中天，身上披著榮耀的光環，仿佛一夜之間，它便會統治互聯網一般。

邱元陽：移動設備已經充斥于社會生活的各個方面，手機、MP3、PDA、平板電腦，即使是手持移動設備，也無不在與網絡接軌。在一個多設備時代，人們需要使用各種設備滿足日常需求，但到目前為止，HTML5/JavaScript是唯一能夠在所有現代設備上運行的語言。

利用HTML5，某個廣告創意可以在任何設備上實現，如觸摸屏、陀螺儀、GPS甚至3D圖形加速設備。由于HTML5的規范尚未確定，也就意味著它仍可靈活應用于硬件創新之中，也就是說，HTML5有可能會掀起一場數字廣告革命。

HTML5也是目前唯一可以在所有主要移動操作系統以及瀏覽器上運行的語言，使廣告創意可以使用更多的基本構造，轉化為無數種內容形式。

在HTML5之前，移動廣告一般是通過SDK方式來進行開發設計，形成自定義的本機代碼，因而沒有可擴展性，創作靈活性也受制于開發工具。目前互聯網上發布的移動廣告多為靜態圖像格式，而HTML5將可能改變這種局面。Google也正在與行業伙伴合作，謀求建立HTML5的廣告標準。

劉宗凡：邱老師特別提到HTML5在數字廣告革命上的巨大作用。當然HTML5的意義不僅在此。現在聯上互聯網的不僅僅是PC，形形色色的移動設備風頭更勁。不同分辨率的屏幕，不同的瀏覽器，各種設備千差萬別。要給大多數移動設備以較好的體驗效果，無疑我們不能給每一個設備開發一種應用。移動設備的多樣性使得HTML5獲得了巨大的生命力。

邱元陽：對。HTML5改變了開發人員創建移動Web應用的方式，然而這并不是移動開發的終極目的。但用HTML5開發移動應用并不像很多開發人員想得那么容易。如果沒有JavaScript和CSS，HTML5就什么也不是了。《對一個HTML5移動應用的解剖》的作者布賴恩·富寧（Brian Fling）也指出，很多開發人員沒有像Prototype、MooTools、jQuery或Scriptaculous這樣的框架的幫助就寫不了JavaScript。

HTML5能夠讓互聯網瀏覽器以生動的圖像和效果來對用戶的操作進行回應，而且用戶無需安裝額外的軟件就可以擁有游戲般的互動體驗。應用程序員可以借助HTML5開發出兼容智能手機、平板電腦和PC等多種設備的軟件，而無需為特定的硬件或在線程序商店量身定做軟件產品。

● HTML5與Flash的情仇

劉宗凡：我們談HTML5，就繞不開Flash這一冤家。雖然在移動互聯領域HTML5已經一統天下，但在PC端，Flash卻體現了頑強的生命力。這和Flash的優秀特征分不開。Adobe公司不斷豐富、提升Flash的表現能力，所以Flash能做到與時俱進，在傳統互聯網領域力壓HTML5一頭。

譚劍儀：Flash是基于插件形式的，目前Flash的插件幾乎遍布各大瀏覽器，就是不支持Flash的Apple在PC端也還是支持的。而HTML5只是一個新的標準，目前還沒有過多的瀏覽器提供支持，而且支持的完整度也相對不同，這會讓開發者花更多的時間考慮瀏覽器的兼容性問題。

Flash已經發展得相對成熟，2D和3D都提供了支持，而且對AS的腳本運行效率進行了大幅度的提升。Flash的運行性能是HTML5的數倍，Flash游戲在表現方面也是HTML5望塵莫及的。HTML5畢竟是新生兒，對于圖像處理僅提供了Canvas標簽，需要進行大量的圖像引擎工作。但HTML5由瀏覽器解析執行，無需特別插件。只是各大瀏覽器支持程度不同，普及還需要很長一段時間。Flash營造的是一個封閉的內容，搜索引擎根本索引不到Flash里面的內容，違背了內容開放的潮流。

在公司支持、開發學習成本、功能應用、運行性能、軟硬件平臺支持等方面，二者各有優缺點，在目前沒有誰勝誰負，在將來也不一定是誰替代誰的關系。

邱元陽：雖然HTML5和Flash是天生對頭，但它們之間也不是毫無關系。我們可以使用工具將Flash轉換成HTML5格式。Google的Swiffy以網站方式，讓使用者上傳Flash的.swf檔案，支持Flash所使用的swf 8格式與ActionScript 2.0指令集。其輸出格式為HTML5，主要針對Chrome、Safari等Webkit所開發的瀏覽器，新增加的Flash Professional擴充模組支持Flash CS4及之后的版本。

Adobe提供的Flash轉換HTML5工具Wallaby，可以將Flash原始檔案格式.fla轉換為HTML5格式。Adobe還推出過一個針對HTML5開發的編輯工具Edge。

由于使用Flash的網站眾多，而且Adobe及Google所提供的轉換工具主要目的在于轉換簡單的Flash程序，因此有其他廠商如Dyad Communications等，提供工具程序讓大量使用Flash技術的網站在轉換為HTML5時可以節省部分人力。

● HTML5的“三駕馬車”

劉宗凡：我們所說的HTML5，實際上是一個廣義的范圍，它還包含了CSS3和JavaScript。沒有CSS3和JavaScript，HTML5將成為無本之源。正是這“三駕馬車”的齊頭并進，讓WEB的發展大放異彩。

譚劍儀：JavaScript是一種廣泛用于客戶端網頁開發的腳本語言，最常是于HTML上使用，用來給HTML網頁添加動態功能。然而JavaScript也被用于不同的接口上，如服務器。它最初由網景公司的Brendan Eich設計，是一種動態、弱類型、基于原型的語言，內置支持類型。Ecma國際以JavaScript為基礎制定了ECMAScript標準。JavaScript也可以用于其他場合，如服務器端編程。完整的JavaScript實現包含三個部分：ECMAScript、文檔對象模型、瀏覽器對象模型。

不同于服務器端腳本語言，如PHP與ASP，JavaScript主要被作為客戶端腳本語言在用戶的瀏覽器上運行，不需要服務器的支持。所以早期的程序員比較青睞于JavaScript以減少對服務器的負擔，而與此同時也帶來另一個問題：安全性。隨著服務器的強壯，雖然現在的程序員更喜歡運行于服務端的腳本以保證安全，但JavaScript仍然以其跨平臺、容易上手等優勢大行其道。同時，有些特殊功能（如AJAX）必須依賴JavaScript在客戶端進行支持。隨著引擎如V8和框架如Node.js的發展，及其事件驅動及異步IO等特性，JavaScript逐漸被用來編寫服務器端程序。

邱元陽：HTML5為Video和Audio提供了API支持，讓程序員可以控制用戶界面，如實現播放或暫停。HTML5中的新元素Canvas，可以被腳本語言用來繪制圖形，實現畫圖、圖像合成、簡單動畫等。利用Canvas的API，就可以通過fillStyle設置填充色，通過strokeStyle設置描邊色，甚至可以用來畫路徑。Canvas的特點和強大功能還使它可以用來編寫網頁游戲。

網頁上的拖放操作一直是個難點，雖然在Flash中可以輕易實現。如果在HTML5中，依靠JavaScript，這種直接操作已經不在話下。在winform中，鼠標Drag（拖動）和Drop（釋放）是要經常用到的，現在在webform中也能實現：在Drag&Drop里定義了DataEvent和DataTransfer接口，同時當拖拽操作發生時會觸發如 dragstart、dragenter、dragleave、drop、dragend等事件。

Web Workers能讓JavaScript多線程，在后臺運行多個任務而不會中斷當前的瀏覽器操作。而Application Cache則是HTML5對于離線瀏覽的全新支持，通過在html元素上加一個屬性manifest，瀏覽器會提示用戶是否要將數據緩存到客戶端。這種緩存機制和離線應用的優勢也得到了Google認可。如果再使用了Storage和Webkit，還能實現database storage，可以像后臺操作數據庫一樣查詢數據并執行操作，相對于Cookie的存儲來說，存儲的容量要大很多。

此外，HTML5還可以實現跨域文檔通信，不管源域來自哪里都能正常呈現，并防止腳本攻擊。

譚劍儀：CSS就是層疊樣式表（Cascading Style Sheets），又稱串樣式列表，由W3C定義和維護的標準，一種用來為結構化文檔（如HTML文檔或XML應用）添加樣式（字體、間距和顏色等）的計算機語言。目前最新版本是CSS2.1，為W3C的候選推薦標準。CSS3現在已被大部分現代瀏覽器支持，而下一版的CSS4仍在開發過程中。

一個網頁的讀者和作者都可以使用CSS來決定文件的顏色、字體、排版等顯示特性。CSS最主要的目的是將文件的結構（用HTML或其他相關的語言寫的）與文件的顯示（CSS）分隔開來。這個分隔有許多好處：①文件的可讀性被加強。②文件的結構更加靈活。③作者和讀者可以自己決定文件的顯示。④文件的結構簡化了。

CSS還可以使用其他的顯示方式，如聲音（假如瀏覽器有閱讀功能的話）或給視障者用的感受裝置。此外，CSS還可以與XHTML、XML或其他結構文件一起使用，唯一條件是顯示這種文件的瀏覽器裝備了接受CSS的功能。

邱元陽：HTML5對CSS3的依賴性自然不必多言。對于Web開發者來說，CSS3不只是新技術，也是新概念；不只是提高了開發效率，也帶來了更多的可能性。有了CSS3，HTML5不必再依賴于圖片或JavaScript去完成圓角、多背景、自定義字體、3D動畫、漸變、陰影、透明度等提高Web設計質量的網頁特效。

CSS3在選擇器上的豐富支持讓我們可以靈活地控制樣式，而不必為了選擇某些元素給他們加上各種各樣的類名；CSS3在樣式上的豐富支持可以讓前端開發人員省去很多時間和精力；CSS3對于動畫類型的支持則使得無插件、無濾鏡的網頁動畫成為可能，transform（變換）、transition（過渡）和animation（動畫）幾種動畫類型的靈活運用，可以實現非常絢麗的動態效果。

需要說明的是，目前大部分瀏覽器只支持部分CSS3屬性。對于不支持CSS3的瀏覽器可以使用JavaScript來實現。

● HTML5的苦澀現實

劉宗凡：對于HTML5的發展，2012本來是充滿想象的一年。但今年即將過去，HTML5并沒有像我們預計的那樣達到一個高峰。

譚劍儀：跨平臺HTML5開發并未起飛。桌面端和移動端HTML5之間的分裂還是巨大的，這兩者之間沒有形成一個統一的開發標準，主要原因就在于以下三點差異：①電腦鍵盤與手機、平板鍵盤之間的差異。②兩個平臺設備的屏幕大小。③鼠標與觸摸屏操作的差異。

邱元陽：HTML5的一大優勢是可以運行在幾乎所有的平臺，即“一次編寫，到處運行”。最理想的情況就是針對特定平臺進行產品開發，這樣開發者就能對應用的外觀、感覺和功能等進行相應的個性化設置，從用戶體驗角度來說這也是極其重要的。然而很多人對HTML5的預期就是HTML5應用可以實現跨平臺訪問，比如說從桌面端訪問移動HTML5應用。不過從現實情況來看，用戶也只能選擇一個應用能更好運行的平臺，因為當前的跨平臺HTML5并不完善。

在HTML5發展的過程中，那些已經建立了一個網站的開發者們就曾經歷過很讓人頭疼的瀏覽器兼容性和跨平臺適配問題。舉個例子來說，Gamzee的一位工程師Sean Soria就曾描述過他們在為Facebook的HTML5博客開發Skyscraper City應用的時候所面臨的問題：在編寫代碼的時候他在文檔對象模型（DOM）中使用了一個偽3D轉換CSS代碼，它能觸發大多數移動設備的硬件加速能力，而且這種方法比使用Canvas元素表現要好很多，是非常不錯的一種方法，但問題就是Android手機并不支持。這樣的問題還有很多，往往不同設備之間HTML5應用所面臨的問題和解決方法都不一定是相同的。

基于網頁的WebApp短期內將遇到發展瓶頸。因為標準化問題和終端設備功能的支持程度，很難在短時間內找到確切的解決方案。

劉宗凡：在越來越多的瀏覽器和網站開始迎合的背景下，憑借免費+開源、跨平臺、多種特性帶來的快速開發等因素，HTML5一定會成為互聯網領域最具影響力的革新力量。但是，目前的行業格局是，HTML5由技術發燒友、概念炒作者所主導，技術領域的討論過度泛濫，而在應用層面，實際應用于商業化領域的討論卻十分匱乏，鮮見成功的案例。這是HTML5的現實。

邱元陽：近期，Facebook公司CEO扎克伯格在TC Disrupt大會上公開表示，Facebook的應用完全依賴HTML5是最大的錯誤，導致浪費了兩年寶貴的時間，將來要改為原生應用押注。

Facebook為什么放棄HTML5而轉戰原生應用？主要原因有四點：①工具/開發者API。沒有相應的工具對內存進行跟蹤。②網頁滾屏效果。用戶在瀏覽網頁的時候，需要的是非常流暢的滾動效果，而基于HTML5的Facebook應用并沒有做到這一點。Facebook這次的改進針對網頁滾動進行了提升。③GPU。圖片處理并不是HTML5擅長的地方。了解HTML5的人會發現，圖片加載和處理當然是“不應該在現階段使用HTML5實現的”。④其他。HTML5目前擅長的部分是數據量不大、動畫少的頁面，雖然這恰恰也是Facebook注重的地方。但相比之下，原生應用能夠提供更好的觸摸跟蹤支持、更平滑的動畫、更好的緩存。

譚劍儀：當然，Facebook的開發人員也進行了強調：“雖然我們的策略做了調整，只是用戶更在乎速度上的體驗，迫使Facebook轉向本地編碼。但HTML5以及基于HTML5的Web版Facebook不會就此消失——事實上，為了給用戶帶去更棒的體驗，HTML5在未來扮演著非常重要的角色。因為很多HTML5可以實現的功能對于本地編碼來說有一定的挑戰。”

產品經理Mick Johnson坦言：“用戶通過多達7000種移動設備訪問Facebook，我們總不能為7000種設備去構建原生應用吧。移動Web依然是非常具有價值的平臺，而且我們面臨的并不是在HTML5和原生應用之間二選一的問題，有些時候兩者是并行的，未來我們更多的會采用本地編碼+HTML5的混合模式。目前HTML5的技術還不是很成熟，但我們應該以長遠的眼光看待它。”

劉宗凡：這就是HTML5的現狀：一方面，它披著榮耀的光環，受到眾多追捧；另一方面，各大公司小心翼翼，無法完全投入HTML5的懷抱。

邱元陽：拋開技術從另一個角度來看，HTML5之所以步履蹣跚，其實是商業巨頭角逐的結果。例如，作為HTML5的堅定支持者喬布斯，在推動HTML5時并沒有想象中那么積極。蘋果的官方數據顯示，App Store的應用下載次數突破250億次，與2011年1月的100億次相比，增長了超過150%。據AdMob的估算，AppStore每年營收可達24億美元之巨。本地App仍維持如此強勢之時，蘋果怎會樂意看到HTML5興起？有研究機構認為，HTML5興起，將令蘋果的經營利潤增長在2015年或遭受30%的損失。同時，蘋果生態系統的封閉性也將被打破。蘋果遲遲沒有投入Web App、建立類似Google或者Opera那樣的生態渠道，甚至從iOS4.0開始，封殺了一系列對于HTML5來說至關重要的Web API，如Audio。這樣做的原因就在于，在自家App Store如日中天的時候，蘋果為什么要冒著失去30%利潤的風險，扶植一個替代性質的生態系統？類似的“花招”還有很多——在HTML5中的視頻格式一項，為牽制Google等公司主導的WebM格式，蘋果選擇了支持MPEG，一個核心為商業機構所擁有的格式，這顯然與HTML5開源共享的理念背道而馳。

一邊力推，一邊封殺，這就是蘋果對HTML5的真正態度。事實上，不止蘋果一家公司有這樣的想法和做法，這實際是HTML5這個游戲圈中，幾乎所有玩家的一種心態：既希望這種開放高效的載體能夠早點標準化，為己所用，同時又能保證自身的利益體系不受“惡性”沖擊。

劉宗凡：跨平臺運行的兼容性、不同瀏覽器造成的碎片化、各商業巨頭的博弈，使得HTML5光環的背后充滿了苦澀。但時至今日，不管HTML5的發展會有多曲折，都不會有人再輕視HTML5帶來的變革。最近橫空出世的火狐操作系統（Firefox OS），就試圖讓HTML5應用可以直接內置在手機底層架構上，以便更流暢運行。Firefox OS是一個完全基于HTML5的系統，沒有所謂的“原生應用”。無論是打電話、發短信、玩游戲，使用的都是HTML5技術。在移動領域原生應用大行其道的今天，Mozilla的策略可謂激進。這一點與Chrome OS可謂異曲同工。事實上，瀏覽器與操作系統間的界限正在模糊。

HTML5給Web帶來的不是改良，而是一場革命。雖然HTML5正式標準還要到2022年才能發布，可以想象的是標準的制定過程將非常曲折，但這無疑非常值得期待。