Hatena::ブログ(Diary)

yukobaのブログ このページをアンテナに追加 RSSフィード Twitter

2010年03月10日 ベンチマーク for canvasタグとcanvas on Flash 2010

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

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

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

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

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

ベンチマーク結果

ブラウザなど実行時間備考
Chrome 4.1β749ms
Safari 4.04,069ms
Opera 10.505,058ms
FlashCanvas Pro 1.1
(IE8, Flash 10)
8,023ms
Firefox 3.611,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 S2009年3
Nexus One2010年5
Pentium-M 1.2GHz 10

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

リンク

revulorevulo 2010/03/13 02:20 詳しくは私のブログに書きましたが、座標を整数に丸めてから drawImage() に与えるようにすると、ベンチマークの結果がガラっと変わりました。

どちらかというと、整数の結果の方が意味がありそうですが、Chrome は小数でも整数でも結果が変わらなかったりしたので、両方の結果を載せると面白いんじゃないかと思います。