HTML5定稿一周年，你必須要重新認識HTML5了
去年此時，W3C 定稿了 HTML5。我曾發表一篇文章《HTML 5 終于定稿，為什么原生 App 世界將被顛覆》，這文章轉載量很大，它闡述了 HTML5 的來龍去脈，分析了 HTML5 的優劣勢并對未來發展做了一些預測。
時隔一年，我們看看 HTML5 產業都發生了什么，那些基于理論的預測，哪些被實踐了，結果又如何？
- 2015 年初，非死book 宣布推出 React Native 開源框架。
- 2015 年初，騰訊微信推出了 JS SDK。
- 2015 年中，阿里巴巴公司的 Judy Zhu 入選 W3C Advisory Board，這是中國人在 W3C 組織中話語權最高的位置。
- 2015 年中，HTML5 中國產業聯盟舉行擴大會議，引入十幾家會員單位
- 2015 年中，Firefox 副總宮力離職創業 H5OS 并獲得巨額融資。
- 騰訊 QQ 玩吧成為重要的 HTML5 手機游戲平臺。
- 360 手機助手與 DCloud 合作推出流應用，開啟 HTML5 替代原生的序幕。 </ul>
- HTML5 的性能不行，不如原生；
- HTML5 的 api 不夠，很多功能實現不了；
- HTML5 沒法離線運行，斷網就不能用了，即使有離線緩存，三方軟件清理垃圾后也不能用了；
- HTML5 只能在瀏覽器里用，沒法直接在桌面啟動；
- 通過 HTML5 強化引擎（如 PhoneGap/Cordova）開發跨平臺 App，那是小公司為了省錢做的事，大公司還是要用原生。 </ol>
- 跨平臺
- 快速迭代
- 開源生態發達
- 更容易推廣
- 天生開放非孤島，可方便互聯 </ol>
- 分享直通車：如果你的朋友在朋友圈里分享了一個好吃的飯館，你點擊后立即秒開流應用并自動進入該飯館，繼續點外賣、或團券，這是多么方便的體驗！這個看似未來的東西已經實現。在 360 手機助手里搜索“大眾點評外賣”，在里面分享一個飯館，就是這個效果。
- 掃碼直通車：公交站牌或電梯廣告經常有電商特價購物，如果此時放一個掃碼購，用戶掃描后只需幾百k流量秒開了流應用，并且直接進入特價購物界面買單。
- 廣告直通車：我們經常在應用市場看到廣告 banner 圖，顯示某知名電影票特價 10 元一張，點擊該廣告圖后提示下載某電影票購票 App。大多數用戶會在這里折損掉。而廣告直通車，則可以點擊廣告圖后，直接秒開流應用并進入到這個電影的購票界面。 </ul>
- 省時間：獲取流應用是秒開，邊用邊下；
- 省流量：流應用的體積一般都是幾百K，比原生 App 小 10 倍，而更新包體積都是幾k，沒有門檻的輕易獲取新服務，也不會看到那么多更新角標頭疼；
- 省空間：手機有空間，不如拍照片。把 iphone6 換成 6s 的唯一原因是你之前的 iphone6 是 16g 的（有沒有戳中你？）；
- 省電、不卡：如果 Android 手機裝上 100 個傳統原生應用，那這手機基本就廢了，會變的很卡很費電。而流應用，裝上 1000 個也不會讓手機變卡變費電；
- 場景串聯： </ol>
- HTML5 的 5 個缺點被解決了；
- HTML5 對開發商有 5 個原生比不了的優勢；
- HTML5 對用戶有 5 個原生比不了的優勢。 </ul>
- 視頻 1 應用市場秒開流應用：http://v.qq.com/boke/gplay/c17d8789e7dd8a208cd6e6189ae90664_nst000001qufah3_i0171dyo7cf.html
- 視頻 2 快碼，掃描立即秒裝 app：http://v.qq.com/boke/gplay/c17d8789e7dd8a208cd6e6189ae90664_nst000001qufah3_w0171ems73j.html
- 視頻 3 分享，通過社交網絡快速傳播 App：http://v.qq.com/boke/gplay/c17d8789e7dd8a208cd6e6189ae90664_nst000001qufah3_r0171bswy6f.html
- 視頻 4 流應用不是 Web 網頁，斷網時照樣使用：http://v.qq.com/boke/gplay/c17d8789e7dd8a208cd6e6189ae90664_nst000001qufah3_k0171y6vfyu.html </ul>
從整體來看，2015 年是各個巨頭進軍 HTML5 領域的探索年，不同的公司通過不同的方式在探索 HTML5 如何為其所用，在推進、驗證、糾錯、繼續推進中不停迭代，并出現了一些非常亮眼的突破。
非死book 回歸并發布 React Native，并非擁抱 HTML5
扎克伯格在 2013 年放棄 HTML5 的聲明是 HTML5 歷史上黑暗的一幕。2015 年，非死book 終于回來了。不過這種回歸略微尷尬的是：React Native 并非擁抱 HTML5，而是準備干掉 HTML5。React Native 雖然仍然是 JS，但并不兼容 HTML5。通過 非死book 的自定義語法，React Native 實現了更高效率的渲染引擎，提升了性能表現。
React Native 從年初召開發布會，然后發布 iOS 版，直到 9 月份 Android 版推出，中間也是在不停試水。
非死book 基于動態語言構建生態鏈的動力是十足的，作為全球最大的社交基礎平臺，非死book 的 Web 版本上活躍著廣泛的三方應用，但手機上這套體系搬過不來。
非死book 自己的 App 是原生開發的，但三方應用如果也使用原生開發，是無法成為 非死book 移動生態的一部分的。而基于 HTML5 的三方應用，在手機上的表現實在不佳，嚴重打擊用戶在手機上使用、購買這些三方應用的熱情。而 非死book 極大的盈利來源恰恰是從三方應用的收入中獲取分成。
雖然基于動態語言構建生態系統的動力十足，但 非死book 為何要另起爐灶呢？
當初 非死book 放棄 HTML5，就是因為 HTML5 的渲染效率在手機上達不到流暢標準，非死book 認為罪魁禍首是 DOM 和 CSS3。而 React Native 的原則就是 No DOM，使用了完全不同的繪制引擎。
當初 CSS3 被設計的超級復雜，很大程度上是為了替代 Flash 在 HTML4 年代酷炫的交互效果。在 PC 上硬件資源沒問題，CSS3 雖然復雜也能跑得流暢。但手機不同于 PC，DOM 和 CSS 重繪在低端機上并不流暢。
但無論如何，自建標準是比較難的事情，如果僅在 非死book 生態里自然沒別人管，但如果做大了就又會像 Flash 一樣遭遇巨頭聯合絞殺。但是 React Native 確實在倒逼瀏覽器引擎開發商反思渲染引擎應該如何優化。
騰訊在微信和 QQ 兩大生態中，運用不同思路探索 HTML5
騰訊也是社交巨頭，和 非死book 有類似的需求，圍繞著騰訊巨大的用戶群，有眾多三方應用在這里掘金。不過騰訊有微信和 QQ 兩套生態，這兩個生態做 HTML5 的思路還并不相同。對微信而言，公眾號就是它的生態，為了增強公眾號的能力，微信推出了 JS SDK，它本質上是一種輕應用，強化了 JS 的能力，補充了十幾類常用的 API。公眾號是以服務內容和應用為主的，JS SDK 的強化基本沒有考慮 HTML5 游戲的需求。
雖然微信強化了 JS SDK，但公眾號的性能和體驗還是讓用戶不太爽的，切換頁面的長時間等待、Back 錯亂等很多問題讓人煩躁。從這個角度看，還是落后 非死book 一籌。
另一方面，如何推進開發商使用 JS SDK 也是一件撓頭的事情。本來滴滴出行內嵌在微信里的版本是可以通過微信 JS SDK 來展現地圖和語音輸入的，但滴滴并沒有強化微信內嵌版的體驗。這里就暴露了微信的另一個問題：當一個 App 廠商自己也是巨頭或者想成為巨頭時，它必然不會依賴和強化微信里的入口，它會希望主推自己的獨立入口。
回想張小龍做微信公眾號的理念“再小的個體也有自己的品牌”和“消除中介”，這一切也是順理成章。
與微信不同，QQ 是另一套思路，QQ 用戶低齡化，愛玩游戲，通過 HTML5 游戲變現是 QQ 空間這個產品更關注的事情，于是騰訊在 QQ 空間 App 里推出了玩吧欄目，專門匯聚 HTML5 游戲，給這些游戲導流量，然后獲取分成收益。目前玩吧匯聚了各種主流 HTML5 游戲，包括普通 HTML5 游戲和使用 Cocos2d-HTML5、Egret 等引擎的游戲。
2015 年有不少渠道在探索 HTML5 游戲，包括瀏覽器和一些超級 App，甚至包括滴滴出行也開設了游戲中心。但就目前的情況，大多數渠道都沒有亮眼成績。玩吧在眾多渠道的勝出反映一個現狀：HTML5 游戲目前比較適合基于社交屬性的輕度游戲。
業內還有一些開發商嘗試把 HTML5 游戲引入到互動營銷、客戶服務以及多屏互動領域，這些有意義的探索或許在未來能給消費者和商家帶來新的體驗。
將 HTML5 應用于應用市場，360 等企業尋求新突破點
應用市場對待 HTML5 與社交平臺不同。應用市場不存在通過社交用戶建立開放平臺并變現的需求，應用市場是比較自由和單純的發行渠道。
但原生應用的發行是一個很簡單的工作，無法差異化的，各家就是拼自己的資源和流量占入口。于是應用市場也在尋找自己的突破點。360 手機助手在 2015 年初上線了生活助手欄目，匯總了各種 O2O 廠商的服務，但不是讓用戶下載這些 O2O 廠商的原生 App，而是直接打開 HTML5 網頁。年中 360 還宣布對 HTML5 服務免流量，目前 360 生活助手里訪問這些 O2O 廠商的 HTML5 App 可以不花通信流量費，費用由 360 買單。
O2O 服務的集成發行其他巨頭也很重視，百度在宣布 200 億砸向 O2O 后，手機百度及各條產品都很注重 O2O 廠商的 HTML5 服務引入；小米也推出了小米生活，華為也在做華為生活，也都是類似思路。于是今年 O2O 廠商們有一個忙碌的工作就是把 HTML5 頁面集成到各家渠道。由 App 分發升級為服務分發，這是應用市場自己的動力，但用戶使用習慣的養成還需要時間。
OS 國產化，從 HTML5 入手
2015 年中，HTML5 中國產業聯盟舉行擴大會議。這個聯盟其實 2013 年就成立了，無奈當時整個產業太冷。隨著基礎環境的變化，越來越多的公司開始重視 HTML5，并加入 HTML5 中國產業聯盟一起推動產業發展。目前聯盟的會員們已經形成從開發、測試、發行、培訓、外包、融資、媒介宣傳的一條龍 HTML5 產業服務能力。這也讓中國的 HTML5 開發者有更強的信心和更方便的服務。
2015 年中，Firefox 副總裁、Firefox OS 的核心人物宮力博士，宣布辭職創業做 H5OS，并獲得紫光國際 1 億美金的巨額投資。這筆巨款著實令人吃驚，且不說上半年瘋狂股市是否引發泡沫，但 H5OS 指向的是紫光國際看好的中國政府國產化 OS 市場。自從斯諾登事件后，中國政府就反復強調國產化。在政府信息化領域圍繞著很多 IT 公司，都試圖從中尋找到新機會。
關于 OS 的國產化，有些人從 Linux 入手，另有一些人，從 HTML5 入手。鑒于 Google 和中國政府的關系，Chrome OS 是沒人敢碰的，于是不少人在接觸 Firefox OS，宮力博士的創業也在情理之中。
此外，華為也推出了國產安全手機，從芯片到系統都是國產的。
但手機上的 OS 比 PC 上的 OS 難做。做一個操作系統本就很難，操作系統出來后要建生態更難。PC 上大多數業務本就是基于 Web 的，但手機上目前大多數優質 App 都是 Native 的，缺少優質的應用是目前所有做手機 HTML5 OS 的尷尬。如果希望在 HTML5 的 OS 上有足夠好的體驗，必然涉及擴展 HTML5，但如果各家定義自己的擴展規范，讓開發者為每家單獨開發，這個事基本就無法推動了。產業各方合力，把擴展標準統一，才可能有機會。
流應用，HTML5 產業又一大亮點
2015 年在 HTML5 產業里最大的亮點是 360 和 DCloud 公司推出的流應用，它對于 HTML5 缺陷的彌補和優勢的發揮，可以說做得淋漓盡致。
在 360 手機助手里搜索“大眾點評外賣”，看到的按鈕不是“下載”，而是“秒開”。
流應用？這是輕應用換個概念炒冷飯嗎？
當然不是，點擊秒開后并不是在線打開一個網頁，仍然是安裝一個客戶端 App，仍然如原生 App 般強大和流暢。只不過這個客戶端 App 是 JS 代碼，并像流媒體一樣流式發行、邊用邊下，實現了 5 秒內完成客戶端 App 的下載、安裝、啟動。App 二次使用仍然在桌面點圖標啟動，應用使用體驗也與傳統原生 App 沒有區別。
一定要注意，對于用戶而言，使用 App 的功能體驗與之前的原生方式并沒有區別，但是獲取 App 卻秒開了。
讀者肯定會問，怎么實現的？
這個新概念包括的新技術有點多，本文不負責科普所有實現過程。大概講講 HTML5 為何能達到原生的功能和體驗。
流應用使用了一種強化的 JS 引擎（HTML5+），這種引擎能讓 JS 調用操作系統的 40 萬 API，并將之前 HTML5 體驗不佳的交互都改進為原生體驗。
不同于 React Native 的反 HTML5 方案，HTML5+ 采取的方案是強化 HTML5。
HTML5+ 兼容 HTML5，并擴充 40 萬原生 API。對于 DOM 和 CSS3 動畫效果不佳的部分場景，使用原生動畫補足，比如窗體切換、下拉刷新的動態交互效果，不采用 CSS3 動畫，而是通過 JS 調用了原生 view 動畫。
相比 React Native，強化 HTML5 的方案對開發商更友好，開發商只需把現有的 HTML5 版本做簡單強化改造即可，而不是重新寫一套 No DOM 的代碼。
HTML5 定稿后一年的業內大事基本整理完畢，接下來我想深入分析流應用這個里程碑產品會給產業帶來什么變化。
HTML5 出現這幾年，在 PC 上已經廣為應用，但在手機上，始終是備胎。
流應用的出現顛覆了大眾對 HTML5 的認知。以往提到 HTML5，大多數人都會認為 HTML5 有 5 個問題：
現在，這五個常規認知被終結了。
好吧，聽起來大家真的需要重新認識 HTML5 了。
基于強化引擎運行的 HTML5，功能、性能、離線運行、桌面啟動，均和原生一樣了（至少用戶感覺不到差別）。
以大眾點評外賣流應用為例，它的窗體切換 pop-in 動畫、流暢的下拉刷新，均是原生標準，還有一個流應用叫“36Kr 資訊”，還可以手機進入飛行模式后再次從桌面啟動該 App，一樣可以用而不會出現白屏或 404。
為了消除大家對 HTML5 的五個錯誤認知，特地錄了 36Kr 流應用的操作視頻，演示在飛行模式和手機清理垃圾后仍然可正常使用，讓大家眼見為實：http://v.qq.com/boke/gplay/c17d8789e7dd8a208cd6e6189ae90664_nst000001qufah3_k0171y6vfyu.html
</p>
當 HTML5 這五個問題被消除后，這個世界就變了，但還變的不夠，因為其實 HTML5 還有很多強于原生的地方可以發掘。
我在去年 HTML5 定稿時寫的文章提到 HTML5 有 5 個原生也比不了的優勢：
這五個技術優勢，都如何應用呢？
HTML5 的跨平臺，不是常規意義上的跨 Android 和 iOS 平臺。對于很多應用開發商而言，原來至少有 3 撥團隊，分別負責 Android、iOS、微信公眾號的開發。
能不能一套代碼，跨多個平臺，且在各個平臺都有最佳體驗呢？
答案是可以的。挑食火鍋是一個 O2O 創業公司，他們只有一套 HTML5 代碼，通過 MUI 框架和條件編譯技術，編譯出了六個平臺的版本，iOS 的 ipa 包、Android 的 apk 包、HTML5 瀏覽器版、微信公眾號版、百度直達號版，以及流應用版。
對于缺錢少人的創業公司，這是極具誘惑力的解決方案。
可能有人覺得，對于不差錢的大公司而言，HTML5 的跨平臺優勢不夠明顯。那么往下看。
任何大 App 廠商，都在追求快速迭代、熱更新、A/B測試，在這些領域，使用 HTML5 都比原生要方便的多。
這益處仍不夠多？再看 HTML5 的第四個優勢：更容易推廣。
用戶獲取應用，一般通過應用商店或掃碼下載。
應用商店里點下載原生 App，從下載到 App 真正啟動，折損 50%，也就是 100 次下載只有 50 個 App 啟動激活。
而二維碼掃描，折損高達 90%！很少有人在沒 WIFI 的時候下載十幾M的原生包。
這些不合理，以往似乎被人忽視了，但這些不合理終將被解決。
不管是 50% 還是 90% 的折損，通過流應用都可以避免。
除了降低折損，流應用還有一個推廣方面的特點，就是可以充分利用社交網絡推廣。
用戶分享一個流應用，就像分享一個消息，可以進朋友圈，也可以短信、微博分享。別人點擊就可以獲得這個流應用。
在原生應用體系里，這是不可想象的。以前我們怎么分享 App？我說：Hi，這個 App 不錯，推薦給你；你說：OK，回頭有 WIFI 時我去應用商店下一個。這種土鱉場景想想就夠了，未來終于可以美好一些了。
然后再看 HTML5 的第五個優勢：天生開放非孤島，可方便互聯。
這會帶來什么場景變化？
有 3 個很好玩的應用模式：廣告直通車、掃碼直通車、分享直通車，這給 App 打開了一個通過內容帶動應用發行的新途徑。
內容拉動發行，這扇窗打開，相信很多有創意的運營人員，可以玩出各種花樣來吸引用戶。
剛才說了 HTML5 對開發者而言，有 5 個原生也比不了的優勢。但對于最終用戶而言，HTML5 是一個陌生的技術名詞，開發商跨平臺開發了，成本下降了，可最終用戶沒有直觀感受。他們如何感受 HTML5 的好處？
流應用給普通手機用戶帶來了 5 個好處：
出差訂了機票后，就可以去航空公司 App 值機，然后去打車 App 里訂去機場的出租車，然后去天氣 App 里看當地天氣……你不需要反復切回主屏啟動不同的 App，并輸入明明上一個 App 里已經記錄的查詢條件。
之所以說流應用是 HTML5 產業的里程碑事件，是因為從此后我們可以重新審視 HTML5 vs Native 之爭：
我們先不爭論原生是否會消失，但在 2015 年，HTML5 產業確實取得了突破性進展。
我們不再是只能干巴巴的說：“手機硬件、網絡都在提升，HTML5 是趨勢”這種年年都在說的“真理”了。
一些產品真正解決了 HTML5 的缺陷，并利用 HTML5 的優勢讓開發商和用戶，實打實的感受到了 HTML5 給他們的帶來的價值。
眾多從業公司，眾多產品和思路，誰能最終勝出仍然未知。但看著未來越來越近是令人欣喜的，并且更欣喜的是中國公司在這場變革中引領了很多創新。
HTML5 的崛起，可能會讓一些原生開發工程師不安，歡迎大家一起理性討論，但求不要未經思考或驗證的亂噴。我個人也是程序員出身，會多種編程語言，我總覺得一個開發者需要經常適應語言大戰的變遷。我的微博，weibo.com/wangan2000。
再次歡迎大家體驗流應用
在 360 手機助手里搜索“大眾點評外賣”、“36kr 資訊”。沒有體驗條件的可看如下視頻：
作者簡介：王安，DCloud CEO，HTML5 產業專家，W3C 會員。