JavaScriptで大量キャラ表示デモ(DOM操作版)

　描画方式を追加し、「innerHTML書き換え」に加え「DOM操作」を実装しました。

【デスクトップ / Core2Duo E7500@2.93GHz / WindowsXP SP3】 IE6.0 　innerHTML書き換え 15fps/200個 (画像は、32x32.gif) 　DOM操作 22fps/200個 FireFox3.6 　innerHTML書き換え 23fps/200個　DOM操作 52fps/200個 Chrome4.0 　innerHTML書き換え 90fps/200個 (60fps程度になる瞬間がある) 　DOM操作 150fps/200個

　DOM操作版が格段に速いです。Firefoxでは２倍です。
　DOM操作では予めノードを作成しておき、各フレームでは位置のみを移動しています。
※ しかしDOM操作にしてもあまり速くならない場合がある。リロードすると直ったりする。原因不明

● Firefoxでのプチフリ (3/2)

　Firefox3.6で動かしていると、ときどき一瞬動きが止まります。
　タスクマネージャーでプロセスをみていると、メモリー使用量が毎秒数メガずつ増加しており、ある一定量になると（ガベージコレクションが働くのか）最初の容量までやるのですが、その際に一瞬止まるようです。
　手元の環境では68MByte→132MByteへの増加をくり返しています。
　増加量は、描画方式によって異なりました。

innerHTML書き換え 68MByte→132MByte (毎秒7Mbyte程度増加) DOM操作 68MByte→132MByte (毎秒4Mbyte程度増加)

　DOM操作では極一瞬止まるように感じますがかなり軽減されました。
※ でも、DOM操作でもメモリー使用量が増えるのは０には出来ないようだ。こればかりはどうしようもないのか？

　また、Chromeでは以下のようになりました。

innerHTML書き換え 44MByte→69MByte (めまぐるしく変わる) DOM操作 46MByte→61MByte (めまぐるしく変わる)

　IE6.0では、どちらでも35Mbyte程度であまり変化はありませんでした（数キロずつ増加はしているようだ）

● innerHTML書き換えよりDOM操作のほうが速い

　ベンチマークの結果からDOM操作のほうがinnerHTML毎回書き換えよりかなり高速であることがわかりました。
・fps → DOM操作の方が速い。Firefoxでは２倍近い
・メモリー消費量 → DOM操作の方が、増加量が少ない。Firefoxでのプチフリも軽減される。

　ゲームを作成するには、予めノードを非表示で作成しておいて、必要の応じてDOMで書き換えて使用するほうが良いようです。