続 FlashとCanvasのどっちが早いか、四角を4000個描いて試してみた

やっぱり、ちゃんと測ってみようかな。ということで、プログラム上で画像を描き終わるまで(=graphics.drawRectやctx.fillRectから復帰するまで)の処理時間を出力するようにしてみました。

→Flashで描く
→Canvas+JavaScriptで描く(ExplorerCanvasを設定済み。IEでも見れます。)

ローカル環境(Windows/PentiumM 1.2GHz)での結果は以下。

	Flash	Canvas+JavaScript
FireFox3.1	28ms	332ms
IE6	30ms	9984ms

うーん、Flash早いなー。

実験に使ったプログラムのソース

Flash

package {
    
    import flash.display.*;
    import     flash.text.*;

    public class DrawRects extends Sprite  {

        public function DrawRects(){
            
            var stdout:TextField = new TextField();
            this.addChild(stdout);
            
            var self:Sprite = this;
            stdout.text = perf( function():void {
                var graphics:Graphics = self.graphics;
                for(var r:Number = 0; r < 0xFF; r+=0x10 ) {
                    for(var g:Number = 0; g < 0xFF; g+=0x10 ) {
                        for(var b:Number = 0; b < 0xFF; b+=0x10 ) {
                            var color:uint = r << 16 | g << 8 | b;
                            graphics.beginFill( color );
                            graphics.lineStyle( 0, color );
                            graphics.drawRect(r/4+(((b/0x10)%4)*0x40),g/4+(int(b/0x10/4)*0x40)+20,4,4);
                        }
                    }
                }
            }).avg + "ms";
        }
        
        /**
         * メソッドの実行時間を計る
         */
        public function perf( f:Function ):Object {
            var count:Number = 1; // 試行回数
            var total:Number = 0;
            var max = null;
            var min = null;
            for ( var i:Number = 0; i < count; i++ ) {
                var start:Date = new Date();
                try {
                    f();
                } finally {
                    var time:Number = new Date().getTime() - start.getTime();
                    total += time;
                    if ( max == null || max < time ) { max = time; }
                    if ( min == null || min > time ) { min = time; }
                }
            }
            return { avg: int((total / count)), max: max, min: min } ;
        }
    }
}

Canvas+JavaScript

<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <script type="text/javascript" src="excanvas.js"></script>
  <script type="text/javascript">
      
    /**
     * メソッドの実行時間を計る
     */
    function perf( f ) {
        var count = 1; // 試行回数
        var total = 0;
        var max = null;
        var min = null;
        for ( var i = 0; i < count; i++ ) {
            var start = new Date();
            try {
                f();
            } finally {
                var time = new Date().getTime() - start.getTime();
                total += time;
                if ( max === null || max < time ) { max = time; }
                if ( min === null || min > time ) { min = time; }
            }
        }
        return { avg: Math.floor((total / count)), max: max, min: min } ;
    }
      
    function onLoad() {
        
        document.getElementById("stdout").innerHTML = perf( function(){
            var canvas = document.getElementById('canvas');
            var ctx = canvas.getContext('2d');
        
            for(var r = 0; r < 0xFF; r+=0x10 ) {
                for(var g = 0; g < 0xFF; g+=0x10 ) {
                    for(var b = 0; b < 0xFF; b+=0x10 ) {
                        var color = r << 16 | g << 8 | b;
                        ctx.fillStyle = "rgba(" + r + "," + g + "," + b +",1)"; 
                        ctx.fillRect(r/4+(((b/0x10)%4)*0x40),g/4+(Math.floor(b/0x10/4)*0x40),4,4);
                    }
                }
            }
        }).avg + "ms";
    }
  </script>
  
</head>
<body onload="onLoad();" >
    
  <div id="stdout"></div>
  
  <canvas id="canvas" width="500" height="500" style="background-color:#FFFFFF;">
  </canvas>
  
</body>
</html>