永利注册 6

Facebook 引发的 HTML5 危机

Facebook 引发的 HTML5 危机

2012/09/01 · HTML5 · 来源:
@AppCan 刘鑫     ·
HTML5

作者:AppCan 刘鑫

近期几个新闻堆叠在一起,颇有韵味。先是 WHATWG 和 W3C 在 HTML5
标准上分道扬镳,继而“永利注册,Facebook
移动应用宣布放弃 HTML5 的部分,改为纯 Native
方式开发”,接着又传闻苹果 AppStore
肃杀基于 Web 技术的
App。这几个事件对移动互联网行业来说个个都是重磅炸弹,押注 HTML5
的受到不小的打击,唱衰 HTML5
发展的借此幸灾乐祸。HTML5真的只是一场政治斗争吗?到底 Facebook
为什么放弃 HTML5?现阶段 HTML5 到底出了什么问题?

Facebook 放弃 HTML5 主因:慢

“对于 Facebook 的 iOS
原生应用来说,它主要在三个方面有很大的速度提升:应用启动、共享新闻滚动还有图片点击查看。其总体速度大约提升了一倍。这个版本部分采用了
Facebook Camera 和 Facebook Messenger
两款应用的代码库:其中图片点击查看功能的代码是从 Facebook Camera
移植过来,而屏幕消息是从 Facebook Messenger
那克隆过来的。这个原生版本是由一个独立的团队开发,产品经理 Johnson
表示未来会充分利用公司的代码共享,也会适当向其他团队寻求帮助。”

上述摘自 Facebook 的官方博客。博客中介绍到 Facebook 的 iOS 原生应用放弃
HTML5
后速度得到大幅度提升。大家不禁好奇,为什么
HTML5 会比原生 NativeApp 要“慢”很多?

在当前的移动终端设备硬件配置和操作系统优化水平的前提下,大部分基于 HTML5
开发的 Web
页面会出现延时加载展示的现象,也就是俗称的卡、慢。特别是在不同的视图界面(view)切换之间,这种卡和不流畅的现象会尤为严重。而
Native 应用不会出现这种情况。究其根源,在于浏览器解析的运作机制和原生
Native 的界面展示机制差异上。如下图所示:

 永利注册 1

红色框起来的部分是原生 NativeApp 的界面展示机制,简单的看起来就是 1
个步骤 ——
展示,因为所有的绘图和渲染工作都由系统直接完成。而红框以外的部分包括红框内的部分是
webkit 核心的浏览器解析页面的流程。相比 Native 的 1 个步骤,webkit
的解析过程可谓漫长而艰辛。历经解析、建立 Dom
树、获取对应资源、布局、建立渲染树、绘图到展示。所以不管移动终端设备硬件如何发展,这个差异是始终存在的,最多只是随着硬件的提升和软件的优化将这个差异收缩到最小甚至忽略。

更糟糕的是。Facebook 之前的 iOS 混合了 HTML5 的移动应用,使用 HTML5
绘图的页面在 HTML5 开发上也毫无技巧可言,基本沿用了主流前端开发框架
jQuery mobile 等的单 View 多 div
的机制。也就是在一个网页内绘制多个视图,页面之间的切换其实只是一个页面内不同区块的切换。这种方式加大了浏览器的渲染和绘制工作强度。并且在数据加载和流量上产生很大的负面影响。如果切换到新页面,之前的页面不进行销毁,则会加大运算量和增加内存占有,而如果销毁又会导致已经下载的数据失效,要重新载入,浪费流量。类似情况在中国的网络和设备情况下会尤为突出。所以
Facebook 不当的在 Native App 内混搭 HTML5 也难免引来用户怨言。

还有,一如报道中提到的,Facebook
这次的改进提升主要是“新闻滚动和图片点击”。如果了解 HTML5
的人,就会发现,这两点当然是“不应该在现阶段使用 HTML5
实现的”。为什么?笔者作为一个基于 HTML5 技术的 Hybrid App
系统的设计者,设计秉承的一个原则就是“凡是需要’动’的部分和需要大量运算的部分,就最好使用原生弥补,而不是一定要使用
HTML5 来实现”。新闻滚动,这种不停通过改变 Dom
树近而改变渲染再绘图展示的使用场景相比原生 Native
弱势是非常明显的。至于图片的部分就更不用多说了,这并不是 HTML5
眼下擅长的部分。HTML5
现在擅长的部分是数据量不大的页面、动画少的页面,特别是跨平台的开发。充分利用好
HTML5 的优势,尽量降低 HTML5 的弱势,学会用好
HTML5,才是现在这个时期使用 HTML5 开发的重点。可以说开发技巧很重要。

现阶段 HTML5 的问题:政治斗争

永利注册 2

“原生版本是一个独立团队开发的。”Facebook
公开的这一点也耐人寻味。原来客户端是 Native 与 HTML5
混合的方式,原来的团队也肯定有原生的开发能力,为什么非要一个独立团队重新耗费
6 个月进行重新开发?或许这里不能排除公司内政治因素,而 HTML5
成为一个牺牲品。HTML5
的政治不仅是一个公司内的,更是整个行业的。7月份,同为 HTML5 制定者的
WHATWG 和 W3C
表示无法继续合作,前者希望制定一个能够跟随市场或技术动态的标准;后者则要确立一个“死”的标准,一旦正式颁布再也无法修改。

WHATWG 和 W3C 的分道扬镳或许会成为 HTML5 发展的一个分水岭。WHATWG 背后有
Google、苹果,W3C
拉到了特立独行的巨无霸微软。标准是为利益服务的,曾经力推 HTML5
的苹果,现在也传闻在 AppStore 内打压基于 HTML5 开发的
App。那苹果到底是喜欢还是不喜欢
HTML5?喜欢也是真,讨厌也是真。过去乔布斯为了灭掉 Adobe 的 Flash,将
HTML5 当成冲锋枪,在移动端干掉了 Flash
之后,面对自己封闭生态系统的巨大利益和 HTML5
世界大同的愿景做出选择的时候,苹果当然毫无悬念的选择自己的利益。

《Web App
的挑战(三):入口之争》一文中,我有阐述自己的观点:入口之争”在现有移动操作系统设计架构下,浏览器很难和用户桌面争夺核心入口地位。苹果打造的
iOS 系统就是一个应用优先的系统,无论 HTML5 怎么发展,Web App
如何挣扎,浏览器如何砸钱,都抢不过用户桌面的入口地位。基于 HTML5 的 Web
App 的命运被苹果牢牢把控。Android 系统这个跟随 iOS
桌面入口理念的半山寨货也没有押注 Web App 而是将这个任务交给了 Chrome
OS。所以,不用炒概念,也不用谈未来,用 HTML5
开发原生应用,而不是仅仅套个外壳那么简单才是现阶段 HTML5
使用的重点和发展的重点。并且苹果封杀的也只是纯 HTML5 套壳的
App,对于使用混搭模式(包括 Facebook
之前的版本)的移动应用还是保持开放姿态,毕竟这种 HTML5
还是在苹果的生态系统内可控的运行着。

最后

Facebook 的 iOS 放弃
HTML5。幸灾乐祸也好,沮丧也罢。变的只是一个应用,HTML5
的势头和趋势不是一个企业可以逆转的。现阶段,真正的了解 HTML5,掌握 HTML5
的开发技巧和在恰当的地方用好 HTML5,才是把握机遇的重点。

 

 

 

赞 收藏
评论

永利注册 3

原文地址

本文内容

  • 一、HTML5 诞生
  • 二、HTML5 第一阶段: Web 增强与打破垄断
  • 三、HTML5 第二阶段: 移动互联网
  • 四、HTML5 这回真的来了
  • 五、颠覆原生 App
  • 六、还有什么会被改变?
  • 七、但是……
  • 参考资料

技术从来不会成为发展的绝对瓶颈,反而“商业”成了无法逾越的鸿沟,掺杂太多的投机成分,当然也有商业政治因素。

我们第一次谈论 HTML5 要改变世界大概是因为乔布斯,他坚持在 iOS 上不兼容
Flash(你会在乔布斯的传记找到为什么乔布斯那么恨 Adobe
永利注册 4),在 Adobe
统治多媒体开发的那个年代,这需要付出极大的勇气。多年过去,虽然所有人都在谈论
HTML5,但大部分人甚至都忘了它还是一个仍在完善中的体系。

2007 年 W3C(万维网联盟)立项 HTML5,直至 2014 年 10
月底,这个长达八年的规范终于定稿。接下来,HTML5 将真正开始颠覆原生 App
世界。虽然这种危言耸听已让人有点厌烦。但如果回顾 HTML
这些年走过的路,你就不会再怀疑它的能量。

一、HTML5 诞生


自 W3C 于 1999 年发布 HTML4 后,Web 世界快速发展,一片繁荣。人们一度认为
HTML 标准不需要再升级了。一些致力于发展 Web App 的公司另行成立了 WHATWG
组织。直到 2007 年,W3C 从 WHATWG 接手相关的工作,重新开始发展 HTML5。

HTML5 发展史,有用户和技术开发者的需求在推动,更有巨大的商业利益在推动。

互联网早期,对用户而言,能打开浏览器接入到互联网就是一件神奇的事,但互联网发展到
2005 年前后,开始出现了下一个变化,那就是宽带互联。

随着宽带普及和电脑性能增强,人们不再满足于单纯的通过互联网看新闻、收发邮件,而是消耗更多带宽的娱乐产品开始出现——流视频和网页游戏。其实,视频和游戏是古老的需求。在互联网不普及的时候,方式是离线传输的
VCD 和游戏光盘,后来互联网逐渐普及,人们开始通过下载软件 +
本地媒体播放器来看视频,以及下载体积较大的端游玩游戏。

但是,对用户体验更好的新方式又颠覆了之前的一切——流媒体和网页游戏。YouTube
等公司把握住潮流飞速崛起,各种页游公司也如雨后春笋。

HTML
标准没有把握住产业的变化及时演进,浏览器产品也未升级。这块新需求被浏览器插件满足了——Flash。这个部署在亿万浏览器里的商业插件俨然成为事实标准。2005
年,Adobe 巨资收购 Macromedia,把 Flash 收归旗下,这桩收购可以列为 IT
并购的经典案例,紧接着,大幅推广 FLV 流媒体和 action script 语言。FLV
流媒体和 Flash 游戏风靡互联网,Adobe 在新产业升级中攫取了大量利润。

除了 Flash 这个商业产品成为了事实标准,W3C
还面临一个尴尬,就是另一个私有扩展协议的制造者——IE。IE
当时在桌面浏览器占有垄断地位,并且扩展了大量的 IE Only
语法,开发者完全不知道这些语言是谁定义的。整个 Web 世界,被微软 +Adobe
这两家公司绑架了。

很多 IT 巨头坐不住了,尤其是苹果和 Google。PC
操作系统的世界难有突破,Web 浏览器被苹果寄予厚望;新贵 Google
虽然大量赞助 Mozilla,但并未对 IE 的地位产生实质影响,收购了 YouTube
后发现命脉在 Adobe 手里,非常难过,而且 Google 每年给 IE 的搜索框和
Adoble FLV 费用数目不小。

既然大家都是 W3C 的主席单位,好吧,我们重新开始做 HTML5 吧。是的,HTML5
其实就是这么诞生的。

二、HTML5 第一阶段: Web 增强与打破垄断


自 HTML5 诞生以来,共经历了两个阶段,分别是 Web
增强和移动互联网。我们先从 Web 增强说起。Web 体验的丰富增强主要表现在:

  • WebApp。HTML5新增了离线存储、更丰富的表单(比如 Input
    type=date)、js 线程、socket、标准扩展 embed、css3……;

  • 流媒体。HTML5新增了 Audio、Video;

  • 游戏。HTML5新增了 Canvas、WebGL。

当然,HTML5 还为搜索引擎的语义分析做了优化,比如新增 Header 和 Section
等标签,也在无障碍等领域做了不少工作,这些不多说。HTML5
在流媒体和游戏方面的努力,成功的遏制了 Flash 的发展,然后就该遏制 IE
私有语法了。

在 HTML5 标准的升级过程中,苹果和 Google
同时也看到了浏览器市场重新洗牌的机会,他们一方面参与 HTML5
的规范,一边在浏览器产品上发力。Apple 首先开始大力发展 Safari,建立
WebKit 开源项目,迁移 Safari 到 Windows 平台;Google 起初是赞助 Mozilla
开发 Firefox,后来自己开发了 v8 引擎,合并 WebKit,于 2008 年正式推出
Chrome。“IE 的私有规范 +Flash
不是标准,我们才是标准”这样的口号在新一代浏览器大战中打响,IE
瞬间成为千夫所指的垄断代表,甚至成了阻碍 Web 发展的罪人(当时 IE6
已数年未更新,并且丝毫不惧 Firefox 的发展)。

偏偏微软此时也出了晕招,推出了一系列即不完整支持规范又互相不兼容的
IE7、8、9、10,彻底失去了开发者的支持。

Adobe Flash 被遏制,与 Web 霸主的位子擦肩而过;IE
的私有标准被遏制,并且造成 IE 市场份额不停下滑,直到 IE
最新的移动版本反过来开始支持 WebKit 语法,真是令人唏嘘。不知道 HTML6
是不是该打倒 WebKit 垄断了。

三、HTML5 第二阶段: 移动互联网


随着 Chrome 和 Safari 的高歌猛进,以及 IE+Flash 的衰落,HTML5
告一段落,进入了下一个时代——移动互联网。HTML5
的跨平台优势在移动互联网时代被进一步凸显。HTML5 是唯一一个通吃
PC、Mac、iPhone、iPad、Android、Windows Phone
等主流平台的跨平台语言。Java 和 Flash 都曾梦想这个位置,但梦断于
iOS。此时人们纷纷开始研究基于 HTML5
开发跨平台手机应用。很多人当时认为,原生应用只是过渡,就像当年从 C/S
结构转变为 B/S 结构一样。而且学习 Objective-C 和 Java
很费劲,我既然会网页开发,为何不试试 HTML5。

W3C 此时成立了 Device API 工作组,为 HTML5 扩展了 Camera、GPS
等手机特有的 API,然而麻烦的是,移动互联网初期的迭代太快了,手机 OS
在不停的扩展硬件 API,陀螺仪、距离感应器、气压计……每年手机 OS
都有大版本更新。而 W3C
作为一个数百家会员单位共同决策的组织,从标准草案的提出到达成一致是非常复杂的过程,跟不上移动互联网初期的快速迭代。

PhoneGap 的出现,给开发者打开了一扇窗。很多人期待 PhoneGap 不停扩展
API,来补充浏览器的不足。Adobe 看到 PhoneGap
仿佛看到了重振江湖地位的希望,但在 Adobe 收购 PhoneGap
后,又发现这个东西问题很多,而且开源使得 Adobe 无法像 Flash
那样获取商业利益,于是就把 PhoneGap 捐给了 Apache,改名为 Cordova。

因为各种原因,Cordova
的定位最终没有成为浏览器的强化,而走向了混合式开发。基于当时的背景,他们认为原生是不可替代的,“原生
+HTML5”的混合模式更有意义。所以现在 Cordova 的使用往往是“原生工程师
+HTML5 工程师”一起协作完成 App。

这时 Facebook 加入了 W3C,牵头成立了 Mobile Web 工作组。Facebook 是混
Web 圈的,并且在手机 OS 上并无自己的领地,他不喜欢被苹果和 Google
掌控的原生应用生态系统。Mobile Web 这个工作组的重要目标就是让 HTML5
开发的网页应用达到原生应用的体验。然而,事与愿违,它不努力也就算了,结果是努力了却失败了。2012
年,Facebook 放弃了 HTML5 的新闻充斥了全世界的 IT 媒体,HTML5
瞬间被打入冷宫。

Facebook 为何放弃 HTML5?核心是,当时基于 HTML5 真的做不出好的移动
App。对比 Twritter 等竞争对手的原生 App,Facebook 的 HTML5
版本实在无法让用户满意。比如 Push 功能,到现在 HTML5
的推送和原生的推送体验差距依然巨大,更不用说 HTML5
应用的页面切换白屏、下拉刷新 /
侧滑菜单不流畅等众多问题。看着原生工程师轻松实现摇一摇、二维码、语音输入、分享到朋友圈等功能,更是让
HTML5 工程师感觉自己站错了队。

即使 Facebook 不喜欢被控制,也不能拿被用户抛弃来冒险。而且 Facebook
并没有掌握关键点——手机浏览器内核。如果浏览器不跟上,其他都是白搭。

而浏览器在手机上的表现是什么呢?先看 Google,Chrome 性能虽高,但 Android
上的浏览器却并非 Chrome,而是 WebKit 改出来的一个蹩脚的 Android
浏览器;再看苹果,iOS 上不允许其他浏览器引擎上架 App Store,而且其他使用
Safari 引擎的应用也无法调用苹果自己的 JavaScript 加速引擎
Nitro。结果是苹果和 Google 不但不在浏览器上积极实现 HTML5 关于移动 App
所需的规范,反而对 HTML5 做出种种限制。

不管是当时硬件能力不足,还是手机 OS
厂商的故意限制,总之,结果很明显:移动互联网初期,一定是原生应用生态系统的天下,iOS
和 Android 首先把自己变成老大后,其他小弟才能寻觅到成长的机会。

Facebook 也好,PhoneGap
也罢,想在移动互联网初期就分一杯羹是不可能的,但坚持下来,机会往往会出现。

四、HTML5 这回真的来了


HTML5 在这个时间定稿,不晚不早,硬件性能更强、手机 OS 迭代速度下降。随着
HTML5 标准定稿,一切纷争将告一段落,现在,属于 HTML5
的时代到来了。这个曾让人满怀希望,又被 Facebook
等众多满怀希望的开发者放弃的技术,现在会告诉大家,曾经让各位失望的原因,现在已经不存在了!这听起来有些惊人,大家不禁要问:是真的吗?让我们细细分析。

业内俗称 HTML5 有“性功能”障碍。即 HTML5
性能不如原生、开发工具不如原生、能力调用不如原生。

永利注册 5

这导致开发者无法使用 HTML5 做出与原生一样的
App。然而,不管是硬件升级,还是 OS
厂商策略变化,以及相关软件技术的成熟,已算解决了 HTML5 的“性工能”障碍。

  • 移动端硬件军备竞赛。2011年,iPhone 4s CPU是A5,现在 iPhone 6是
    A8,按苹果历次发布会的说法,速度共提升了 7.5
    倍。这3年间7.5倍的速度提升,抹平了太多 HTML5 性能问题;

  • 软件技术的成熟。PhoneGap的发展虽然放缓了,但其他产品技术却成熟了。2014
    年的 iWeb 大会上,众多厂商的产品提供了面向开发者免费或开源的 HTML5
    性工能障碍的解决方案;

  • 苹果、Google 策略变化。Google 在2013年底发布的Android 4.4,内置
    Webview 不再是蹩脚 Android WebKit 浏览器,而是 Chromium。2012 年
    iPhone 5 发布后,HTML5 在 iOS 上的表现已令人满意,Safari 独家的
    JavaScript 加速引擎 Nitro 不再那么重要,不过在 iOS 8
    发布后,苹果还是很识趣地取消了三方程序调用 Nitro
    的限制,现在任意浏览器或应用调用 iOS 的 UIWebview 都可以利用 Nitro
    加速。两大手机操作系统霸主和浏览器巨头的态度发生了变化,使得 HTML5
    在手机上的发展不再受限,而且这个变化不可逆只能继续向前,这种变化势必会产生深远的影响。

我们知道浏览器的默认控件样式和原生控件样式差别很大,一个高性能的、样式体验与原生控件一样的
UI 框架是非常重要的,之前 jQuery Mobile
等产品的因性能不足,所以难当此任。在这里做一个广告,我所在的 DCloud
公司在 iWeb 大会上发布了系统的 HTML5“性工能缺失”的解决方案,包括解决
HTML5 性能问题的手机端引擎、超快的 HTML5 开发 IDE 产品 HBuilder、还有把
40 万原生 API 封装成 JavaScript 对象,以解决 HTML5 能力不足问题的
Native.js 技术。

永利注册 6

Intel 公司发布了 Crosswalk 引擎,可以让 Android 4.0-4.3 手机上的应用打包
Chromium 引擎而不是 Android WebKit。虽说未来 Android 4.4
会占据更多市场份额,但目前主流的 Android 手机的系统版本毕竟还是
4.1、4.2(近期统计,4.4以及超过)。

在专业方向上,很多公司也做出了不错的成绩。触控的 Cocos2d-html5、Egret
runtime 和 Ludei CocoonJS 强化了 Canvas 的表现,让 HTML5
游戏体验更好;UC、猎豹等手机浏览器也强化了音视频播放的表现。

不管是硬件升级、软件成熟,还是操作系统厂商策略变化,都在强力推动 HTML5
的爆发。

不过要注意,我说的 HTML5 爆发,不是指手机浏览器爆发。有人说 HTML5
不好,因为用户讨厌打开浏览器输入 URL 的过程。我想说这种想法是对 HTML5
的片面理解。HTML5!= 传统浏览器,虽然编程语言还是
HTML、Javascript、CSS,但发行方式绝不是传统网站那么简单。HTML5
应用的入口,反而很少是启动浏览器输入
URL,它可以是存在于手机桌面的图标、也可以来自超级
App(如微信朋友圈)、以及搜索引擎、应用市场、广告联盟。。。到处都是它的入口。它的入口,比原生
App 更多。

五、颠覆原生App


HTML5 的“性工能”障碍得到解决,可以接近原生 App
的效果,所以它就可以替代原生 App 吗?很多人认为,即使 HTML5
会发展的比现在好,也将与原生 App
各占一部分市场的格局,要求不高的长尾应用会使用 HTML5,而主流应用仍是原生
App 的天下。

但我认为这样的想法很危险,就像 HP
高层告诉沃兹:谁会在家里摆一台电脑呢?未来 HTML5 肯定会颠覆原生
App。“性工能”障碍的消除,只是 HTML5
的劣势被削弱,但劣势被消除后,它的优势就会大放异彩,HTML5
的优势是什么?对开发者来说:

  • 跨平台。在多屏年代,开发者的痛苦指数非常高,人人都期盼HTML5能扮演救星。多套代码、不同技术工种、业务逻辑同步,这是折磨人的过程。有点类似个人电脑早期世界,那个时候的每家电脑都有自己的操作系统和编程语言,开发者疲于做不同版本,其实DOS的盛行也很大程度是因为开发者实在没精力给其他电脑写程序。跨平台技术在早期大多因为性能问题夭折,但中后期硬件能力增强后又会占据主流,因为跨平台确实是刚需。

  • 快速迭代。移动互联网是一个快鱼吃慢鱼的时代,谁对用户的需求满足的更快,谁的试错成本更低,谁就拥有巨大的优势。互联网产品大多免费、且有网络效应,后入者抢夺用户的难度非常大。使用原生开发,从招聘、开发、上线各个环节的效率都慢一倍以上,而且参与的人越多,沟通效率往往拖慢不止一倍。

  • 减低成本。创业者融资并不容易,如何花钱更高效非常重要。如果你使用原生开发的App和竞争对手使用HTML5开发的App没什么区别,但你的开发成本高出一倍,我相信没有投资人会喜欢给你投钱。

  • 导流入口多。HTML5应用导流非常容易,超级App(如微信朋友圈)、搜索引擎、应用市场、浏览器,到处都是HTML5的流量入口。而原生App的流量入口只有应用市场。聪明的HTML5开发者当然会玩转各种流量入口从而取得更强的优势。

  • 分发效率高。前段时间微信朋友圈风靡一时《神经猫》,这个游戏如果放到Appstore,绝对没有那么多流量,超级App带来的流量,远大于原生应用市场。假如微信允许游戏在桌面创建快捷方式、假如游戏后续升级解决持续娱乐问题,未来不可想象。除了入口多、流量大,导流效率高也不可忽视,谁都知道:页游和端游打同样的广告,广告变用户的转化率,页游远远高于端游。

HTML5
对用户的好处是:和流量入口多、分发效率高相对应的,大幅降低使用门槛。用户眼睛看到一个兴趣点,点击后,就应该立即开始满足用户需求。比如流媒体可以立即看,页游可以立即玩。而目前的原生应用市场,用户需要这样操作:选一个应用、等待下载、确认权限、等待安装,然后点击打开。这样糟糕的体验迟早要被颠覆。不管是
App、游戏,还是音视频,未来都将即点即用。谁先满足用户这个需求,谁就制胜。

这就是所谓“天下武功,唯快不败”。分析至此,我们可以明显的看出,不管是站在最终用户角度、还是站在开发者角度,HTML5
必将取代原生应用当前的位置。并由此引发一系列颠覆。

发表评论

电子邮件地址不会被公开。 必填项已用*标注