fslashtの日記： JavaScriptで大量キャラ表示デモ(DOM操作版) 3
● 3/2版 ベンチマーク結果
描画方式を追加し、「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で書き換えて使用するほうが良いようです。
getElementByIdするだけでメモリー使用量が増えてる・・・ (スコア:2)
Firefoxにて。こんなとこでメモリー食うとは。
計算すると呼び出し１回あたり200byteくらい。
これで参照が渡ってくるだけじゃなくて、なにかオブジェクトがコピーされてるんだろうか。
キャラの数分、getElementByIdで取得した値を変数に保持するようにしたらいいのかなあ。
メモリの使い方に癖が出ますね (スコア:1)
Inner HTML直接書き換えだとKonquerorではひどいチラツキが。ぜひDOMで^^;
メモリ消費量もブラウザによって癖があって面白いですね。
Linuxのブラウザではこんな動きでした。
メモリについては、DOM操作モードで、topのRES (Windowsのワーキングセットに相当) 部分を見た結果です。
■ Konqueror 4.3.4
相変わらずJavaScriptは鬼門。
Inner HTML: 12〜13fpsくらい。という評価以前にチラツキが酷い。
DOM: 全体的にカクカク。10〜14fpsあたりの時期と16〜20fpsあたりの時期が交互に現れる謎挙動。
メモリは初期状態で65MBくらい。じりじり(2〜3秒に1MB)増える。んで、450MB突破してもまるっきり減りません。
実メモリに余裕があるから(3GB以上空いてました)なのか、何かがダダ漏れなのか……
■ Firefox 3.5.6
Windows版とほぼ同じ動きですね。
Inner HTML: 14fps
DOM: 37fps。プチフリは起こっているようないないような……
メモリは90〜140MBあたりを往復。毎秒3MBくらい増加。
■ Chromium 5.0.307.9
これもWindows版とほぼ一緒(？)
Inner HTML: 90fps
DOM: 160fps
メモリ消費については、一番読めない動きを。
初期状態が45MBくらい。
じりじり(2〜3秒に1MB)増える→たまにちょっと減る(数MB)→時々どーんと(数秒にわたって10MB/sくらいずつ)増える、といった繰り返しで段々増える。
もしかして1秒(or 1/n秒)周期で増減していて、topの1秒周期との誤差がうねりとして見えてるのかな。
そのうち140MB〜170MBあたりを行ったり来たりするようになって安定。
巧妙に潜伏したバグは心霊現象と区別が付かない。
Re:メモリの使い方に癖が出ますね (スコア:2)
検証ありがとうございます。
やっぱりどの環境でもDOM操作のほうが速いですね。
innerHTMLは邪道であった。
パフォーマンス的には十分な感じなので、あとはメモリー消費の傾向を安定させたいですね。
いまサーバにあがってる版は、DOM操作に加えdocument.getElementByIdで取得したノードをキャッシュするようになってます。これもそこそこ効果あるらしい。
でも、これやってもFirefoxではメモリー使用量増加傾向はほとんどかわらないんだよなあ・・・なににメモリーくってんだろう・・・