其实这里只简单对比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. TeXLive里面集成了CTeX,Lyx是一个编辑软件

    TeXLive里面集成了CTeX,LaTeX是排版引擎,CTeX和TeXLive是发行版.LaTeX是毛坯房,CTeX和TeX Live是带精装的房子.CTeX 套装是一个个人作品,存在很多问题.这些 ...

  2. 在LaTeX中使用颜色 Using colours in LaTeX

    Using colours in LaTeX There are several elements in LATEX whose colour can be changed to improve th ...

  3. REQUEST_TIMEOUT 解决方案

    you need to pass an npmrc file when you install the business network onto the peers. For more info s ...

  4. 脚本不得关闭非脚本打开的窗口。Scripts may close only the windows that were opened by it

    今天脚本了里写了一句话: window.close() 但是浏览器却报了警告提示:Scripts may close only the windows that were opened by it,而 ...

  5. 第一章 第一个dubbo项目

    为了安全:服务启动的ip全部使用10.10.10.10 版本: dubbo:2.5.5 重要的网址: dubbo的github:https://github.com/alibaba/dubbo dub ...

  6. Java语言:JAVA8 十大新特性详解(zz)

    关键词: Lambda表达式.函数式接口.方法与构造函数引用.接口的默认方法 原文地址: http://www.jb51.net/article/48304.htm 本教程将Java8的新特新逐一列出 ...

  7. Valid Sudoku leetcode java

    题目: Determine if a Sudoku is valid, according to: Sudoku Puzzles - The Rules. The Sudoku board could ...

  8. WebView JS交互 JSBridge 案例 原理 MD

    Markdown版本笔记 我的GitHub首页 我的博客 我的微信 我的邮箱 MyAndroidBlogs baiqiantao baiqiantao bqt20094 baiqiantao@sina ...

  9. 左手坐标系和右手坐标系 ZZ

    今天记录一下一些基本的数学知识,左手坐标系和右手坐标系.这些对于搞图像开发或者游戏开发的朋友来说,应该是很基础的东西,不过对于大部分人来说还是比较陌生的知识.之所以看这方面资料主要是因为在使用Andr ...

  10. Python3爬虫:利用Fidder抓取手机APP的数据

    1.什么是Fiddler? Fiddler是一个http协议调试代理工具,它能够记录并检查所有你的电脑和互联网之间的http通讯,设置断点,查看所有的“进出”Fiddler的数据(指cookie,ht ...