読者です 読者をやめる 読者になる 読者になる

描画処理のパフォーマンス比較

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になった時点の描画数を計測してみた。

環境

  1. OS: Windows7 Service Pack 1
  2. CPU: Corei7 3520M 2.90GHz
  3. Mem: 8G

結果

  • JavaScript
    • Chrome バージョン28.0.150072 m
      • 7100
      • f:id:y_d:20130727200616p:plain
    • IE11.0.9431.0 Preview
      • 3700
      • f:id:y_d:20130727200715p:plain
    • Firefox 22.0
      • 3100
      • f:id:y_d:20130727200703p:plain
  • FlashPlayer11.8
    • Chrome (Pepper-based Flash Player) 11.8.800.97
      • 9800
      • f:id:y_d:20130727200729p:plain

JavaScriptではChromeがダントツだけど、いまだにFlashPlayerの方が早いのは変わらないみたい。
IE11はCPUに負荷がかかり過ぎない様にパフォーマンスを抑えてる?