cocos2d-js 各浏览器上的表现

其实这里只简单对比3个浏览器,估计也足够代表性了。

结论是:

1、有webgl支持的时候,就可以尽情的耍吧;

2、没有webgl,能native就native。如果不行,就只能在canvas上做小块的区域,减少每帧的变化。

1、PC的Chrome(webgl)

首先看看官方的performance test。

粒子系统达到最大值3000也毫无压力。

普通的小人转啊转,1000个以内不成问题,超过1000性能开始下滑。

再自己写一个单图多sprite不断旋转的测试。左侧是没有开批处理的情况,1600个小人就开始撑不住了。右侧开了批处理,但也好不了多少,也是到1700左右就撑不住了。

这个测试在PC上没太多意义,因为可能底层自动做了批处理。这个测试主要是为了后边手机上运行。

2、小米1的微信内嵌浏览器(跟google浏览器效率类似,应该是内嵌了google浏览器)

本来想在手机上跑官方的测试,但发现死活打不开。算了。。。

测试程序尺寸是720*1280,由于尺寸太大,这个也是造成运行不流畅的原因。每帧都要重绘,是有点吃力。

微信浏览器跟谷歌浏览器类似,操作也是类似的(双击放大)。纯canvas没有webgl支持,刚打开还没放小人就只有50帧了。放50个小人就只有20fps了,原来为了更精确的看看canvas性能,看来不行了。

而开不开SpriteBatchNode是没什么差别的,甚至说开了SpriteBatchNode性能还要差一点点(最后的图)。

3、小米1的UC浏览器

UC也是类似的情况了。

后边再测试,发现canvas大小还是很有影响力的(因为canvas机制影响下,只能每帧清空全屏然后重绘)。

如果尺寸改为300*400,那么50个小人的情况下,还是可以妥妥的30+帧,这还是能接受的。毕竟只是小米1。

如果100个小人,就只能勉强的22帧,这算是底线吧。

时间: 2024-11-09 00:59:12

cocos2d-js 各浏览器上的表现的相关文章

不同浏览器上input与select宽度显示不同的本质原因

做表单开发时经常碰到一个问题,input和select是其中最常用的两个标签,但是有个问题很棘手.input和select是两种不同的和模型,如果只是简单的将两者的width设置成一样,将会出现下面的效果: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style type="text/css"> *{margin:0;padding:0;} b

JS预览图像将本地图片显示到浏览器上

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <script type="text/javascript"> /** * 从

js获取浏览器宽高、网页宽高、屏幕宽高、鼠标位置等(带图片说明)

网页可见区域宽: document.body.clientWidth;网页可见区域高: document.body.clientHeight;(点击查看大图) 网页可见区域宽: document.body.offsetWidth (包括边线的宽);网页可见区域高: document.body.offsetHeight (包括边线的宽);(点击查看大图)有没有发现,offsetWidth和clientWidth的区别,offsetWidt是连滚动条一起包含在内的. 网页正文全文宽: documen

让你的「微信小程序」运行在Chrome浏览器上,让我们使用WebStorm

「微信小程序」的开发框架体验起来,还不错--自带了UI框架.但是问题是他的IDE,表现起来相当的糟糕--其实主要是因为,我当时买WebStorm License买了好多年.所以,我觉得他的IDE真不如我这个付费好用. 而且,作为一个拥护自由和开源的 「GitHub 中国区首席Markdown程序员」.微信在「微信小程序」引导着Web开向封闭,我们再也不能愉快地分享我们的代码了. 如果我们放任下去,未来的Web世界令人堪忧. 好了,废话说完了: 文章太长不想看,可以直接看Demo哈哈: GitHu

js判断浏览器类型

js判断浏览器类型  <script type="text/javascript" >     <!--   function getOs()   {       var OsObject = "";      if(isIE = navigator.userAgent.indexOf("MSIE")!=-1) {           return "MSIE";      }      if(isFiref

Js 跨域上传文件

代码在github上( https://github.com/andygithubchen/jsUpload ),请结合github上的文件阅读. 主要实现js跨域上传文件,这里的跨域目前只在两个域名所指向的服务器在同一局域网内. 当然,这两种方案都可以做同域名上传. 例如: 192.168.1.60 www.test.cn 192.168.1.61 www.video.cn 如果要在www.test.com域名下上传文件到www.video.com域名下,可以使用下面这两个方案: 方案一(在s

js 判断浏览器关闭事件 兼容所有浏览器

无论是从页签处关闭浏览器,还是关闭整个浏览器窗口,无论是 ie11,火狐,谷歌,苹果,还是ie6,都能兼容的浏览器关闭事件监听 在网上搜索了一天,虽然网上也有之类的代码,但是太繁琐,有时候还不可用.我也是在原有基础上修改的.经过了上述的浏览器测试,如果有不兼容的,欢迎提出意见一起学习. ? <script type="text/jscript" src="jquery-1.10.2.min.js"></script> <script t

mui 时间日期控件(浏览器上无法查看,在手机端可以点击)

<head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> <title></title> <link href="css/mui.mi

JS 阻止浏览器默认行为和冒泡事件

JS 冒泡事件 首先讲解一下js中preventDefault和stopPropagation两个方法的区别: preventDefault方法的起什么作用呢?我们知道比如<a href="http://www.baidu.com">百度</a>,这是html中最基础的东西,起的作用就是点击百度链接到http://www.baidu.com,这是属于<a>标签的默认行为,而preventDefault方法就是可以阻止它的默认行为的发生而发生其他的事情