2014-11-6 藍(lán)藍(lán)設(shè)計(jì)的小編
我們第一次談?wù)?HTML5 要改變世界大概是因?yàn)閱滩妓?，他?jiān)持在 iOS 上不兼容 Flash，在 Adobe 統(tǒng)治多媒體開(kāi)發(fā)的那個(gè)年代，這需要付出極大的勇氣。這么多年過(guò)去了，雖然所有人都在談?wù)?HTML5，但是大部分人甚至都忘了它還是一個(gè)仍在完善中的體系。
2007 年 W3C（萬(wàn)維網(wǎng)聯(lián)盟）立項(xiàng) HTML5，直至 2014 年 10 月底，這個(gè)長(zhǎng)達(dá)八年的規(guī)范終于正式定稿。接下來(lái)，HTML5 將真正開(kāi)始顛覆原生（Native） App 世界。雖然這種危言聳聽(tīng)已經(jīng)讓人有點(diǎn)厭煩。但是如果回顧 HTML 這些年走過(guò)的路，你就不會(huì)再懷疑它的能量。
自 W3C 于 1999 年發(fā)布 HTML4 后，Web 世界快速發(fā)展，一片繁榮。人們一度認(rèn)為 HTML 標(biāo)準(zhǔn)不需要升級(jí)了。一些致力于發(fā)展 Web App 的公司另行成立了 WHATWG 組織，直到 2007 年，W3C 從 WHATWG 接手相關(guān)工作，重新開(kāi)始發(fā)展 HTML5。
HTML5 的發(fā)展史，有用戶的需求在推動(dòng)，有技術(shù)開(kāi)發(fā)者的需求在推動(dòng)，更有巨大的商業(yè)利益在推動(dòng)。在互聯(lián)網(wǎng)的早期，對(duì)用戶而言，能打開(kāi)瀏覽器接入到互聯(lián)網(wǎng)世界就是一個(gè)神奇的事情，但互聯(lián)網(wǎng)發(fā)展到 2005 年前后，開(kāi)始出現(xiàn)下一個(gè)變化，就是寬帶互聯(lián)。
隨著寬帶的普及和電腦性能的增強(qiáng)，人們不再滿足于單純的通過(guò)互聯(lián)網(wǎng)看新聞、收發(fā)郵件，消耗更高帶寬的娛樂(lè)產(chǎn)品開(kāi)始出現(xiàn)，就是流視頻和網(wǎng)頁(yè)游戲。其實(shí)視頻和游戲是古老的需求，在互聯(lián)網(wǎng)不普及的時(shí)候，需求的滿足方式是離線傳輸?shù)?VCD 和游戲光盤；后來(lái)互聯(lián)網(wǎng)逐漸普及，人們更改了使用方式，通過(guò)下載軟件 + 本地媒體播放器來(lái)看視頻，下載體積較大的端游玩游戲。
但是對(duì)消費(fèi)者體驗(yàn)更好的新方式還是出現(xiàn)并顛覆了以前的一切，那就是流媒體和網(wǎng)頁(yè)游戲。Youtube 等公司把握住潮流飛速崛起，各種頁(yè)游公司也如雨后春筍。
HTML 標(biāo)準(zhǔn)沒(méi)有把握住產(chǎn)業(yè)的變化及時(shí)演進(jìn)，瀏覽器產(chǎn)品也未升級(jí)，這塊新需求被瀏覽器插件滿足了，那就是 Flash。這個(gè)部署在億萬(wàn)瀏覽器里的商業(yè)插件儼然成為事實(shí)標(biāo)準(zhǔn)。2005 年 Adobe 巨資收購(gòu) Macromedia，把 Flash 收歸旗下，緊接著大幅推廣 FLV 流媒體和 action script 語(yǔ)言，很明顯這樁收購(gòu)可以列為 IT 并購(gòu)的經(jīng)典案例，F(xiàn)LV 流媒體和 Flash 游戲風(fēng)靡互聯(lián)網(wǎng)，Adobe 在新的產(chǎn)業(yè)升級(jí)中攫取了大量的利潤(rùn)。
除了 Flash 這個(gè)商業(yè)產(chǎn)品成為了事實(shí)標(biāo)準(zhǔn)，W3C 還面臨一個(gè)尷尬，就是另一個(gè)私有擴(kuò)展協(xié)議的制造者—IE。IE 當(dāng)時(shí)在桌面瀏覽器占有壟斷地位，并且擴(kuò)展了大量的 IE Only 語(yǔ)法，開(kāi)發(fā)者完全不知道這些語(yǔ)言是誰(shuí)定義的。整個(gè) web 世界，就被兩家公司微軟 +Adobe 綁架了。
很多 IT 巨頭都坐不住了，尤其是蘋果和 Google。PC 操作系統(tǒng)的世界難有突破，Web 瀏覽器被蘋果寄予厚望；新貴 Google 雖然大量贊助 Mozilla，但并未對(duì) IE 的地位產(chǎn)生實(shí)質(zhì)影響，收購(gòu)了 YouTube 后發(fā)現(xiàn)命脈在 Adobe 手里，也是非常難過(guò)，而且 Google 每年給 IE 的搜索框和 Adoble FLV 繳納的費(fèi)用真不是小數(shù)目。
既然大家都是 W3C 的主席單位，好吧，我們重新開(kāi)始做 HTML5 吧。是的，HTML5 其實(shí)就是這么誕生的。
自 HTML5 誕生以來(lái)，一共經(jīng)歷了兩個(gè)階段，分別是 Web 增強(qiáng)和移動(dòng)互聯(lián)網(wǎng)。我們先從 Web 增強(qiáng)說(shuō)起。Web 體驗(yàn)的豐富增強(qiáng)主要表現(xiàn)在：
當(dāng)然 HTML5 還為搜索引擎的語(yǔ)義分析做了優(yōu)化，比如新增 Header 和 Section 等標(biāo)簽，也在無(wú)障礙等領(lǐng)域做了不少工作，這些不再多述。HTML5 在流媒體和游戲方面的努力，成功的遏制了 Flash 的發(fā)展，然后就該遏制 IE 私有語(yǔ)法了。
在 HTML5 標(biāo)準(zhǔn)的升級(jí)過(guò)程中，蘋果和 Google 同時(shí)也看到了瀏覽器市場(chǎng)重新洗牌的機(jī)會(huì)，他們一方面參與 HTML5 的規(guī)范，一邊在瀏覽器產(chǎn)品上發(fā)力。Apple 首先開(kāi)始大力發(fā)展 Safari，建立 WebKit 開(kāi)源項(xiàng)目，遷移 Safari 到 Windows 平臺(tái)；Google 起初是贊助 Mozilla 開(kāi)發(fā) Firefox，后來(lái)自己開(kāi)發(fā)了 v8 引擎，合并 WebKit，于 2008 年正式推出 Chrome?！癐E 的私有規(guī)范 +Flash 不是標(biāo)準(zhǔn)，我們才是標(biāo)準(zhǔn)”這樣的口號(hào)在新一代瀏覽器大戰(zhàn)中打響，IE 瞬間成為千夫所指的壟斷代表，甚至成了阻礙 Web 發(fā)展的罪人（當(dāng)時(shí) IE6 已數(shù)年未更新，并且絲毫不懼 Firefox 的發(fā)展）。
、
偏偏微軟此時(shí)也出了暈招，推出了一系列即不完整支持規(guī)范又互相不兼容的 IE7、8、9、10，徹底失去了開(kāi)發(fā)者的支持。
Adobe 的 Flash 被遏制，與 Web 霸主的位子擦肩而過(guò)；IE 的私有標(biāo)準(zhǔn)被遏制，并且造成 IE 市場(chǎng)份額不停下滑，直到 IE 的移動(dòng)版本反過(guò)來(lái)開(kāi)始支持 WebKit 語(yǔ)法，真是令人唏噓。不知道 HTML6 是不是該打倒 WebKit 壟斷了。
隨著 Chrome 和 Safari 的高歌猛進(jìn)，以及 IE+Flash 的衰落，HTML5 告一段落，進(jìn)入了下一個(gè)時(shí)代——移動(dòng)互聯(lián)網(wǎng)。HTML5 的跨平臺(tái)優(yōu)勢(shì)在移動(dòng)互聯(lián)網(wǎng)時(shí)代被進(jìn)一步凸顯。HTML5 是唯一一個(gè)通吃 PC、Mac、iPhone、iPad、Android、Windows Phone 等主流平臺(tái)的跨平臺(tái)語(yǔ)言。Java 和 Flash 都曾夢(mèng)想這個(gè)位置，但夢(mèng)斷于 iOS。此時(shí)人們紛紛開(kāi)始研究基于 HTML5 開(kāi)發(fā)跨平臺(tái)手機(jī)應(yīng)用。很多人當(dāng)時(shí)認(rèn)為，原生應(yīng)用只是過(guò)渡，就像當(dāng)年從 C/S 結(jié)構(gòu)轉(zhuǎn)變?yōu)?B/S 結(jié)構(gòu)一樣。而且學(xué)習(xí) Objective-C 和 Java 很費(fèi)勁，我既然會(huì)網(wǎng)頁(yè)開(kāi)發(fā)，為何不試試 HTML5。
W3C 此時(shí)成立了 Device API 工作組，為 HTML5 擴(kuò)展了 Camera、GPS 等手機(jī)特有的 API，然而麻煩的是，移動(dòng)互聯(lián)網(wǎng)初期的迭代太快了，手機(jī) OS 在不停的擴(kuò)展硬件 API，陀螺儀、距離感應(yīng)器、氣壓計(jì)。。。每年手機(jī) OS 都有大版本更新。而 W3C 作為一個(gè)數(shù)百家會(huì)員單位共同決策的組織，從標(biāo)準(zhǔn)草案的提出到達(dá)成一致是非常復(fù)雜的過(guò)程，跟不上移動(dòng)互聯(lián)網(wǎng)初期的快速迭代。
PhoneGap 的出現(xiàn)，給開(kāi)發(fā)者打開(kāi)了一扇窗。很多人期待 PhoneGap 不停擴(kuò)展 API，來(lái)補(bǔ)充瀏覽器的不足。Adobe 看到 PhoneGap 仿佛看到了重振江湖地位的希望，但在 Adobe 收購(gòu) PhoneGap 后，又發(fā)現(xiàn)這個(gè)東西問(wèn)題很多，而且開(kāi)源使得 Adobe 無(wú)法像 Flash 那樣獲取商業(yè)利益，于是就把 PhoneGap 捐給了 Apache，改名為 Cordova。
因?yàn)楦鞣N原因，Cordova 的定位最終沒(méi)有成為瀏覽器的強(qiáng)化，而走向了混合式開(kāi)發(fā)?；诋?dāng)時(shí)的背景，他們認(rèn)為原生是不可替代的，“原生 +HTML5”的混合模式更有意義。所以現(xiàn)在 Cordova 的使用往往是“原生工程師 +HTML5 工程師”一起協(xié)作完成 App。
這時(shí) Facebook 加入了 W3C，牽頭成立了 Mobile Web 工作組。Facebook 是混 Web 圈的，并且在手機(jī) OS 上并無(wú)自己的領(lǐng)地，他不喜歡被蘋果和 Google 掌控的原生應(yīng)用生態(tài)系統(tǒng)。Mobile Web 這個(gè)工作組的重要目標(biāo)就是讓 HTML5 開(kāi)發(fā)的網(wǎng)頁(yè)應(yīng)用達(dá)到原生應(yīng)用的體驗(yàn)。然而，事與愿違，它不努力也就算了，結(jié)果是努力了卻失敗了。2012 年，F(xiàn)acebook 放棄了 HTML5 的新聞充斥了全世界的 IT 媒體，HTML5 瞬間被打入冷宮。
Facebook 為何放棄 HTML5？核心是當(dāng)時(shí)基于 HTML5 真的做不出好的移動(dòng) App。對(duì)比 Twritter 等競(jìng)爭(zhēng)對(duì)手的原生 App，F(xiàn)acebook 的 HTML5 版本實(shí)在無(wú)法讓用戶滿意。比如 Push 功能，到現(xiàn)在 HTML5 的推送和原生的推送體驗(yàn)差距依然巨大，更不用說(shuō) HTML5 應(yīng)用的頁(yè)面切換白屏、下拉刷新 / 側(cè)滑菜單不流暢等眾多問(wèn)題。看著原生工程師輕松實(shí)現(xiàn)搖一搖、二維碼、語(yǔ)音輸入、分享到朋友圈等功能，更是讓 HTML5 工程師感覺(jué)自己站錯(cuò)了隊(duì)。
即使 Facebook 不喜歡被控制，也不能拿被用戶拋棄來(lái)冒險(xiǎn)。而且 Facebook 并沒(méi)有掌握關(guān)鍵點(diǎn)—手機(jī)瀏覽器內(nèi)核。如果瀏覽器不跟上，其他都是白搭。
而瀏覽器在手機(jī)上的表現(xiàn)是什么呢？先看 Google，Chrome 性能雖高，但 Android 上的瀏覽器卻并非 Chrome，而是 WebKit 改出來(lái)的一個(gè)蹩腳的 Android 瀏覽器；再看蘋果，iOS 上不允許其他瀏覽器引擎上架 App Store，而且其他使用 Safari 引擎的應(yīng)用也無(wú)法調(diào)用蘋果自己的 JavaScript 加速引擎 Nitro。結(jié)果是蘋果和 Google 不但不在瀏覽器上積極實(shí)現(xiàn) HTML5 關(guān)于移動(dòng) App 所需的規(guī)范，反而對(duì) HTML5 做出種種限制。
不管是當(dāng)時(shí)硬件能力不足，還是手機(jī) OS 廠商的故意限制，總之結(jié)果很明顯：在移動(dòng)互聯(lián)網(wǎng)的初期，一定是原生應(yīng)用生態(tài)系統(tǒng)的天下，iOS 和 Android 首先把自己變成老大后，其他小弟才能尋覓到成長(zhǎng)的機(jī)會(huì)。
Facebook 也好，PhoneGap 也好，想在移動(dòng)互聯(lián)網(wǎng)初期就分一杯羹是分不到的，但堅(jiān)持下來(lái)，機(jī)會(huì)往往會(huì)出現(xiàn)。
HTML5 在這個(gè)時(shí)間定稿，不晚不早，硬件性能更強(qiáng)、手機(jī) OS 迭代速度下降。隨著 HTML5 標(biāo)準(zhǔn)定稿，一切紛爭(zhēng)將告一段落，現(xiàn)在，屬于 HTML5 的時(shí)代到來(lái)了。這個(gè)曾讓人滿懷希望，又被 Facebook 等眾多滿懷希望的開(kāi)發(fā)者放棄的技術(shù)，現(xiàn)在會(huì)告訴大家，曾經(jīng)讓各位失望的原因，現(xiàn)在已經(jīng)不存在了！這聽(tīng)起來(lái)有些驚人，大家不禁要問(wèn)：是真的嗎？讓我們細(xì)細(xì)分析。
業(yè)內(nèi)俗稱 HTML5 有“性功能”障礙。即 HTML5 性能不如原生、開(kāi)發(fā)工具不如原生、能力調(diào)用不如原生。
這幾個(gè)問(wèn)題導(dǎo)致開(kāi)發(fā)者無(wú)法使用 HTML5 做出與原生一樣的 App。然而，不管是硬件升級(jí)還是 OS 廠商策略變化，以及相關(guān)軟件技術(shù)的成熟，已解決了 HTML5 的“性工能”障礙。
我們都知道瀏覽器的默認(rèn)控件樣式和原生控件樣式差別很大，一個(gè)高性能的、樣式體驗(yàn)與原生控件一樣的 UI 框架是非常重要的，之前 jQuery Mobile 等產(chǎn)品的因性能不足，所以難當(dāng)此任。在這里做一個(gè)廣告，我所在的 DCloud 公司在 iWeb 大會(huì)上發(fā)布了系統(tǒng)的 HTML5“性工能缺失”的解決方案，包括解決 HTML5 性能問(wèn)題的手機(jī)端引擎、超快的 HTML5 開(kāi)發(fā) IDE 產(chǎn)品 HBuilder、還有把 40 萬(wàn)原生 API 封裝成 JavaScript 對(duì)象，以解決 HTML5 能力不足問(wèn)題的 Native.js 技術(shù)。
英特爾公司發(fā)布了 Crosswalk 引擎，可以讓 Android 4.0-4.3 的手機(jī)上的應(yīng)用打包 Chromium 引擎而不是 Android WebKit。雖說(shuō)未來(lái) Android 4.4 會(huì)占據(jù)更多市場(chǎng)份額，但目前主流的 Android 手機(jī)的系統(tǒng)版本畢竟還是 4.1、4.2。
在專業(yè)方向上很多公司也做出了不錯(cuò)的成績(jī)。觸控的 Cocos2d-html5、Egret runtime 和 Ludei CocoonJS 強(qiáng)化了 Canvas 的表現(xiàn)，讓 HTML5 游戲體驗(yàn)更好；UC、獵豹等手機(jī)瀏覽器也強(qiáng)化了音視頻播放的表現(xiàn)。
不管是硬件升級(jí)、軟件成熟，還是操作系統(tǒng)廠商策略變化，都在強(qiáng)力推動(dòng) HTML5 的爆發(fā)。
不過(guò)要注意，我說(shuō)的 HTML5 爆發(fā)，不是指手機(jī)瀏覽器爆發(fā)。有人說(shuō) HTML5 不好，因?yàn)橛脩粲憛挻蜷_(kāi)瀏覽器輸入 URL 的過(guò)程。我想說(shuō)這種想法是對(duì) HTML5 的片面理解。HTML5!= 傳統(tǒng)瀏覽器，雖然編程語(yǔ)言還是 HTML、Javascript、CSS，但發(fā)行方式絕不是傳統(tǒng)網(wǎng)站那么簡(jiǎn)單。HTML5 應(yīng)用的入口，反而很少是啟動(dòng)瀏覽器輸入 URL，它可以是存在于手機(jī)桌面的圖標(biāo)、也可以來(lái)自超級(jí) App（如微信朋友圈）、以及搜索引擎、應(yīng)用市場(chǎng)、廣告聯(lián)盟。。。到處都是它的入口。它的入口，比原生 App 更多。
HTML5 的“性工能”障礙得到解決，可以接近原生 App 的效果，所以它就可以替代原生 App 嗎？很多人認(rèn)為，即使 HTML5 會(huì)發(fā)展的比現(xiàn)在好，也將是與原生 App 各占一部分市場(chǎng)的格局，要求不高的長(zhǎng)尾應(yīng)用會(huì)使用 HTML5，而主流應(yīng)用仍是原生 App 的天下。
但我認(rèn)為這樣的想法很危險(xiǎn)，就像 HP 的高層告訴沃茲：誰(shuí)會(huì)在家里擺一臺(tái)電腦呢？未來(lái) HTML5 肯定會(huì)顛覆原生 App?！靶怨つ堋闭系K的消除，只是 HTML5 的劣勢(shì)被削弱，但劣勢(shì)被消除后，它的優(yōu)勢(shì)就會(huì)大放異彩，HTML5 的優(yōu)勢(shì)是什么？對(duì)開(kāi)發(fā)者來(lái)說(shuō)：
HTML5 對(duì)用戶的好處是：和流量入口多、分發(fā)效率高相對(duì)應(yīng)的。大幅降低使用門檻。用戶眼睛看到一個(gè)興趣點(diǎn)，點(diǎn)擊后，就應(yīng)該立即開(kāi)始滿足用戶需求。比如流媒體可以立即看，頁(yè)游可以立即玩。而目前的原生應(yīng)用市場(chǎng)，用戶需要這樣操作：選一個(gè)應(yīng)用、等待下載、確認(rèn)權(quán)限、等待安裝，然后點(diǎn)擊打開(kāi)。這樣糟糕的體驗(yàn)遲早要被顛覆。不管是 App、游戲還是音視頻，未來(lái)都將即點(diǎn)即用。誰(shuí)先滿足用戶這個(gè)需求，誰(shuí)就制勝。
這就是所謂“天下武功，唯快不敗”。分析至此，我們可以明顯的看出，不管是站在最終用戶角度、還是站在開(kāi)發(fā)者角度，HTML5 必將取代原生應(yīng)用當(dāng)前的位置。并由此引發(fā)一系列顛覆。
HTML5 的爆發(fā)，原生 App 生態(tài)系統(tǒng)的顛覆，是一場(chǎng)產(chǎn)業(yè)革命，很多角色都會(huì)受到影響，我們來(lái)預(yù)測(cè)一番。
標(biāo)準(zhǔn)的 HTML5 引擎并不能解決 HTML5 的所有問(wèn)題，擁有大流量入口的互聯(lián)網(wǎng)巨頭，莫不在思考內(nèi)嵌更優(yōu)秀的增強(qiáng)引擎。騰訊推出了 X5 瀏覽器引擎，就是看中這個(gè)機(jī)會(huì)。
目前各路瀏覽器廠商、應(yīng)用市場(chǎng)廠商、甚至 rom 廠商，都在努力整合更優(yōu)質(zhì)的瀏覽器引擎。假使微信內(nèi)嵌的 webview 可以運(yùn)行更優(yōu)秀的 canvas 游戲、假使 360 手機(jī)助手可以發(fā)行即點(diǎn)即用的 HTML5 應(yīng)用并且能力體驗(yàn)與原生一致、假使小米 rom 內(nèi)置更強(qiáng)大的 webview 使得所有 HTML5 應(yīng)用在小米手機(jī)上運(yùn)行的更流暢。所有巨頭都會(huì)聞風(fēng)而動(dòng)，沒(méi)錯(cuò)，這場(chǎng)戰(zhàn)役會(huì)是移動(dòng)互聯(lián)網(wǎng)世界的二次世界大戰(zhàn)。
應(yīng)用分發(fā)市場(chǎng)將面臨洗牌，由于超級(jí) App 的巨大流量能輕易成為 HTML5 應(yīng)用的入口，并且會(huì)形成大者更大的效應(yīng)，傳統(tǒng)的應(yīng)用商店、甚至線下預(yù)裝，這些流量不足和效率偏低的發(fā)行模式將被擠出市場(chǎng)主流。本身也是超級(jí) App 的大流量應(yīng)用商店，如果轉(zhuǎn)型得當(dāng)，也將以發(fā)行 HTML5 應(yīng)用為主。
原生的廣告和統(tǒng)計(jì)SDK提供商會(huì)面臨尬尷，Google、百度等基于網(wǎng)頁(yè)的廣告和統(tǒng)計(jì)服務(wù)會(huì)取得更大的優(yōu)勢(shì)。開(kāi)發(fā)者不再需要打包 SDK，引入一個(gè) Script 即可。
開(kāi)源技術(shù)將在移動(dòng)互聯(lián)網(wǎng)領(lǐng)域更加流行。HTML 的開(kāi)放性造就了大量的開(kāi)源產(chǎn)品，也反向促進(jìn)了 HTML 的繁榮。在 Github 上有大量的 JS 框架，而原生的開(kāi)源代碼數(shù)量相比甚少。而未來(lái)移動(dòng)互聯(lián)網(wǎng)世界將因?yàn)殚_(kāi)源而發(fā)展的更迅速，這里也同樣存在類 Github 廠商的機(jī)遇。
早期 HTML 只需要記事本寫(xiě)幾個(gè) Tag，中期的 HTML、JS、CSS 比較復(fù)雜，需要更高級(jí)的文本編輯器，但 HTML5 到來(lái)后，它的代碼量、復(fù)雜度、開(kāi)發(fā)模型將與原生開(kāi)發(fā)看齊，需要類似 XCode、Eclipse 等專業(yè)的 IDE 工具來(lái)解決開(kāi)發(fā)、調(diào)試的問(wèn)題。一些以會(huì)使用記事本寫(xiě)代碼為榮的開(kāi)發(fā)者，將面臨思路轉(zhuǎn)換甚至被更的開(kāi)發(fā)者淘汰。
HTML5 的強(qiáng)大會(huì)引發(fā)很多安全問(wèn)題，并且解決思路與原生不一樣，業(yè)內(nèi)有可能會(huì)出現(xiàn)新的安全廠商領(lǐng)導(dǎo)者。
寫(xiě)到結(jié)尾，感覺(jué)話題有點(diǎn)大了。其實(shí)未來(lái)如何發(fā)展是沒(méi)人能準(zhǔn)確預(yù)測(cè)的，變量非常多。但我想讓用戶和開(kāi)發(fā)者都更方便的趨勢(shì)是不會(huì)錯(cuò)的。歡迎大家一起討論 HTML5 的問(wèn)題，在爭(zhēng)議中提煉真知。
藍(lán)藍(lán)設(shè)計(jì)的小編 http://m.sillybuy.com