2012/05/11
html5のDOMとCanvasの描画性能
「ビー玉ころころ」でDOM(imgタグ)とCanvasを使った場合の
描画速度に差があるのか気になったので調べてみた。
こんなサイトを見付けた。
で、PCでの結果を見ると Canvas 圧勝。
テストコードが公開されていたのでiPodTouch4で試してみた。 テストコード:指定した個数の矩形画像が下に流れ落ちる。 500個の画像を処理させてみた。 DOMの結果: 12fps Canvasの結果: 26fps となり、Canvasの方が2倍くらい早い結果となった。 PC用のテストコードなのでテスト方法が妥当か疑問の余地があるが まあ納得の行く結果だと思う。 ゲームの様な性能の要求される描画ではCanvasを使えって事だな。
- 参考:HTML5はFlashの3倍重かった! 描画パフォーマンスの比較
http://clockmaker.jp/blog/2012/02/html5-flash-draw_performance/
で、PCでの結果を見ると Canvas 圧勝。
テストコードが公開されていたのでiPodTouch4で試してみた。 テストコード:指定した個数の矩形画像が下に流れ落ちる。 500個の画像を処理させてみた。 DOMの結果: 12fps Canvasの結果: 26fps となり、Canvasの方が2倍くらい早い結果となった。 PC用のテストコードなのでテスト方法が妥当か疑問の余地があるが まあ納得の行く結果だと思う。 ゲームの様な性能の要求される描画ではCanvasを使えって事だな。
この投稿へのコメント
コメント・フォーム