ボールが300個跳ねるのを作ってみた
ちょっとパズルとは関係ないのですが、暇だったので、
数日前にこないだボールを300個跳ねさせるのを作ってみたんです。
http://icecream.15.kg/hima/ball.html
で、これで描画関係の処理スピード計れそうなので見てみました。測定条件は例によってこんな感じ。
PC:2006年に買ったLet's note (CF-W5) URL ※2008年に組んだ自作PCの1/3の性能。
canvas -> 全画面毎回再描画。
SVG -> circle要素を初めに出力して、rx,ryプロパティだけ変更する
(表が大きいので以下省略, Gradはグラデーション)
ボール300個のアニメーション時のFPS
| ブラウザ | Silverlight | VML | ||||||
|---|---|---|---|---|---|---|---|---|
| 丸のみ | 丸+border | Grad | Grad+border | 丸のみ | 丸+border | Grad | Grad+border | |
| InternetExplorer 8.0 | 8.1 | 4.4 | 2.9 | 2.2 | 2.0 | 0.97 | 0.84 | 0.51 |
| ブラウザ | canvas | SVG | ||||||
| 丸のみ | 丸+border | Grad | Grad+border | 丸のみ | 丸+border | Grad | Grad+border | |
| SeaMonkey 1.1.18 | 9.2 | 3.2 | 2.6 | 1.8 | 3.4 | 1.7 | 1.3 | 0.88 |
| Firefox 3.0.18 | 10.7 | 3.3 | 6.9 | 2.8 | 3.9 | 1.6 | 3.3 | 1.5 |
| Firefox 3.5.8 | 12.6 | 3.8 | 7.5 | 3.0 | 4.6 | 2.8 | 3.7 | 2.4 |
| Firefox 3.6 | 16.9 | 4.5 | 9.2 | 3.6 | 5.5 | 3.4 | 4.0 | 2.8 |
| Firefox 3.7a3pre | 17.2 | 4.3 | 10.3 | 3.8 | 5.3 | 3.3 | 4.8 | 2.9 |
| Safari 3.2.3 | N/A | N/A | N/A | N/A | (6.4) | (4.9) | (5.0) | (3.9) |
| Safari 4.0.5 | 26.1 | 14.4 | 10.0 | 7.9 | 12.8 | 7.2 | 6.7 | 4.6 |
| GoogleChrome 4.0.249.89 | 32.0 | 13.4 | 4.0 | 3.4 | 12.7 | 3.9 | 6.2 | 2.1 |
| GoogleChrome 5.0.342.2 Dev | 32.0 | 14.4 | 4.0 | 3.5 | 14.6 | 4.3 | 5.9 | 2.2 |
| Opera 9.64 | 12.3 | 4.9 | 7.5 | 3.9 | 6.9 | 3.7 | 4.5 | 2.8 |
| Opera 10.10 | 11.6 | 7.8 | 7.8 | 6.4 | 11.4 | 7.4 | 6.0 | 4.9 |
| Opera 10.50 | 32.6 | 16.2 | 15.7 | 9.7 | 15.1 | 8.8 | 6.9 | 5.3 |
以下分かったことを箇条書きで
- 全体的にSVGよりcanvas全画面描画の方が速い。SVGのほうが圧倒的に処理量少ないはずなので、個人的にはかなり意外
- Safari3.2.3のcanvas描画がエラーになっちゃう上、SVG描画はものすごく酷く乱れる
- Safari4のSVG描画は改善されてるけど、それでもちょっと欠ける部分がある
- GoogleChromeはcanvasのグラデーション処理に弱いっぽく見える
- Firefoxはcanvasでボーダーとなる線を描くと性能が落ちる
- IE9はスクリプト改造してみても落ちちゃうので測定できませんでした。
- IE6はめんどくさいので測定しませんでした。
- 数字が多すぎるのでグラフにすべきだったと思った
