html5及css3开发性能问题

现在html5被炒的很火，特别是chrome的版本不断更新，越来越多的css3属性的支持。到目前为止确实可以使用css3+html5制作出可以媲美桌面应用的web应用了。除了IE的兼容性问题，其它浏览器基本上已实现W3C所制定的那套东西，当然chrome中其中表现最好的一个浏览器，想用html5开发应用，要么逼客户使用chrome或firefox浏览器，要么用开源的webkit自己封装一个客户端环境。后者就是我们公司采用的方案

 

前段时间为公司开发了一个基于html5+css3为前端基础的游戏，名叫"农夫乐园"，类似于QQ的玫瑰小镇，不同的是我们的游戏是用html5+css3实现的，而QQ的玫瑰小镇是以flash as 实现的。

农夫乐园是以客户端方式运行在桌面，前端web包含在了webkit中，而webkit又嵌在了一个C++客户端中，所以可以完全使用html5+css3技术而不用考虑兼容性。而且这样的方式嵌入桌面，JS还可以和c++进行通信，实现JS拥有操作系统API的功能。

 

农夫乐园已经第一期已经上线，在边锋游戏大厅和游戏茶苑客户端中都可以玩，还有快播的快玩游戏平台中的棋牌游戏下的农夫乐园也有。

 

由于开发周期较短，只有2周，所以架构上比较急，很多功能也是临时加的。

 

开发过程中才发现CSS3的性能真的不咋的，多几个translate的动画做位移画面就卡的很。在测试机上2G内存，core双核的台式机上15个css3位置动画同时运动的话cpu就达到50%以上。 反而使用js实现的movieclip动画帧效率更高。所以游戏中减少了很多的css3动画，希望后期的浏览器对css3动画支持效率更好吧。

 

游戏中并未采用canvas来实现，因为canvas在布局方面还是很麻烦的。所以整个游戏都是dom+css3+js来实现游戏布局及相关交互

 

由于其它项目都很急所以农夫乐园2期的开发也排在了很后面。后期由于要实现比较多的动画效果所以还是要考虑canvas来实现动画，虽然布局上会花掉不少心思。但为了动画性能，没有办法，canvas上绘制来实现动画效率还行，除了粒子特效之类的性能不如flash as3,其它方面的性能还是可以的