其实这里只简单对比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帧,这算是底线吧。

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

  1. js获取浏览器上一访问页面URL地址,document.referrer方法

    如题,可用document.referrer方法获取上一页面的url 但是也有不可使用的情况 直接在浏览器地址栏中输入地址: 使用location.reload()刷新(location.href或者 ...

  2. JS预览图像将本地图片显示到浏览器上的代码

    js代码实现: 从file域获取本地图片url并将本地图片显示到浏览器上. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitio ...

  3. VSCode配合chrome浏览器调试cocos2d js项目

    1.准备阶段 具备调试功能的VSCode(我的是在win10上,版本是1.17.1) 在VSCode里下载安装Debugger for Chrome扩展插件. 2.具体操作 创建一个cocosjs工程 ...

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

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <hea ...

  5. Node JS 8 如何在浏览器上在线调试

    0:为何专门针对Node8写这个 从nodejs8开始,node去掉了_debugger , 内部集成了inspect , 以往使用node-inspect实现的在线调试不再可用.node8开始要用新 ...

  6. HTML5 file API加canvas实现图片前端JS压缩并上传

    一.图片上传前端压缩的现实意义 对于大尺寸图片的上传,在前端进行压缩除了省流量外,最大的意义是极大的提高了用户体验. 这种体验包括两方面: 由于上传图片尺寸比较小,因此上传速度会比较快,交互会更加流畅 ...

  7. h5页面在浏览器上好好的,到手机上熄火了又看不到报错信息怎么办?

    背景 最近小编接了一个新需求,用h5开发页面,通过webview嵌入原生APP中,自己在浏览器上开发爽歪歪,什么信息都能看到,可是一嵌入原生app中,瞬间就熄火了,啥也看不到了,不知道为什么,反正就是 ...

  8. 在web浏览器上显示室内温度(nodeJs+arduino+socket.io)

    上次的nodejs操作arduino入门篇中实现了如何连接arduino.这次我们来实现通过arduino测量室内温度并在浏览器上显示出来. [所需材料] 硬件:LM35温度传感器,arduino u ...

  9. js获取浏览器高度

    常用: JS 获取浏览器窗口大小 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 // 获取窗口宽度 if (window.innerWidth) winWidth = ...

随机推荐

  1. [Web 前端] superagent-nodejs处理请求的模块

    cp from : https://blog.csdn.net/xiao_chun5316/article/details/48164435 关于superagent,这次写react组件,发送请求都 ...

  2. 各个JAVA场景下的内存图

    首先,内存模型图,如下: 其次,一句话概括各个区域的作用: 1:程序计数器(Program Counter Register),让虚拟机中的字节码解释器通过改变计数器的值来获取下一条代码指令,比如分支 ...

  3. git如何删除远端不存在的本地分支?

    问题:远端分支删除后,如何删除之前拉取的本地分支? 答案: git fetch -p git remote show origin 可以查看remote地址,远程分支,还有本地分支与之相对应关系等信息 ...

  4. go语言之进阶篇JSON处理

    一.JSON处理 JSON (JavaScript Object Notation)是一种比XML更轻量级的数据交换格式,在易于人们阅读和编写的同时,也易于程序解析和生成.尽管JSON是JavaScr ...

  5. iOS 加密的3种方法

    //需要导入   #import <CommonCrypto/CommonCryptor.h> ==============MD5加密============ NSString *str ...

  6. 创想三维:5款最好用的免费3D建模软件【转】

    虽然网上有需要现成的免费三维模型,但对于许多人而言,3D打印机最吸引他们之处是可以设计创造完全属于自己的模型.问题是,现代专业级CAD软件大多价格高昂,例如Solidworks或Zbrush这样的程序 ...

  7. window.open不被拦截的实现代码

    $("#last").click(function(){ var w=window.open(); setTimeout(function(){ w.location=" ...

  8. jquery.cookie 使用方法

    一个轻量级的cookie 插件,可以读取.写入.删除 cookie. jquery.cookie.js 的配置 首先包含jQuery的库文件,在后面包含 jquery.cookie.js 的库文件. ...

  9. 谷歌地图api访问失败

    在非外网情况下,我们调用谷歌api会出现加载不到地图的现象,此时可以换一下域名试试也许就好了 比如我自己访问api时时这样写的: https://maps.googleapis.com/maps/ap ...

  10. Android推送分析

     cpu多核利用能够实现Android推送的吞吐量. 讲明白这点,我们需要了解Android推送的基本原理了.如果实现C(客户端)与server(客户端)实时通讯了.这里有两种思路了: 1.一种是定时 ...