近期幾個新聞堆疊在一起，頗有韻味。先是
\nWHATWG和W3C在HTML5標(biāo)準(zhǔn)上分道揚鑣，繼而“Facebook移動應(yīng)用宣布放棄HTML5的部分，
\n改為純Native方式開發(fā)”，接著又傳聞蘋果AppStore肅殺基于Web技術(shù)的App。這幾個事件對移動互聯(lián)網(wǎng)行業(yè)來說個個都是重磅炸彈，押注HTML5的受到不小的打擊，唱衰HTML5發(fā)展的借此幸災(zāi)樂禍。HTML5真的只是一場政治斗爭嗎？到底 Facebook為什么放棄HTML5？現(xiàn)階段HTML5到底出了什么問題？###Facebook放棄HTML5主因：慢

“對于Facebook的iOS原生應(yīng)用來說，它在主要在三個方面有很大的速度提升：應(yīng)用啟動、共享新聞滾動還有圖片點擊查看。其總體速度大約提升了一倍。這個版本部分采用了Facebook Camera和Facebook Messenger兩款應(yīng)用的代碼庫：其中圖片點擊查看功能的代碼是從Facebook Camera移植過來，而屏幕消息是從Facebook Messenger那克隆過來的。這個原生版本是由一個獨立的團隊開發(fā)，產(chǎn)品經(jīng)理Johnson表示未來會充分利用公司的代碼共享，也會適當(dāng)向其他團隊尋求幫助。”

上述摘自Facebook的官方博客。博客中介紹到Facebook的iOS原生應(yīng)用放棄HTML5后速度得到大幅度提升。大家不禁好奇，為什么HTML5會比原生NativeApp要“慢”很多？

在當(dāng)前的移動終端設(shè)備硬件配置和操作系統(tǒng)優(yōu)化水平的前提下，大部分基于HTML5開發(fā)的Web頁面會出現(xiàn)延時加載展示的現(xiàn)象，也就是俗稱的卡、慢。特別是在不同的視圖界面(view)切換之間，這種卡和不流暢的現(xiàn)象會尤為嚴(yán)重。而Native應(yīng)用不會出現(xiàn)這種情況。究其根源，在于瀏覽器解析的運作機制和原生Native的界面展示機制差異上。如下圖所示：

紅色框起來的部分是原生NativeApp的界面展示機制，簡單的看起來就是1個步驟——展示，因為所有的繪圖和渲染工作都由系統(tǒng)直接完成。而紅框以外的部分包括紅框內(nèi)的部分是webkit核心的瀏覽器解析頁面的流程。相比Native的1個步驟，webkit的解析過程可謂漫長而艱辛。歷經(jīng)解析、建立Dom樹、獲取對應(yīng)資源、布局、建立渲染樹、繪圖到展示。所以不管移動終端設(shè)備硬件如何發(fā)展，這個差異是始終存在的，最多只是隨著硬件的提升和軟件的優(yōu)化將這個差異收縮到最小甚至忽略。

更糟糕的是。Facebook之前的iOS混合了HTML5的移動應(yīng)用，使用HTML5繪圖的頁面在HTML5開發(fā)上也毫無技巧可言，基本沿用了主流前端開發(fā)框架jQuery mobile等的單View多div的機制。也就是在一個網(wǎng)頁內(nèi)繪制多個視圖，頁面之間的切換其實只是一個頁面內(nèi)不同區(qū)塊的切換。這種方式加大了瀏覽器的渲染和繪制工作強度。并且在數(shù)據(jù)加載和流量上產(chǎn)生很大的負(fù)面影響。如果切換到新頁面，之前的頁面不進行銷毀，則會加大運算量和增加內(nèi)存占有，而如果銷毀又會導(dǎo)致已經(jīng)下載的數(shù)據(jù)失效，要重新載入，浪費流量。類似情況在中國的網(wǎng)絡(luò)和設(shè)備情況下會尤為突出。所以Facebook不當(dāng)?shù)脑贜ative App內(nèi)混搭HTML5也難免引來用戶怨言。

還有，一如報道中提到的，F(xiàn)acebook這次的改進提升主要是“新聞滾動和圖片點擊”。如果了解HTML5的人，就會發(fā)現(xiàn)，這兩點當(dāng)然是“不應(yīng)該在現(xiàn)階段使用HTML5實現(xiàn)的”。為什么？筆者作為一個基于HTML5技術(shù)的Hybrid App系統(tǒng)的設(shè)計者，設(shè)計秉承的一個原則就是“凡是需要’動’的部分和需要大量運算的部分，就最好使用原生彌補，而不是一定要使用HTML5來實現(xiàn)”。新聞滾動，這種不停通過改變Dom樹近而改變渲染再繪圖展示的使用場景相比原生Native弱勢是非常明顯的。至于圖片的部分就更不用多說了，這并不是HTML5眼下擅長的部分。HTML5現(xiàn)在擅長的部分是數(shù)據(jù)量不大的頁面、動畫少的頁面，特別是跨平臺的開發(fā)。充分利用好HTML5的優(yōu)勢，盡量降低HTML5的弱勢，學(xué)會用好HTML5，才是現(xiàn)在這個時期使用HTML5開發(fā)的重點。可以說開發(fā)技巧很重要。

###現(xiàn)階段HTML5的問題：政治斗爭

“原生版本是一個獨立團隊開發(fā)的。”Facebook公開的這一點也耐人尋味。原來客戶端是Native與HTML5混合的方式，原來的團隊也肯定有原生的開發(fā)能力，為什么非要一個獨立團隊重新耗費6個月進行重新開發(fā)？或許這里不能排除公司內(nèi)政治因素，而HTML5成為一個犧牲品。HTML5的政治不僅是一個公司內(nèi)的，更是整個行業(yè)的。7月份，同為HTML5制定者的WHATWG和W3C表示無法繼續(xù)合作，前者希望制定一個能夠跟隨市場或技術(shù)動態(tài)的標(biāo)準(zhǔn)；后者則要確立一個“死”的標(biāo)準(zhǔn)，一旦正式頒布再也無法修改。

WHATWG和W3C的分道揚鑣或許會成為HTML5發(fā)展的一個分水嶺。WHATWG背后有Google、蘋果，W3C拉到了特立獨行的巨無霸微軟。標(biāo)準(zhǔn)是為利益服務(wù)的，曾經(jīng)力推HTML5的蘋果，現(xiàn)在也傳聞在AppStore內(nèi)打壓基于HTML5開發(fā)的App。那蘋果到底是喜歡還是不喜歡HTML5？喜歡也是真，討厭也是真。過去喬布斯為了滅掉Adobe的Flash，將HTML5當(dāng)成沖鋒槍，
\n在移動端干掉了Flash之后，面對自己封閉生態(tài)系統(tǒng)的巨大利益和HTML5世界大同的愿景做出選擇的時候，蘋果當(dāng)然毫無懸念的選擇自己的利益。

《
\nweb app的挑戰(zhàn)(三)：入口之爭》一文中，我有闡述自己的觀點：入口之爭”在現(xiàn)有移動操作系統(tǒng)設(shè)計架構(gòu)下，瀏覽器很難和用戶桌面爭奪核心入口地位。蘋果打造的iOS系統(tǒng)就是一個應(yīng)用優(yōu)先的系統(tǒng)，無論HTML5怎么發(fā)展，Web App如何掙扎，瀏覽器如何砸錢，都搶不過用戶桌面的入口地位。基于HTML5的Web App的命運被蘋果牢牢把控。Android系統(tǒng)這個跟隨iOS桌面入口理念的半山寨貨也沒有押注Web App而是將這個任務(wù)交給了ChromeOS。所以，不用炒概念，也不用談未來，用HTML5開發(fā)原生應(yīng)用，而不是僅僅套個外殼那么簡單才是現(xiàn)階段HTML5使用的重點和發(fā)展的重點。并且蘋果封殺的也只是純HTML5套殼的App，對于使用混搭模式(包括Facebook之前的版本)的移動應(yīng)用還是保持開放姿態(tài)，畢竟這種HTML5還是在蘋果的生態(tài)系統(tǒng)內(nèi)可控的運行著。

###最后

Facebook的iOS放棄HTML5。幸災(zāi)樂禍也好，沮喪也罷。變的只是一個應(yīng)用，HTML5的勢頭和趨勢不是一個企業(yè)可以逆轉(zhuǎn)的。現(xiàn)階段，真正的了解HTML5，掌握HTML5的開發(fā)技巧和在恰當(dāng)?shù)牡胤接煤肏TML5，才是把握機遇的重點。

作者：@
\nAppCan劉鑫