`
chuanlhc
  • 浏览: 69674 次
  • 性别: Icon_minigender_1
  • 来自: 广州
最近访客 更多访客>>
文章分类
社区版块
存档分类
最新评论

黑一下HTML5 看上去很美?

 
阅读更多

HTML5的“跨平台优势”一说由来已久。我们之前曾报道Facebook工程师的改版手记,其中提到他们对HTML5跨平台快速迭代的推崇。然而前不久扎克伯格却公开发声“押注HTML5是大错”。关于它的实用性,或许使用者自己才更有发言权。

以下是Cocos2D-X核心开发者王哲在cocoaChina移动开发者大会上的演讲。他认为本地应用的好处在于可以将资源打包运行,缺点是iOS审核及Android碎片化;HTML5看似跨平台,实则碎片化较Android更严重。各有优缺点的情况下,较理想的方式是Hybrid(混合模式),当然它也并非天衣无缝,还存在苹果方面的条款风险。而一定只鼓吹“某一种模式必胜”的,背后更多是利益相关,目前开发者只能尽己所能,将来如何需要看整个生态的发展。

(有趣的是,王哲曾是“新概念作文大赛”的冠军,前一届的冠军里出了韩寒(微博),后一届的冠军里出了郭敬明,而他则被调侃为“误入程序员”。)


Cocos2D-X核心开发者王哲Cocos2D-X核心开发者王哲

全文如下,略整理删改:

最近在讨论的是,用哪一种方式能把跨平台的游戏做得更具一致性,体验更好。目前有三不同的基础,Native(本地应用)、HTML5、Hybrid(二者结合模式),一般的框架只会选择其中之一。我们在开发过程中有一些心得可以跟大家分享一下。

Native,我们能够确定他们用的技术方案。在升级的时候不需要把整个游戏重新下载,它是一个增量升级的概念,就是说它可以把脚本和资源打成一个包,下载完以后直接在本地运行。以目前的情况,困难在于Android的碎片化,自更新需要花很多的力量;而在苹果上,游戏发布后每次更新就必须等待漫长的审核周期。所以我们对Native的感情是很复杂的,这些年靠最靠谱的方式给大家带来了收益,但是它又有这样那样的缺点。

HTML5是来补救Native的缺点的。HTML5是在浏览器里面跨平台的做,自己就比较省事儿了。目前争论的比较多,到底移动互联网是Native还是HTML5。HTML5信徒说未来HTML5必然要取代Native,实际上这些争吵的背后代表了不同的利益集团。Native主要是手机平台商,就是做操作系统方面的,HTML5的阵营主要是做浏览器,还有做搜索,比如说FaceBook这样的厂商。站在开发者的角度上往前看谁有能力,实际上最后还是共生共存的状态。公正的看这件事情,还是要客观的看数据。

 

HTML5放在不同操作系统浏览器上的跑分HTML5放在不同操作系统浏览器上的跑分

把HTML5放在不同操作系统浏览器上跑,得分都不一样,实际上很少人说这背后有什么样的意义。我认为它背后的意义是HTML5已经开始碎片化。这件事情是不可避免的。因为Android和iOS代表了对这个生态圈完全不同的两种态度。Android比较自由没有太多的约束,大家都可以搞,结果就出现了不同的定制、不同的操作系统、不同的商城。而苹果的方式是很严格的控制,有点儿像独裁者,你的游戏是否能上去完全看他的心情。

HTML5比Android更开放更自由,这是它的优点,但是优点和缺点是相生的,也就是说你现在面对的不像Android一样是同一个系统不同的版本兼容性的问题,而是这个浏览器有这个标签,有这个功能,另外一个浏览器没有。所以给不同的浏览器做适配的问题在HTML5上面只会更严重,不会更容易。所以HTML5试图想让自己很轻易的跨平台,实际上自己又变成了分化的很多的平台,所以我认为这是HTML5社区的第一个问题。

第二个问题,是它的性能。我们的游戏实验下来的结果,超过几百个元素在动的时候,还达不到要求的标准。所以HTML5有它的优点,也有它的缺点,未来有可能更好,也有可能更糟糕,但是这个事情不是我们能够决定的。所以,目前能做的是在现有的框架、现有的标准基础做到最好,但最后整个生态圈走多远还是看HTML5发展的情况。

Native和HTML5各有缺点,所以第三种方式是Hybrid。国内有一些厂商会采用这种技术方案。有的游戏使用Native,结果是每次升级需要下载几十兆的包,还存在审核周期长,需要发布多渠道维护的情况。Hybrid怎么做呢?发到所有渠道里面,然后游戏第一次启动的时候,到服务器上下载游戏的脚本和资源,大概80MB左右,后面的升级每次开游戏的时候自动监测一下,有没有升级包,有的话就下载下来,解压完以后脚本和图片资源替换掉,这样就完全避免了Native目前碎片化的问题。对于HTML5来讲,它运行效率非常高、非常流畅。

除了解决前面这些问题之外,它还会带来一个额外的收益就是开发时间。目前Native版本开发人员成本高,开发周期特别长,用Hybrid之后,用脚本化的编程都能够大大的加快游戏开发的速度,它还是处于一种运行速度和开发速度折中的方案。

同一个测试游戏,在iPhone 4S Safari用HTML5和Hybrid下的不同表现(左下为跑分)同一个测试游戏,在iPhone 4S Safari用HTML5和Hybrid下的不同表现(左下为跑分)

举一个例子对比一下。同样一个专门用于测试性能的游戏,在iPhone 4S Safari用HTML5,可以看到画面并不是太复杂,属于很简单的情况;如果把同样的代码放到Hybrid的方案里,就显得很轻松,但是游戏的代码还是那些,没有变。

Hybrid不是天衣无缝,它有一个致命的缺点在于,如果用Hybrid升级包方式使游戏升级的话是违反苹果的开发者条款的,因为苹果禁止下载可运行的脚本,但是这个事情很多人在偷偷干,所以不太清楚最后这个政策上的风险会怎么样,这是Hybrid方式唯一美中不足的地方。

 

原文:http://mobile.51cto.com/news-357383.htm

分享到:
评论

相关推荐

    HTML5+CSS3+jquery应用之美

    《HTML5+CSS3+jQuery应用之美》由韩国专业视觉设计师倾力奉献其多年商业网站设计与制作的从业经验,通过八大商业案例,以HTML5搭建结构、CSS3设置样式、jQuery实现动态应用这三者相结合的实际应用方式,详细讲解它们...

    黑色风格HTML5企业网站 html5网站源码 html5网站源码带后台 html5整站源码带后台

    黑色风格HTML5企业网站以asp+access进行开发,操作简单,便捷。 程序特色: 一:使搜索引擎更加容易抓取和索引 二:提供更多的功能,提高用户的友好体验 三:可用性的提高,提高用户的友好体验 html5响应式摄影网站...

    HTML5之美 HTML5入门

    包括HTML5之美、HTML5入门、HTML5应用介绍、HTML5带来什么

    HTML5+CSS3 精美登陆界面源码

    3个很精美的登陆界面,全都是用HTML5+CSS3开发的,所以可能不适合低版本IE浏览器。大家可以下来看看,做的超级漂亮的。

    基于html5+css3实现的精美聊天界面demo

    基于HTML5+css3实现的两人即时通讯聊天界面,界面风格相当漂亮,可直接使用,也可简单修改为自己想要的样式,仅供大家参考。

    一个利用HTML5技术制作的美容网站源码

    一个利用HTML5技术制作的美容网站源码 在美容美体页面,右键 也可以直接访问http://www.j2men.com/lfm/BeautyBody.html

    html5+css3精美登录界面

    很精美的登陆界面,html5+css3开发的,所以可能不适合低版本IE浏览器。大家可以下来看看,做的超级漂亮的,非常赞,统一修改了博主所有下载文件的积分,方便大家学习,一起提升

    基于HTML5+css+JS的精美登陆注册界面

    基于HTML5+css+JS的精美登陆注册界面

    墨蓝色设计案例展示响应式企业模板_蓝色 黑色 设计 案例 展示 响应式 手机 html5 企业 网店 花店 互联网 网站建设 美

    墨蓝色设计案例展示响应式企业模板_蓝色 黑色 设计 案例 展示 响应式 手机 html5 企业 网店 花店 互联网 网站建设 美墨蓝色设计案例展示响应式企业模板_蓝色 黑色 设计 案例 展示 响应式 手机 html5 企业 网店 花店 ...

    HTML5梦幻之美

    HTML5之美 HTML 5 的第一份正式草案已于2008年1月22日公布。HTML 5有两大特点:首先,强化了 Web 网页的表现性能。其次,追加了本地数据库等 Web 应用的功能。

    精美的 HTML5 商业网站设计案例

    在过去的几年,网页设计和制作人员就已开始关注和使用 HTML5 了,如今 HTML5 得到了更加广泛的应用,国外有很多网站已使用 HTML5 技术制作。之前的文章和大家分享过精美的HTML5企业网站和HTML5个人网站,大家可以去...

    贵美商城Html

    贵美商城Html

    Head First HTML5 Programming(中文版).pdf

    Head First系列之《Head First HTML5 Programming 中文版 》 内容简介:你可能想创建具有动态性、交互性、包含丰富数据而且互连的Web页面。先等一下,Web页面?为什么不用HTML5创建成熟的Web应用呢?另外,为什么不...

    arm语音html5直接播放实现仿微信播放动画

    1.html5标签播放amr语音 <audio src="http://xxxxxx/media/1.amr" id="media" width="1" height="1" preload=""></audio> 2.修改封装weixinAudio.js 实现仿微信语音播放动画 3.项目集成ffmpeg for linux 后台直接...

    从零开始构建HTML 5 Web页面

    HTML 5是时下Web开发领域炒得火热的一个术语,是的,很多人都看好它,也有很多业内知名公司开始正式使用HTML 5重新构建自己的网站,如YouTube开始使用HTML 5视频,Google 已经弃用自家的Gears,开始全面拥抱HTML 5...

    50余款手机页面模版源码html5

    50余款手机页面模版源码html5 1.1【32赞HTM5响应式系列之右侧多级滑动式】仿Slideby触屏版html5响应式手机wap网站模板 2【32赞HTML5响应式系列之...10【导航看上去不错】越野e族中国越野触屏版手机wap汽车网站模板下载

    精美静态HTML网页模板

    精美静态HTML网页模板

    零基础学习HTML5系列视频课程

    这些浏览器都不支持 HTML5?没有关系!首先学会 HTML5,然后再学习浏览器兼容性处理就好了。我们不能因为要迁就已经淘汰的事物,而放弃未来! 本套 《HTML5 零基础入门课程》,是专门面向未来的 web 开发人员打造的...

    html5 CSS3鼠标悬停图片抖动.rar

    html5 CSS3鼠标悬停图片抖动,鼠标放在图片上,图片会抖动几下,在支持HTML5浏览器中有最佳效果。将本效果放在图片列表中比较合适,比如购物网站的产品图片列表、企业网站的产品中心列表、文章资讯站的推荐图文列表...

    Html精美网页模板

    收录了20例常用的精美HTML模板,包含404,登录,常用web,常用App,常用销售等等等等页面,附网页代码,可以自行修改样式与外观,也可以用于HTML的学习与实践~

Global site tag (gtag.js) - Google Analytics