html技巧:Flash与HTML 5 WebGL粒子系统性能比较

【无忧考网-html技巧:Flash与HTML 5 WebGL粒子系统性能比较】：
最近Michael Chaize使用HTML 5和Flash等技术实现了同样一个粒子系统，并对其在不同浏览器，不同操作系统，不同平台（桌面和移动设备）的性能进行了一个评测。可以看到，当粒子数达到4000时，Flash的性能已经是HTML 5的3倍。 但是这个评测没有使用到HTML 5 最新的WebGL Canvas。于是在原测试程序基础上新加了基于WebGL的测试功能。

 

为了公平起见，粒子系统的计算采用原javascript 实现，没有放到 GPU的shader中计算。

测试网页地址在这里。

结果见下图

这个粒子系统测试在使用HTML和2D Canvas时瓶颈完全在图形的绘制上，而在使用WebGL后瓶颈转移到了Javascript对粒子系统的计算上。以上测试均基于Chrome 5 Dev版，通过添加 –enable-webgl 启动参数启用了WebGL功能。同时使用了Firefox Dev 版进行了比较，与Chrome有较大差距，甚至没有与Chrome的普通图形绘制方式拉开差距。

此测试中Flash是否启用了GPU加速还不得而知。今 后浏览器使用GPU加速技术后，可以对HTML和2D Canvas的绘制进行加速，从而不用采用复杂的WebGL就能获得较快的绘制速度。

HTML