2008-04-16
JavaScriptにおけるドラッグの実装
よく見るのは以下の２つ。
ドラッグ化の対象要素に、マウス中かどうかを示すフラグを持たせる。で、mousedown/mouseup/mousemoveのイベントリスナにフラグの状態に応じた処理をさせる。
mousedown/mousemoveのイベントリスナのみ設定し、mousedownが発生した時にmousemoveのイベントリスナを登録、mouseupが発生した時にmousemoveのイベントリスナを削除する。1のやり方に比べ、イベントリスナの数を少なくできる。
ソース（DraggableType1が1、DraggableType2が2に対応）
どちらの方が重い処理かは大体予想がつくけど、感覚的にどれくらいの差があるか知りたくて実験。
確認用ページ（ボタンに書かれた数字の数だけドラッグ可能な要素を生成します。）
うむ、予想通りの結果。かなりの主観だけど、自分のPC(メモリ:512MB、CPU:PentiumM 1.73GHz)で試した感想を言うと、
Opera- 1つめの実装 - 1000個くらいが限界。
- 2つめの実装 - 1300個くらいが限界。
- 1つめの実装 - 4000個くらいでもまあ使えんことはない。
- 2つめの実装 - 7000個くらいでもまあ使えんことはない。
という感じ。（ていうか、Firefoxすげえ。重いながらもそれなりに動くし。Operaはダメやなあ。。ウェブアプリケーションでも妙に遅いことがあるけど、イベントリスナの数が原因か？）
こんなに大量のイベントリスナを登録することはないと思うけど、JavaScriptで何かを作る場合は他にも色んな処理が絡んでくると思うので、イベントリスナの数はできるだけ少なくなるよう考えよう。
おまけ
今回の確認に使ったページだと、以前にマウスカーソルにmoveを指定した要素をドラッグ可能にするで紹介した方法が一番軽い。Operaでも5000個くらいまで大丈夫。
