其实这里只简单对比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. android studio运行时报错AVD Nexus_5X_API_P is already running解决办法

    运行刚搭建好的Android环境时会报这种错误: AVD Nexus_5X_API_P is already running. If that is not the case, delete the ...

  2. const 变量修饰 研究

    #include<stdio.h> #include<iostream> using namespace std; struct A { ;} ;} }; int main() ...

  3. Java NIO: Non-blocking Server

    Even if you understand how the Java NIO non-blocking features work (Selector, Channel, Buffer etc.), ...

  4. secureCRT在Windows上面的安装过程

    参考这篇文章: https://www.cnblogs.com/yjd_hycf_space/p/7729796.html

  5. 文件 File 常见操作 工具 MD

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

  6. 用C#进行DirectX开发

    DirectX 9.0 的Manage DirectX部分包括下列九个程序集. Microsoft.DirectX.AudioVideoPlayback.dll Microsoft.DirectX.D ...

  7. 微信小程序显示html格式内容(wxParse使用及循环解析数据渲染)

    小程序默认是不支持html格式的内容显示的,那我们需要显示html内容的时候,就可以通过wxParse来实现. 首先我们下载wxParse,github地址:https://github.com/ic ...

  8. python3 验证码去噪

    处理前图像: 处理后图像 代码 #coding:utf8 import os from PIL import Image,ImageDraw,ImageFile import numpy import ...

  9. memcache的资料集

    1. 安装与查看过程(完整) https://www.cyberciti.biz/faq/rhel-fedora-linux-install-memcached-caching-system-rpm/ ...

  10. Cognos11中通过URL传参访问动态Report

    一.需求: 在浏览器输入一个URL,在URL后面加上参数就可以访问一个有提示值的报表?比如下面的报表 二.解决办法 Cognos  Model 查询主题设计层概要 Select * from [UCO ...