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个好处：