本文從產(chǎn)品、技術(shù)等角度講述了當(dāng)下 Web App 的困局、Web 技術(shù)的平臺(tái)化價(jià)值和未來行業(yè)的趨勢和變格。作者 Hans（微信 & QQ: 1396255225），移動(dòng)互聯(lián)網(wǎng)觀察者和從業(yè)者。
在阿里上市，鋒菲復(fù)合，李娜退役等頭條的當(dāng)口，騰訊 QQ 手機(jī)瀏覽器 X5 內(nèi)核面向移動(dòng) App 開放，這條消息即使在移動(dòng)互聯(lián)網(wǎng)行業(yè)內(nèi)也似乎并不起眼。不過，在我看來，第三方瀏覽器開始開放內(nèi)核，是移動(dòng) Web 的平臺(tái)化價(jià)值被行業(yè)充分認(rèn)知的標(biāo)志性事件，幾乎所有 App 應(yīng)用領(lǐng)域都可能從中受益，Web App 將融入 Native App 體系，而移動(dòng) Web 和手機(jī)瀏覽器內(nèi)核技術(shù)本身也將迎來新的發(fā)展機(jī)遇。
在此背景下，我們需要好好想一想的是：傳統(tǒng) Web App 面臨的問題，開放手機(jī)瀏覽器內(nèi)核技術(shù)對(duì) App 體系的意義，開放手機(jī)瀏覽器內(nèi)核技術(shù)對(duì) App 體系的意義。
Web App 與 Native App 之爭
行業(yè)中一直存在一個(gè)觀點(diǎn)：在 PC 端大部分互聯(lián)網(wǎng)業(yè)務(wù)都只能通過瀏覽器基于 Web 訪問，所以移動(dòng)端 Web App 也終將復(fù)制 PC 的成功——用戶將越來越多地通過手機(jī)瀏覽器，而不是 Native App 的方式訪問移動(dòng)互聯(lián)網(wǎng)業(yè)務(wù)。因?yàn)�，移�?dòng) Web App 同樣具備 PC Web App 的優(yōu)勢：
- 對(duì)用戶而言：通過 Web 訪問業(yè)務(wù)，無需下載安裝，手機(jī)上也就無需安裝大量的 Native App
- 對(duì) App 開發(fā)商而言：手機(jī)瀏覽器跨操作系統(tǒng)，App 開發(fā)商一次開發(fā)，部署于不同平臺(tái)，開發(fā)效率遠(yuǎn)超 Native App
- 基于 Web 訪問業(yè)務(wù)，可以跨應(yīng)用訪問和調(diào)用，這一點(diǎn) Native App 很難做到
這些論點(diǎn)理論上都沒有錯(cuò)，手機(jī)瀏覽器的安裝量遠(yuǎn)超大部分垂直應(yīng)用 App，也在一定程度上提供了佐證。
但現(xiàn)實(shí)是，在絕大多數(shù)領(lǐng)域，就特定垂直應(yīng)用而言，大量用戶都更習(xí)慣通過垂直 Native App，而不是以 Web 方式訪問業(yè)務(wù)。這是為什么？
當(dāng)下 Web 技術(shù)在手機(jī)端有天然局限，主要表現(xiàn)為：
- 執(zhí)行效率：在手機(jī)端，無論就 JavaScript 的執(zhí)行效率，還是渲染性能，Web 技術(shù)都無法與更直接調(diào)用 OS 功能的 Native App 技術(shù)匹配，這是天然的；
- 內(nèi)容呈現(xiàn)能力：在手機(jī)端，傳統(tǒng) Web 的 UI 控件與 Native App 的 UI 控件的的形態(tài)和表現(xiàn)能力有較大差距
- 功能覆蓋：一些 I/O 功能調(diào)用如：拍照、音效、視頻…基于 HTML5 的調(diào)用效果仍然不及 Native API
舉個(gè)簡單例子：所有的手機(jī)地圖 App 包括百度、高德、搜狗…都提供了 Web 版本，但其 Web 版本的功能和體驗(yàn)對(duì)比 Native App 版本，只能說“呵呵”。
接下來的問題是，通過傳統(tǒng)意義上的 Web 平臺(tái)訪問業(yè)務(wù)，比通過 Native App 更便捷嗎？
雖然 Android/iOS 的 App 都數(shù)以百萬計(jì)，但事實(shí)上，用戶常用的業(yè)務(wù)類型只有 10 種左右（搜索，資訊，SNS，小說/閱讀，地圖，電商，O2O，視頻，音樂，安全，娛樂/時(shí)尚…），除游戲外，用戶只需要針對(duì)每種業(yè)務(wù)類型選擇安裝 1~2 種垂直領(lǐng)域的“超級(jí) App”（例如：手機(jī)百度，搜狐新聞，微信/QQ空間，塔讀，高德，淘寶，大眾點(diǎn)評(píng)，優(yōu)酷，酷我，360…），就可以滿足日常絕大部分移動(dòng)互聯(lián)網(wǎng)需求。
行業(yè)內(nèi)各種統(tǒng)計(jì)都顯示，絕大部分用戶日常使用的 App，只有 10~20 個(gè)左右，并不存在用戶為了日常需求而被迫頻繁安裝大量 App 的情況。
在訪問路徑上，用戶使用 Native App，只需要找到 App 圖標(biāo)在桌面上的位置；而若要通過手機(jī)瀏覽器或者其他移動(dòng) Web 平臺(tái)，則需要首先找到瀏覽器圖標(biāo)，再在手機(jī)瀏覽器內(nèi)部的找到相應(yīng)的圖標(biāo)或鏈接。
Native App 會(huì)把大量的資源信息預(yù)先下載安裝到本地；而基于傳統(tǒng)移動(dòng) Web 的訪問模式，則非�？赡苄枰谠L問內(nèi)容時(shí)才同時(shí)下載所有資源信息，其訪問效率和內(nèi)容展示效果與 Native App 相比都存在劣勢。
傳統(tǒng) Web App 的應(yīng)用模式是在操作系統(tǒng)與應(yīng)用之間插入一個(gè)自有的操作體系和業(yè)務(wù)體系；這在 PC 上可行，在手機(jī)端則面臨挑戰(zhàn)。
首先是操作邏輯上的混淆，相對(duì)于 PC 上可以通過鼠標(biāo)、鍵盤、菜單等豐富的操作方式，手機(jī)上的操作方式非常有限。用戶在手機(jī)瀏覽器等 Web 平臺(tái)中針對(duì) Web App 的操作，一部分將會(huì)被平臺(tái)本身截獲，產(chǎn)生不符合用戶預(yù)期的執(zhí)行結(jié)果。典型的被截獲操作是系統(tǒng)回退和左右滑屏——這使得 Web App 在傳統(tǒng)應(yīng)用模式下無法實(shí)現(xiàn)應(yīng)用內(nèi)回退或側(cè)邊欄等設(shè)計(jì)。
傳統(tǒng)手機(jī)瀏覽器、移動(dòng)搜索等 Web 平臺(tái)一直試圖在其自身操作范疇內(nèi)建設(shè)一個(gè)大而全的 Web App Store 體系，甚至，部分手機(jī)瀏覽器和移動(dòng)搜索 App 將其 Home 頁面設(shè)計(jì)為非常接近系統(tǒng)桌面的形態(tài)。這本身就可能混淆用戶的認(rèn)知，既然用戶在系統(tǒng)桌面上就可以滿足絕大部分日常需求，為什么還要進(jìn)入某個(gè) App 去訪問一個(gè)跟系統(tǒng)桌面非常類似的 Web App 體系呢？
“輕應(yīng)用”一度成為 Web App 切入系統(tǒng)桌面的探索，但各個(gè)巨頭推出的“輕應(yīng)用”仍然試圖將 Web App 限定在其手機(jī)瀏覽器的操作范疇內(nèi)。當(dāng)用戶從系統(tǒng)桌面打開“輕應(yīng)用”快捷圖標(biāo)后，應(yīng)用界面中往往會(huì)出現(xiàn)與該應(yīng)用自身毫無關(guān)系的手機(jī)瀏覽器操作菜單。這樣的設(shè)計(jì)，反而會(huì)給用戶增加理解和操作的負(fù)擔(dān)。
那么 PC 瀏覽器的操作元素在智能手機(jī)上是否必要？所有的手機(jī)瀏覽器，基本操作元素都來自 PC 瀏覽器，包括：菜單欄、網(wǎng)址&搜索框、多窗口（Lable）等。不過，在寸土寸金的手機(jī)屏幕，這些元素都是必須的嗎？
事實(shí)上，當(dāng)下主流的 App，包括與手機(jī)瀏覽器類似同樣支持 Web 訪問的 App 例如：微信、QQ 空間、資訊類 App（今日頭條、Zaker…）、移動(dòng)搜索客戶端（百度，搜狗，360…），都不提供（或刻意回避）單個(gè) App 內(nèi)多窗口、多任務(wù)的設(shè)計(jì)，而采用更為簡單的單一內(nèi)容訪問模式。手機(jī)瀏覽器基于其歷史原因，多窗口似乎不得不成為標(biāo)配，但用戶真的需要嗎？
在功能機(jī)時(shí)代，系統(tǒng)桌面不是多任務(wù)的，手機(jī)瀏覽器的多任務(wù)會(huì)給用戶帶來極大的便利；但智能手機(jī)系統(tǒng)本身就是多任務(wù)、多窗口的，單一 App 內(nèi)的多窗口，給手機(jī)應(yīng)用帶來了多級(jí)多任務(wù)體系，是否仍然會(huì)讓用戶感到便利？
當(dāng)下，PC 端游、PC 頁游、手游（“手機(jī)端游”）三大領(lǐng)域各領(lǐng)風(fēng)騷，而手游的市場空間更是年年翻番。但是，基于 Web App 的“手機(jī)頁游”的發(fā)展卻遠(yuǎn)不能與之匹配，為什么？
首要的還是帶寬的影響：高品質(zhì)的手機(jī)游戲，需要大量的資源（動(dòng)輒幾十甚至數(shù)百 M 圖片和音效）。如果完全基于傳統(tǒng) Web App 即時(shí)下載的運(yùn)行模式，根本無法啟動(dòng)運(yùn)行。如果手機(jī)頁游基于預(yù)下載等技術(shù)手段，則用戶訪問的體驗(yàn)其實(shí)就等同于 Native App。
而針對(duì)一些輕小的休閑游戲，微信、QQ 空間、微博等平臺(tái)基于其社交屬性，很容易引起用戶的交流和分享，給“打飛機(jī)”“神經(jīng)貓”“2048”等看似簡陋卻極易傳播的 HTML5 游戲帶來了巨大的訪問量，但這樣的游戲又很難找到持久粘性。
更深的原因則是行業(yè)對(duì)移動(dòng) HTML5 游戲技術(shù)的認(rèn)知存在信息不對(duì)稱：HTML5 標(biāo)準(zhǔn)的一個(gè)重要組成部分是 canvas 元素，標(biāo)準(zhǔn)的設(shè)計(jì)者認(rèn)為 canvas 就是 2D HTML5 游戲的技術(shù)基礎(chǔ)；但在實(shí)際的開發(fā)中，絕大部分 HTML5 手游開發(fā)商卻選擇 DOM 作為運(yùn)行基礎(chǔ)。要知道，DOM 是為網(wǎng)頁的布局而不是根本不是為游戲定義的，這是為什么？
事實(shí)上，canvas 的 API 非常底層，如果基于 canvas 開發(fā)游戲，必須從最基礎(chǔ)的元素開始構(gòu)建幀畫面，游戲程序必須自行構(gòu)建和對(duì)象體系，其開發(fā)成本并不亞于基于 Native；同時(shí)，canvas 的 API 體系與智能手機(jī)的硬件渲染機(jī)制 OpenGL 并不匹配，很難有一種通用的模式能夠提升基于 canvas 的手游游戲運(yùn)行效率。所以，基于 canvas 開發(fā)高品質(zhì)游戲，對(duì)研發(fā)人員有很高的要求。當(dāng)然，行業(yè)中有大量的基于 canvas 的框架引擎，但其學(xué)習(xí)成本本身就是一種負(fù)擔(dān)。
而基于 DOM 開發(fā)游戲，雖然執(zhí)行性能遠(yuǎn)遠(yuǎn)無法與 Native 游戲匹配，但由于 DOM 體系本身就基于對(duì)象化機(jī)制，實(shí)現(xiàn)頁面元素的布局、操作事件的獲取都極其方便，其開發(fā)成本大大低于基于 canvas 或 Native App；對(duì)于實(shí)時(shí)性能要求不高的手游（典型如棋牌類游戲），DOM 是極好的技術(shù)選擇。
要知道：DOM 是 HTML 的基本組成部分，所有的前端開發(fā)人員都會(huì)；而擁有 canvas 商用開發(fā)經(jīng)驗(yàn)的前端人員則鳳毛菱角。
所以，HTML5 手游領(lǐng)域發(fā)生了一個(gè)并沒有被行業(yè)普遍意識(shí)到的問題：若干技術(shù)平臺(tái)開發(fā)商聚焦在提升 canvas 游戲的執(zhí)行和渲染效率；而大量真正基于 HTML5 的手游開發(fā)商卻不使用 canvas。同時(shí)，大量的 HTML5 手游并不是基于傳統(tǒng)意義上的 Web App 形態(tài)運(yùn)行，而是打包為 Native App 形態(tài)，甚至從不宣傳其基于 HTML5。
綜上，傳統(tǒng)意義上的 Web App 應(yīng)用模式，面臨諸多挑戰(zhàn)。
但是，傳統(tǒng) Web App 應(yīng)用模式的問題并不意味著移動(dòng) Web 缺乏應(yīng)用價(jià)值。恰恰相反，移動(dòng) Web 具備其他平臺(tái)技術(shù)很難有的獨(dú)特優(yōu)勢�；陂_放的應(yīng)用模式，移動(dòng) Web 可以在更大的應(yīng)用場景下，充分實(shí)現(xiàn)其平臺(tái)化價(jià)值。
在移動(dòng)端，Web App 與 Native App 最終將不是孰優(yōu)孰劣的問題，而是 Web App 自身將融入操作系統(tǒng)的大平臺(tái)中。
開放手機(jī)瀏覽器內(nèi)核：Web App 融入 Native App 體系的契機(jī)
讓我們看兩頁 2014 年 iWeb 大會(huì)某 App 開發(fā)商的 PPT，它清楚地描述了 App 開發(fā)商面臨的典型問題和解決方案：
在移動(dòng)端，社交平臺(tái)（微信、微博、QQ 空間、QQ）內(nèi)傳播的內(nèi)容形態(tài)，當(dāng)前移動(dòng)搜索可以訪問的內(nèi)容形態(tài)，當(dāng)然還有手機(jī)瀏覽器，都是基于 Web 的。所以，在幾乎所有的 App 應(yīng)用領(lǐng)域（除手機(jī)游戲，系統(tǒng)類應(yīng)用，以及有特殊技術(shù)需求的應(yīng)用外），幾乎所有的 App 開發(fā)商都必須提供基于移動(dòng) Web 的內(nèi)容呈現(xiàn)形態(tài)，否則，將失去社交平臺(tái)、手機(jī)瀏覽器、移動(dòng)搜索等重要的流量入口——這就是移動(dòng) Web 技術(shù)的平臺(tái)化價(jià)值。
所以，對(duì)于移動(dòng) App 開發(fā)商而言，存在一個(gè)普遍的需求：只開發(fā)一套基于 Web 的應(yīng)用，就可以同時(shí)部署在應(yīng)用商店、社交平臺(tái)、手機(jī)瀏覽器，可以被移動(dòng)搜索訪問，甚至還可以被其他應(yīng)用直接調(diào)用。
但是，當(dāng)前智能手機(jī)操作系統(tǒng)并不能很好地滿足這個(gè)需求，用下面的圖表就可以看出，當(dāng)前應(yīng)用 App 開發(fā)可用的內(nèi)核平臺(tái)運(yùn)行效果差：
而且，基于移動(dòng) Web 規(guī)范開發(fā)具有 Native 表現(xiàn)力的 App，有大量尚未被滿足的需求，包括：App 執(zhí)行效率、Native UI 控件、一些移動(dòng) Web 規(guī)范尚未支持的 Native 功能調(diào)用。
解決問題并滿足這些需求，就是三方手機(jī)瀏覽器開放其內(nèi)核的意義所在。
同時(shí)，Web App 與瀏覽器內(nèi)核打包為 Native App，Web App 在手機(jī)瀏覽器中運(yùn)行可能存在的問題將得到自然解決，例如：
- 功能缺陷可以通過 Native API 調(diào)用實(shí)現(xiàn)（Hybrid App 技術(shù)）
- 杜絕與業(yè)務(wù)本身無關(guān)的操作元素，不產(chǎn)生操作混淆
- 資源可以預(yù)先下載到本地，不需要運(yùn)行時(shí)下載大量資源
QQ 手機(jī)瀏覽器首先開放 X5 內(nèi)核，在我看來，只是行業(yè)的第一步。
當(dāng)然，QQ 手機(jī)瀏覽器 X5 內(nèi)核有一個(gè)非常獨(dú)特的優(yōu)勢，它本身已經(jīng)成為微信、QQ、QQ 空間的內(nèi)核。對(duì)移動(dòng) App 開發(fā)商而言，只需要開發(fā)一次，就可以順利適配微信、QQ、QQ 空間并打包為 Native App。對(duì)騰訊而言，借助這個(gè)內(nèi)核，甚至可以直接打通包括應(yīng)用寶、微信、QQ、QQ 空間、QQ 手機(jī)瀏覽器的完整的應(yīng)用開發(fā)服務(wù)和應(yīng)用分發(fā)產(chǎn)業(yè)鏈。
面對(duì)移動(dòng) Web 技術(shù)的可能趨勢，怎么辦？
移動(dòng) Web 技術(shù)仍然面臨諸多需求，需要不斷解決。第一，需要提供針對(duì)移動(dòng) App 應(yīng)用（而不僅僅是手機(jī)網(wǎng)頁）的功能支持：傳統(tǒng)上，Web 規(guī)范的使用對(duì)象是 Web 網(wǎng)頁；但在今日，移動(dòng) Web 技術(shù)的用戶已經(jīng)遠(yuǎn)遠(yuǎn)不止是手機(jī)網(wǎng)頁，而是大量的 Native App。移動(dòng) Web 技術(shù)平臺(tái)，應(yīng)當(dāng)更多地考慮如何基于 Web 技術(shù)實(shí)現(xiàn) Native App 的內(nèi)容體現(xiàn)和運(yùn)行效果。
第二，需要提升 JS 運(yùn)行性能：JS 是非常靈活的高級(jí)語言，其開發(fā)靈活的代價(jià)就是運(yùn)行效率明顯低于 Native 程序，因?yàn)?JS 在設(shè)計(jì)之初根本沒有料想到將來會(huì)在手機(jī)這樣的微型設(shè)備上運(yùn)行。通過系統(tǒng)硬件和軟件的改進(jìn)不斷提升 JS 運(yùn)行性能，是需要芯片廠商、操作系統(tǒng)廠商、瀏覽器內(nèi)核廠商持續(xù)解決的。
最后，需要提升基于移動(dòng) Web 的渲染性能：我認(rèn)為，操作系統(tǒng)、手機(jī)瀏覽器內(nèi)核應(yīng)用盡早實(shí)現(xiàn)和開放 webGL。webGL 的開放價(jià)值遠(yuǎn)不止于提供 3D 渲染，而是在于直接向 Web 應(yīng)用開放硬件渲染能力。未來的渲染框架引擎，可以直接基于 JS+webGL 完成，而不需要依賴 Native 的渲染框架，這將幫助大量具備 HTML5 商用開發(fā)經(jīng)驗(yàn)的團(tuán)隊(duì)靈活地實(shí)現(xiàn)和提供更有針對(duì)性的開發(fā)框架。甚至，DOM 體系的解析、布局和渲染，未來也可能基于 JS + webGL 直接實(shí)現(xiàn)。
綜上，產(chǎn)業(yè)鏈各個(gè)環(huán)節(jié)的現(xiàn)狀和我的建議如下：
w3c 標(biāo)準(zhǔn)組織：移動(dòng) Web 規(guī)范的制定，不能只考慮基于手機(jī)瀏覽器的運(yùn)行規(guī)范，不能局限在保持跨瀏覽器規(guī)范一致；而應(yīng)當(dāng)把更多的精力投向移動(dòng) App 的實(shí)際商用需求。例如：移動(dòng) Web UI 控件的形態(tài)，應(yīng)當(dāng)與 Native App 的控件形態(tài)看齊，而不是與 PC 瀏覽器的 Web 形態(tài)保持規(guī)范上的一致。
芯片廠商和操作系統(tǒng)廠商：應(yīng)當(dāng)對(duì)移動(dòng) Web 的運(yùn)行性能和運(yùn)行效果提供持續(xù)的平臺(tái)支撐和優(yōu)化，若干廠商早已在為之投入。例如：intel 支持基于 CPU SIMD指令來加速 JS 代碼的執(zhí)行，xDK，crossWalk 框架；ARM 持續(xù)優(yōu)化 WebKit 關(guān)鍵庫、cocos2d-js，推出 NEON；iOS 8 正式開放 webGL；Android中，Chrome Mobile 支持 webGL；Android4.4 開始，系統(tǒng)自帶 WebView 基于 Chromium（但還沒有支持 webGL）。
手機(jī)瀏覽器內(nèi)核和其他類似技術(shù)的提供廠商：一旦開放內(nèi)核給三方 App，三方瀏覽器內(nèi)核即可能面臨巨大的需求壓力，因?yàn)橐苿?dòng) Web 技術(shù)和規(guī)范本身還存在大量需求和優(yōu)化空間。對(duì) QQ 手機(jī)瀏覽器而言，應(yīng)當(dāng)充分利用作為微信內(nèi)核的優(yōu)勢，爭取給 App 開發(fā)商提供真正一站式的應(yīng)用開發(fā)服務(wù)支撐。對(duì)其他手機(jī)瀏覽器內(nèi)核廠商而言，如果面向移動(dòng) App 開放內(nèi)核，同樣可以獲得廣泛的需求空間；其他三方瀏覽器完全可以找到獨(dú)特的差異化優(yōu)勢，也可以與 AppCan、PhoneGap 這些移動(dòng) Web 框架引擎巨頭合作獲得廣泛的用戶（應(yīng)用開發(fā)商）資源。
一言以蔽之，移動(dòng) Web 的平臺(tái)價(jià)值將在更大更開放的應(yīng)用場景中實(shí)現(xiàn)。