頻繁にDOM要素の内容を変える場合はレイアウトが変わらないように注意する(IE)

先日の「これからドラッグ〜」を家の低スペックマシンの IE6 で動かすと非常に重たかったので調査したところ、ドラッグ＆ドロップ部分は全く関係なくて、ログ表示部分に問題があることがわかりました。

    log: function(msg,e) {
        /* コメントアウトすると軽くなった。
        if( this.logM ) $(this.logM).innerHTML = msg;
        if(e) {
            if( this.logX ) $(this.logX).innerHTML = e.pageX;
            if( this.logY ) $(this.logY).innerHTML = e.pageY;
        }
        */
    }

この部分を軽くするために innerHTML を appendChild に替えたり table 表示をやめたりしたのですがほとんど効果はありませんでした。
最終的には JavaScript は一切変更せずに css を以下のように変更することでパフォーマンスの改善が見られました。

.log {
    width: 50%;
    margin-left: 30px;
    padding: 5px;
    height: 120px;
    overflow: hidden;
}

おそらくこうすることでログ表示後の再レイアウトが行われなくなったんだろうと思います。

.log {
    width: 50%;
    margin-left: 30px;
    padding: 5px;
    position:absolute;
}

でもOKでした。(動作比較デモ)

マシンスペックが十分なら表示上は問題にはならないのですけど、CPU 使用率には10%ほど影響を与えるようです。

overflow無し
overflow有り

暇な方はタスクマネージャを開いて上の動作比較デモでグリグリやってみてください。