ベンチマーク for canvasタグとcanvas on Flash 2010

JavaScript

追記：canvasタグを8倍高速化する方法＆FlashCanvasが4倍速くなった - yukobaのブログも合わせてご覧ください。

最近、canvasタグを利用したアプリの高速化に励んでいます。何か良いベンチマークはないかなと思い探していたら、「CanvasのdrawImageのベンチマーク - yukobaのブログ」からリンクを張ってあるベンチマークに行き当たり、最初、「へぇ〜こんなの作った人がいたんだ」とか思って、ドメインをよく見たら1年半前の自分でした orz

というわけで、それの2010年バージョン。パワーアップします。

まず、最近、FlashCanvas Pro と uuCanvas.js というcanvasタグをFlash上で使えるようにする、非常に良いライブラリが出ました。古典的には、VML on IEを使ったライブラリが有名なのですが、スピードが遅い上、全てのAPIをサポートしていないという問題がありました。（uuCanvas.js 2.02 はまだピクセル操作のAPIの実装が終わっていないのかな？）。canvas on Flash が出たことにより、IEでも普通にcanvasタグを使えるようになりました！これらのライブラリは結構おすすめですよ！

ベンチマーク結果

ブラウザなど 実行時間 備考
Chrome 4.1β 749ms
Safari 4.0 4,069ms
Opera 10.50 5,058ms
FlashCanvas Pro 1.1
(IE8, Flash 10)		 8,023ms
Firefox 3.6 11,419ms
uuCanvas.js 2.02
(IE8, Flash 10)		 11,568ms コマ落ちしてフレーム数半分の5回
iPod touch 初代 35,782ms

実行コードは、以下の2つです。2008年同様、drawImage() のみです。

CanvasBenchFlashCanvas.html の方は、IE以外ではネイティブ実行をするので、IE以外ではそちらを使って計測しています。

テスト環境は、Pentium-M (Pentium 3相当) 1.2GHz on Windows XPです。遅いマシンですいません。

注意事項として、canvasタグはsetTimeout()をしないと描画しません。今回、「本当に描画」させたかったので、setTimeoutを使って、10フレーム分描画させました。ウェブブラウザはsetTimeout(func, 0)でちゃんと描画します。しかしながら、canvas on Flashは、ある程度の秒数のウェイトをかけないと、Flash側でコマ落ちさせてしまうようです。なので、100msにしました。しかし、uuCanvas.js はそれでも不足しているようで、もっともっと wait が必要なようです。この部分、Flashに強制的に描画させるのって技術的に難しいのですかねぇ？なので、結果として表示される実行時間は、実際の実行時間から100ms × 10を引いた数字です。

どうやって、setTimeout() したかは、上のhtmlのソースをご覧ください。最近、function を入れ子にするのがマイブームで、4重も入れ子になっていてごめんなさい。クロージャ万歳！

uuCanvas.jsはSilverlightやVMLも使えるのですが、物凄く遅かったので、結果は割愛。Flash版だけで十分な気がします。あと、FlashCanvas Pro はFlash 9に対応していますが、uuCanvas.jsはFlash 10以降が必要で、存在しないとSilverlightを使うので、ご注意を。

スマートフォン

ちゃんとベンチマークとっていないので、適当なことを書きますが、（イメージです）

端末 年 速度比
iPod touch 初代 2007年 1
iPhone 3G S 2009年 3
Nexus One 2010年 5
Pentium-M 1.2GHz 10

な気がします。（適当ね、鵜呑みにしないでね！）。2010年のスマートフォンはPentium 2くらいの性能があるのでは？あと、Google Chrome は Safari よりも速いので、実際は、Nexus One はもっと差が出るのかも。

リンク