首页 > 网页教程 > HTML > HTML 5定稿一周年!你必须要重新认识下HTML5了

HTML 5定稿一周年!你必须要重新认识下HTML5了

时间:2015-11-25    来源:CSDN

HTML5教程 HTML5语法规则 HTML5开发工具 html5APP开发

去年此时,W3C定稿了HTML5。我曾发表一篇文章《HTML 5终于定稿,为什么原生App世界将被颠覆》,这文章转载量很大,它阐述了HTML5的来龙去脉,分析了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版推出,中间也是在不停试水。

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-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语法规则 HTML5开发工具 html5APP开发

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

当然不是,点击秒开后并不是在线打开一个网页,仍然是安装一个客户端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,那是小公司为了省钱做的事,大公司还是要用原生。

现在,这五个常规认知被终结了。

相关推荐
能让IE支持HTML5的解决方案
谷歌弃Gears浏览器插件 转重点开发HTML5
采用HTML5搭建的多个网站尝鲜试用
体验HTML5 Canvas对象的强大 五款在线绘图应用示例
HTML5新特性:用链接预取功能给网站提速
如何用HTML5制作网页?
神奇的HTML5动画效果演示网站
网页设计师必收藏的十五个HTML5资源
十三个网站案例让你提前体验HTML5和CSS3的魅力
基于HTML5的绘图程序Muro,支持Wacom手写绘图板
HTML5的一些的趣味小应用
HTML5、CSS和JavaScript与Web移动应用的未来趋势
十款基于HTML5开发的精彩WEB应用(HTML5网站演示)
学好HTML5必备的七个在线资源推荐
HTML5教程之表单功能详解
四个HTML 5标签、属性、事件及浏览器兼容性速查表分享
15个采用HTML5实现的网站界面设计欣赏
HTML5的革新:语义更明确简洁的结构
21款效果惊艳基于HTML5的应用程序欣赏
16个颇具创意的HTML5网站设计
能让IE浏览器也支持HTML5标准的办法
25个超炫的HTML5+CSS3网页应用案例欣赏
2012年Web开发有关HTML5的14个预测
新手入门:HTML5是什么?
35个WEB开发必备的实用HTML5教程
18个国外HTML5网站布局编码教程分享
10款HTML5框架推荐,WEB开发必备利器
8款很酷基于HTML5技术的网站设计欣赏
详解有关于HTML5的七个误解
10个超炫酷的HTML5和JS技术实验性演示网站
8个优秀的基于HTML5的信息图网站欣赏
网页使用HTML5代码需兼容IE的写法分享
HTML5新手入门教程之第一篇:什么是HTML5?
从9个不同的方面深入分析HTML5的性能
Google推荐:HTML5代码的15条规范
HTML5能否成为未来移动互联网的APP?

精彩推荐

热门教程