Facebook引發(fā)的HTML5危機

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

　　Facebook放棄HTML5主因：慢

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

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

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

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

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

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

　　現階段HTML5的問(wèn)題：政治斗爭

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

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

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

　　最后

　　Facebook的iOS放棄HTML5。幸災樂(lè )禍也好，沮喪也罷。變的只是一個(gè)應用，HTML5的勢頭和趨勢不是一個(gè)企業(yè)可以逆轉的?，F階段，真正的了解HTML5，掌握HTML5的開(kāi)發(fā)技巧和在恰當的地方用好HTML5，才是把握機遇的重點(diǎn)。