HTML5定稿一周年，你必须要重新认识HTML5了

jopen 9年前

去年此时，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 替代原生的序幕。

从整体来看，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 手机助手里搜索“大众点评外卖”，看到的按钮不是“下载”，而是“秒开”。

HTML5定稿一周年，你必须要重新认识HTML5了
 

流应用？这是轻应用换个概念炒冷饭吗？

当然不是，点击秒开后并不是在线打开一个网页，仍然是安装一个客户端 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 个问题：

  1. HTML5 的性能不行，不如原生；
  2. HTML5 的 api 不够，很多功能实现不了；
  3. HTML5 没法离线运行，断网就不能用了，即使有离线缓存，三方软件清理垃圾后也不能用了；
  4. HTML5 只能在浏览器里用，没法直接在桌面启动；
  5. 通过 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 个原生也比不了的优势：

  1. 跨平台
  2. 快速迭代
  3. 开源生态发达
  4. 更容易推广
  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 个好处：

  1. 省时间：获取流应用是秒开，边用边下；
  2. 省流量：流应用的体积一般都是几百K，比原生 App 小 10 倍，而更新包体积都是几k，没有门槛的轻易获取新服务，也不会看到那么多更新角标头疼；
  3. 省空间：手机有空间，不如拍照片。把 iphone6 换成 6s 的唯一原因是你之前的 iphone6 是 16g 的（有没有戳中你？）；
  4. 省电、不卡：如果 Android 手机装上 100 个传统原生应用，那这手机基本就废了，会变的很卡很费电。而流应用，装上 1000 个也不会让手机变卡变费电；
  5. 场景串联：

出差订了机票后，就可以去航空公司 App 值机，然后去打车 App 里订去机场的出租车，然后去天气 App 里看当地天气……你不需要反复切回主屏启动不同的 App，并输入明明上一个 App 里已经记录的查询条件。

之所以说流应用是 HTML5 产业的里程碑事件，是因为从此后我们可以重新审视 HTML5 vs Native 之争：

  • HTML5 的 5 个缺点被解决了；
  • HTML5 对开发商有 5 个原生比不了的优势；
  • HTML5 对用户有 5 个原生比不了的优势。

我们先不争论原生是否会消失，但在 2015 年，HTML5 产业确实取得了突破性进展。

我们不再是只能干巴巴的说：“手机硬件、网络都在提升，HTML5 是趋势”这种年年都在说的“真理”了。

一些产品真正解决了 HTML5 的缺陷，并利用 HTML5 的优势让开发商和用户，实打实的感受到了 HTML5 给他们的带来的价值。

众多从业公司，众多产品和思路，谁能最终胜出仍然未知。但看着未来越来越近是令人欣喜的，并且更欣喜的是中国公司在这场变革中引领了很多创新。

HTML5 的崛起，可能会让一些原生开发工程师不安，欢迎大家一起理性讨论，但求不要未经思考或验证的乱喷。我个人也是程序员出身，会多种编程语言，我总觉得一个开发者需要经常适应语言大战的变迁。我的微博，weibo.com/wangan2000。

再次欢迎大家体验流应用

在 360 手机助手里搜索“大众点评外卖”、“36kr 资讯”。没有体验条件的可看如下视频：

作者简介：王安，DCloud CEO，HTML5 产业专家，W3C 会员。

来自: DCloud