はっぱのすなば

ちょっとパズルとは関係ないのですが、暇だったので、
数日前にこないだボールを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

※IE8はuuCanvas.js v2.0.2使用、SeaMonkeyはFirefox2.0の代わり
以下分かったことを箇条書きで

1. 全体的にSVGよりcanvas全画面描画の方が速い。SVGのほうが圧倒的に処理量少ないはずなので、個人的にはかなり意外
2. Safari3.2.3のcanvas描画がエラーになっちゃう上、SVG描画はものすごく酷く乱れる
3. Safari4のSVG描画は改善されてるけど、それでもちょっと欠ける部分がある
4. GoogleChromeはcanvasのグラデーション処理に弱いっぽく見える
5. Firefoxはcanvasでボーダーとなる線を描くと性能が落ちる
6. IE9はスクリプト改造してみても落ちちゃうので測定できませんでした。
7. IE6はめんどくさいので測定しませんでした。
8. 数字が多すぎるのでグラフにすべきだったと思った