描画処理のパフォーマンス比較
canvasのcontext2dのarc()関数のパフォーマンス比較をしてみました。
ついでにActionScript3.0との比較もしてみました。単純に比較できないとは思いますがGraphics::drawCircle()を使用します。
JavaScriptのソースはこんな感じ
var stats=new Stats(); document.body.appendChild(stats.domElement); var c=document.querySelector('#c'), cx=c.getContext('2d'), w=c.width, h=c.height; setInterval(function(){ var i=0,l=~~document.querySelector('#n').value; cx.clearRect(0,0,w,h); for(;i<l;i++){ cx.beginPath(); cx.arc(w*Math.random(), h*Math.random(), 1, 0, Math.PI*2, true); cx.fill(); cx.closePath(); } stats.update(); },16);
動作確認: http://jsdo.it/demouth/n3n6
ActionScript3.0はこんな感じ
package { import flash.display.Graphics; import flash.events.Event; import flash.display.Sprite; import net.hires.debug.Stats; import com.bit101.components.NumericStepper; public class FlashTest extends Sprite { protected var numParticles:int=1000; public function FlashTest() { // write as3 code here.. this.stage.frameRate=60; this.init(); } protected function init():void{ var stepper:NumericStepper = new NumericStepper(this, 0, 0, this.numChangeHandler); stepper.value=this.numParticles; stepper.x=100; stepper.step=100; this.addChild(new Stats()); this.addEventListener(Event.ENTER_FRAME, this.enterFrameHandler); } private function enterFrameHandler(event:Event):void{ var g:Graphics=this.graphics; var i:int=0,l:int=this.numParticles; var w:int=this.stage.stageWidth, h:int=this.stage.stageHeight; g.clear(); for(;i<l;i++){ g.beginFill(0); g.drawCircle(Math.random()*w,Math.random()*h,1); g.endFill(); } } private function numChangeHandler(event:Event):void{ this.numParticles = event.currentTarget.value; } } }
動作確認: http://wonderfl.net/c/bA1P
パフォーマンス比較 - wonderfl build flash online
このソースをそれぞれのブラウザで実行していく。
描画数を増やしていき、FPSが30になった時点の描画数を計測してみた。
環境
- OS: Windows7 Service Pack 1
- CPU: Corei7 3520M 2.90GHz
- Mem: 8G
結果
- JavaScript
- FlashPlayer11.8
- Chrome (Pepper-based Flash Player) 11.8.800.97
- 9800
- Chrome (Pepper-based Flash Player) 11.8.800.97
JavaScriptではChromeがダントツだけど、いまだにFlashPlayerの方が早いのは変わらないみたい。
IE11はCPUに負荷がかかり過ぎない様にパフォーマンスを抑えてる?