Facebook 引發的 HTML5 危機

發表於2012-09-01

作者:AppCan 劉鑫

近期幾個新聞堆疊在一起,頗有韻味。先是 WHATWG 和 W3C 在 HTML5 標準上分道揚鑣,繼而“Facebook 移動應用宣佈放棄 HTML5 的部分,改為純 Native 方式開發”,接著又傳聞蘋果 AppStore 肅殺基於 Web 技術的 App。這幾個事件對移動網際網路行業來說個個都是重磅炸彈,押注 HTML5 的受到不小的打擊,唱衰 HTML5 發展的藉此幸災樂禍。HTML5真的只是一場政治鬥爭嗎?到底 Facebook 為什麼放棄 HTML5?現階段 HTML5 到底出了什麼問題?

Facebook 放棄 HTML5 主因:慢

“對於 Facebook 的 iOS 原生應用來說,它主要在三個方面有很大的速度提升:應用啟動、共享新聞滾動還有圖片點選檢視。其總體速度大約提升了一倍。這個版本部分採用了 Facebook Camera 和 Facebook Messenger 兩款應用的程式碼庫:其中圖片點選檢視功能的程式碼是從 Facebook Camera 移植過來,而螢幕訊息是從 Facebook Messenger 那克隆過來的。這個原生版本是由一個獨立的團隊開發,產品經理 Johnson 表示未來會充分利用公司的程式碼共享,也會適當向其他團隊尋求幫助。”

上述摘自 Facebook 的官方部落格。部落格中介紹到 Facebook 的 iOS 原生應用放棄 HTML5 後速度得到大幅度提升。大家不禁好奇,為什麼 HTML5 會比原生 NativeApp 要“慢”很多?

在當前的移動終端裝置硬體配置和作業系統優化水平的前提下,大部分基於 HTML5 開發的 Web 頁面會出現延時載入展示的現象,也就是俗稱的卡、慢。特別是在不同的檢視介面(view)切換之間,這種卡和不流暢的現象會尤為嚴重。而 Native 應用不會出現這種情況。究其根源,在於瀏覽器解析的運作機制和原生 Native 的介面展示機制差異上。如下圖所示:

 Facebook 引發的 HTML5 危機

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

更糟糕的是。Facebook 之前的 iOS 混合了 HTML5 的移動應用,使用 HTML5 繪圖的頁面在 HTML5 開發上也毫無技巧可言,基本沿用了主流前端開發框架 jQuery mobile 等的單 View 多 div 的機制。也就是在一個網頁內繪製多個檢視,頁面之間的切換其實只是一個頁面內不同區塊的切換。這種方式加大了瀏覽器的渲染和繪製工作強度。並且在資料載入和流量上產生很大的負面影響。如果切換到新頁面,之前的頁面不進行銷燬,則會加大運算量和增加記憶體佔有,而如果銷燬又會導致已經下載的資料失效,要重新載入,浪費流量。類似情況在中國的網路和裝置情況下會尤為突出。所以 Facebook 不當的在 Native App 內混搭 HTML5 也難免引來使用者怨言。

還有,一如報導中提到的,Facebook 這次的改進提升主要是“新聞滾動和圖片點選”。如果瞭解 HTML5 的人,就會發現,這兩點當然是“不應該在現階段使用 HTML5 實現的”。為什麼?筆者作為一個基於 HTML5 技術的 Hybrid App 系統的設計者,設計秉承的一個原則就是“凡是需要’動’的部分和需要大量運算的部分,就最好使用原生彌補,而不是一定要使用 HTML5 來實現”。新聞滾動,這種不停通過改變 Dom 樹近而改變渲染再繪圖展示的使用場景相比原生 Native 弱勢是非常明顯的。至於圖片的部分就更不用多說了,這並不是 HTML5 眼下擅長的部分。HTML5 現在擅長的部分是資料量不大的頁面、動畫少的頁面,特別是跨平臺的開發。充分利用好 HTML5 的優勢,儘量降低 HTML5 的弱勢,學會用好 HTML5,才是現在這個時期使用 HTML5 開發的重點。可以說開發技巧很重要。

現階段 HTML5 的問題:政治鬥爭

Facebook 引發的 HTML5 危機

“原生版本是一個獨立團隊開發的。”Facebook 公開的這一點也耐人尋味。原來客戶端是 Native 與 HTML5 混合的方式,原來的團隊也肯定有原生的開發能力,為什麼非要一個獨立團隊重新耗費 6 個月進行重新開發?或許這裡不能排除公司內政治因素,而 HTML5 成為一個犧牲品。HTML5 的政治不僅是一個公司內的,更是整個行業的。7月份,同為 HTML5 制定者的 WHATWG 和 W3C 表示無法繼續合作,前者希望制定一個能夠跟隨市場或技術動態的標準;後者則要確立一個“死”的標準,一旦正式頒佈再也無法修改。

WHATWG 和 W3C 的分道揚鑣或許會成為 HTML5 發展的一個分水嶺。WHATWG 背後有 Google、蘋果,W3C 拉到了特立獨行的巨無霸微軟。標準是為利益服務的,曾經力推 HTML5 的蘋果,現在也傳聞在 AppStore 內打壓基於 HTML5 開發的 App。那蘋果到底是喜歡還是不喜歡 HTML5?喜歡也是真,討厭也是真。過去賈伯斯為了滅掉 Adobe 的 Flash,將 HTML5 當成衝鋒槍,在移動端幹掉了 Flash 之後,面對自己封閉生態系統的巨大利益和 HTML5 世界大同的願景做出選擇的時候,蘋果當然毫無懸念的選擇自己的利益。

《Web App 的挑戰(三):入口之爭》一文中,我有闡述自己的觀點:入口之爭”在現有移動作業系統設計架構下,瀏覽器很難和使用者桌面爭奪核心入口地位。蘋果打造的 iOS 系統就是一個應用優先的系統,無論 HTML5 怎麼發展,Web App 如何掙扎,瀏覽器如何砸錢,都搶不過使用者桌面的入口地位。基於 HTML5 的 Web App 的命運被蘋果牢牢把控。Android 系統這個跟隨 iOS 桌面入口理念的半山寨貨也沒有押注 Web App 而是將這個任務交給了 Chrome OS。所以,不用炒概念,也不用談未來,用 HTML5 開發原生應用,而不是僅僅套個外殼那麼簡單才是現階段 HTML5 使用的重點和發展的重點。並且蘋果封殺的也只是純 HTML5 套殼的 App,對於使用混搭模式(包括 Facebook 之前的版本)的移動應用還是保持開放姿態,畢竟這種 HTML5 還是在蘋果的生態系統內可控的執行著。

最後

Facebook 的 iOS 放棄 HTML5。幸災樂禍也好,沮喪也罷。變的只是一個應用,HTML5 的勢頭和趨勢不是一個企業可以逆轉的。現階段,真正的瞭解 HTML5,掌握 HTML5 的開發技巧和在恰當的地方用好 HTML5,才是把握機遇的重點。

 

 

 

相關文章