「ビー玉ころころ」でDOM(imgタグ)とCanvasを使った場合の 描画速度に差があるのか気になったので調べてみた。

こんなサイトを見付けた。

  • 参考：HTML5はFlashの3倍重かった! 描画パフォーマンスの比較
    http://clockmaker.jp/blog/2012/02/html5-flash-draw_performance/
Flash, HTML5(DOM), HTML5(Canvas) の比較を行っている。

Flash圧勝なのは予想通りだけど今回知りたいのは DOM vs Canvas。
で、PCでの結果を見ると Canvas 圧勝。

テストコードが公開されていたのでiPodTouch4で試してみた。

テストコード：指定した個数の矩形画像が下に流れ落ちる。

500個の画像を処理させてみた。

DOMの結果: 12fps

Canvasの結果: 26fps

となり、Canvasの方が２倍くらい早い結果となった。

PC用のテストコードなのでテスト方法が妥当か疑問の余地があるが まあ納得の行く結果だと思う。

ゲームの様な性能の要求される描画ではCanvasを使えって事だな。