IE、Javascript and Reflow

Question

私は多数のdomノード（> 5000）のCSS表示（ 'ブロック'、 'なし'）を変更するjavascript関数を持っています。私はこれを可能な限り速くしようとしています。

IEはjavascriptを中断して画面を再描画し、画面をペイントするか、JavaScriptエンジンがブラウザに制御を戻すまで待ち​​ますか？私は、すべてのノードがディスプレイをセットするまで、ブラウザから余分な作業を避けたい。私はjQueryのショー（）メソッドに気づい

、DOM操作は一定のリフローを避けるために、第二のループ
//内の要素の表示を設定コメント

//との緊密なループに入れている

（http://code.google.com/p/jqueryjs/source/browse/trunk/jquery/src/fx.jsライン51）

おかげで、

ジェームズ

Answer 1

共通の親を隠してから要素を隠してから親を表示すると、不必要に再描画されないようにする必要があります。

Answer 2

JSは各要素を変更するため、ブラウザはページをリフローします。あなたが示唆しているように、最後まで表示を変えないでください。これはまた、ユーザーにとってよりスムーズかつ速く感じます（本当でなくても）。

Iだろう：

1. クローン処理したいノードをラップしたノード。
2. クローンノードの子の処理を行います。
3. 元のノードをクローンで置き換えます。

処理が長い時間（秒以上0.5）ユーザーが何かが起こっていることを知らせるために、ディスプレイ上で何かを設定することを検討を要する場合。オリジナルのコンテンツをゆっくりと約50％の不透明度までゆっくりとフェードアウトさせるのは簡単な方法です。

Answer 3

親要素のクラス名を変更することで、CSSを使用して要素を表示したり非表示にしたりできます。私がしばらくして行ったテストでは、各要素のdisplayプロパティを設定するよりも約10倍速いことがわかりました。単一のアトリビュートのみを変更しているので、それは一度リフローされます。

例：

<style> 
.State1 .InitiallyHidden { display: none; } 
.State2 .InitiallyShown { display: none; } 
</style> 

<script> 
function flip() { 
    var o = document.getElementById('Parent'); 
    o.className = o.className = 'State1' ? 'State2' : 'State1'; 
} 
</script> 

<input type="button" value="flip" onclick="flip();" /> 

<div id="Parent" class="State1"> 
    <div class="InitiallyHidden">One</div> 
    <div class="InitiallyShown">Two</div> 
    <div class="InitiallyHidden">Three</div> 
    <div class="InitiallyShown">Four</div> 
</div>