HTML5定稿一週年，你必需要從新認識HTML5了

時間 2019-11-13

標籤 html5 html 定稿一週 1周必需從新認識欄目 HTML5 简体版

原文原文鏈接

去年此時，W3C定稿了HTML5。我曾發表一篇文章《HTML 5終於定稿，爲何原生App世界將被顛覆》，這文章轉載量很大，它闡述了HTML5的前因後果，分析了HTML5的優劣勢並對將來發展作了一些預測。html

時隔一年，咱們看看HTML5產業都發生了什麼，那些基於理論的預測，哪些被實踐了，結果又如何？html5

2015年初，Facebook宣佈推出React Native開源框架。
2015年初，騰訊微信推出了JS SDK。
2015年中，阿里巴巴公司的Judy Zhu入選W3C Advisory Board，這是中國人在W3C組織中話語權最高的位置。
2015年中，HTML5中國產業聯盟舉行擴大會議，引入十幾家會員單位
2015年中，Firefox副總宮力離職創業H5OS並得到鉅額融資。
騰訊QQ玩吧成爲重要的HTML5手機遊戲平臺。
360手機助手與DCloud合做推出流應用，開啓HTML5替代原生的序幕。

從總體來看，2015年是各個巨頭進軍HTML5領域的探索年，不一樣的公司經過不一樣的方式在探索HTML5如何爲其所用，在推動、驗證、糾錯、繼續推動中不停迭代，並出現了一些很是亮眼的突破。程序員

Facebook迴歸併發布React Native，並不是擁抱HTML5

扎克伯格在2013年放棄HTML5的聲明是HTML5歷史上黑暗的一幕。2015年，Facebook終於回來了。不過這種迴歸略微尷尬的是：React Native並不是擁抱HTML5，而是準備幹掉HTML5。React Native雖然仍然是JS，但並不兼容HTML5。經過Facebook的自定義語法，React Native實現了更高效率的渲染引擎，提高了性能表現。編程

React Native從年初召開發佈會，而後發佈iOS版，直到9月份Android版推出，中間也是在不停試水。api

Facebook基於動態語言構建生態鏈的動力是十足的，做爲全球最大的社交基礎平臺，Facebook的Web版本上活躍着普遍的三方應用，但手機上這套體系搬過不來。瀏覽器

Facebook本身的App是原生開發的，但三方應用若是也使用原生開發，是沒法成爲Facebook移動生態的一部分的。而基於HTML5的三方應用，在手機上的表現實在不佳，嚴重打擊用戶在手機上使用、購買這些三方應用的熱情。而Facebook極大的盈利來源偏偏是從三方應用的收入中獲取分紅。緩存

雖然基於動態語言構建生態系統的動力十足，但Facebook爲什麼要另起爐竈呢？安全

當初Facebook放棄HTML5，就是由於HTML5的渲染效率在手機上達不到流暢標準，Facebook認爲罪魁禍首是DOM和CSS3。而React Native的原則就是No DOM，使用了徹底不一樣的繪製引擎。微信

當初CSS3被設計的超級複雜，很大程度上是爲了替代Flash在HTML4年代酷炫的交互效果。在PC上硬件資源沒問題，CSS3雖然複雜也能跑得流暢。但手機不一樣於PC，DOM和CSS重繪在低端機上並不流暢。網絡

但不管如何，自建標準是比較難的事情，若是僅在Facebook生態裏天然沒別人管，但若是作大了就又會像Flash同樣遭遇巨頭聯合絞殺。可是React Native確實在倒逼瀏覽器引擎開發商反思渲染引擎應該如何優化。

騰訊在微信和QQ兩大生態中，運用不一樣思路探索HTML5

騰訊也是社交巨頭，和Facebook有相似的需求，圍繞着騰訊巨大的用戶羣，有衆多三方應用在這裏掘金。不過騰訊有微信和QQ兩套生態，這兩個生態作HTML5的思路還並不相同。對微信而言，公衆號就是它的生態，爲了加強公衆號的能力，微信推出了JS SDK，它本質上是一種輕應用，強化了JS的能力，補充了十幾類經常使用的API。公衆號是以服務內容和應用爲主的，JS SDK的強化基本沒有考慮HTML5遊戲的需求。

雖然微信強化了JS SDK，但公衆號的性能和體驗仍是讓用戶不太爽的，切換頁面的長時間等待、Back錯亂等不少問題讓人煩躁。從這個角度看，仍是落後Facebook一籌。

另外一方面，如何推動開發商使用JS SDK也是一件撓頭的事情。原本滴滴出行內嵌在微信裏的版本是能夠經過微信JS SDK來展示地圖和語音輸入的，但滴滴並無強化微信內嵌版的體驗。這裏就暴露了微信的另外一個問題：當一個App廠商本身也是巨頭或者想成爲巨頭時，它必然不會依賴和強化微信裏的入口，它會但願主推本身的獨立入口。

回想張小龍作微信公衆號的理念「再小的個體也有本身的品牌」和「消除中介」，這一切也是瓜熟蒂落。

與微信不一樣，QQ是另外一套思路，QQ用戶低齡化，愛玩遊戲，經過HTML5遊戲變現是QQ空間這個產品更關注的事情，因而騰訊在QQ空間App裏推出了玩吧欄目，專門匯聚HTML5遊戲，給這些遊戲導流量，而後獲取分紅收益。目前玩吧匯聚了各類主流HTML5遊戲，包括普通HTML5遊戲和使用Cocos2d-HTML五、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的api不夠，不少功能實現不了；
HTML5無法離線運行，斷網就不能用了，即便有離線緩存，三方軟件清理垃圾後也不能用了；
HTML5只能在瀏覽器裏用，無法直接在桌面啓動；
經過HTML5強化引擎（如PhoneGap/Cordova）開發跨平臺App，那是小公司爲了省錢作的事，大公司仍是要用原生。

如今，這五個常規認知被終結了。

好吧，聽起來你們真的須要從新認識HTML5了。

基於強化引擎運行的HTML5，功能、性能、離線運行、桌面啓動，均和原生同樣了（至少用戶感受不到差異）。

以大衆點評外賣流應用爲例，它的窗體切換pop-in動畫、流暢的下拉刷新，均是原生標準，還有一個流應用叫「36Kr資訊」，還能夠手機進入飛行模式後再次從桌面啓動該App，同樣能夠用而不會出現白屏或404。

爲了消除你們對HTML5的五個錯誤認知，特意錄了36Kr流應用的操做視頻，演示在飛行模式和手機清理垃圾後仍然可正常使用，讓你們眼見爲實：http://v.qq.com/boke/gplay/c17d8789e7dd8a208cd6e6189ae90664_nst000001qufah3_k0171y6vfyu.html

當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打開了一個經過內容帶動應用發行的新途徑。

分享直通車：若是你的朋友在朋友圈裏分享了一個好吃的飯館，你點擊後當即秒開流應用並自動進入該飯館，繼續點外賣、或團券，這是多麼方便的體驗！這個看似將來的東西已經實現。在360手機助手裏搜索「大衆點評外賣」，在裏面分享一個飯館，就是這個效果。
掃碼直通車：公交站牌或電梯廣告常常有電商特價購物，若是此時放一個掃碼購，用戶掃描後只需幾百k流量秒開了流應用，而且直接進入特價購物界面買單。
廣告直通車：咱們常常在應用市場看到廣告banner圖，顯示某知名電影票特價10元一張，點擊該廣告圖後提示下載某電影票購票App。大多數用戶會在這裏折損掉。而廣告直通車，則能夠點擊廣告圖後，直接秒開流應用並進入到這個電影的購票界面。

內容拉動發行，這扇窗打開，相信不少有創意的運營人員，能夠玩出各類花樣來吸引用戶。

剛纔說了HTML5對開發者而言，有5個原生也比不了的優點。但對於最終用戶而言，HTML5是一個陌生的技術名詞，開發商跨平臺開發了，成本降低了，可最終用戶沒有直觀感覺。他們如何感覺HTML5的好處？

流應用給普通手機用戶帶來了5個好處：