[JavaScript] IE8は要素が増えるとsetTimeoutが遅延する
2012年5月1日
例えば
「10000個の要素を表示したページでsetTimeoutすると
引数へ設定したマイクロ秒よりもかなり遅延してしまう」
というような話です
動作確認ページ
IE8は要素数増加でsetTimeoutが遅延するか
※見難いです、すまそ
※見難いです、すまそ
開発ツールを出した後に「5px 100×100」を押します
10000個の要素が生成されると共に
「前のsetTimeoutからの時間をプリントするsetTimeout」が
ループで実行されます
そして
1. マウスカーソルを10000個のマス目上に置く
2. マウスカーソルをブラウザ上だが10000マス以外の場所に置く
3. マウスカーソルをブラウザ上から外す
4. マウスカーソルをブラウザ上で動かしてみる
という動作をしてみると
コンソール上に流れているsetTimeoutの間隔に差異が生じたり
実行が止まったりするのがわかると思います
原因と解決
結局、詳細不明&未解決です
ただ、おそらくはマウスイベントが大量に発火するのが原因だと思います
マスをdisplay:noneで非表示にすると速度が戻りますし
解決しようとして
マス と マスの親要素 と document.body に対して
elem.detachEvent(elem.onmousemove) をして
全マウスイベントを解除してみましたが変わりませんでした
というところで諦め中のステータスです