React / SVG / Canvas でパフォーマンス比較してみた。
ちょっと気になったので、React / SVG / Canvas でパフォーマンス比較してみた。
特に物を同時に動かしたりってときにどうなのか気になったので、パーティクルを2000個動かすのやってみた。早速だけど、結果は以下。
http://khirayama.github.io/compare-animation-performance/public/
環境は、非力なMacBookAir上のChromeで、値は体感でとっちゃってます。ごめんなさい
うーん。あれ？React早い！って聞いてたので、ウキウキ実装したのだけど、React、全然出なかった。うーん。
「きっと慣れてないから...！」てことでちょっと探って以下とか参考に変更加えたのだけど、イマイチあがらず....
なんだろうな。と思って考えたのだけど。
1. もう書き方がダメ。
Reactのお作法に則ってないウンココードだから、スピードがでない。（すいません、勉強します。
2. 題材がダメ。
VirtualDOMは差分を当てるから早い！みたいなのであれば、今回のパーティクルは全部動いてるから差分もクソもない。
みたいなことかなーと考えたり。たぶんVirtualDOMなりReactなりの理解が足りてない。
もっとしっかりやってQiitaあたりにまとめたい。そして、助けてください←
※追記 2015/02/04
パッチ当てないとrequestAnimationFrameしてくれないはず / “React / SVG / Canvas でパフォーマンス比較してみた。 - ましまろのブログ” http://t.co/pfxdH7U1fV
— 理解者 (@mizchi) 2015, 2月 4
ご指摘いただき、調べたら、
まさにな内容に出会いまして、紹介されてるこいつ
を読んでみました。が、内部で結局setTimeoutで呼んでるぽいな....
