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