変更divのコレクションの表示プロパティがクロム+高速での非直線的な成長を遅らせる

Question

私はページに大きな数（> 1000）のDIVを持っているとします。それは非常に効率的に働く

document.getElementById('div'+i).style.display = 'none'; 

：私は、それらを反復処理し、呼び出す場合はそれぞれ、 'divの' + [0-n]は

の形式のIDを持っています。 2.5k + divで、それらはすべてすぐに消えます。

はしかし、私は、それらを反復処理し、呼び出す場合：

document.getElementById('div'+i).style.display = ''; 

当然のことながら、それが遅くなります。これらの項目は再描画して配置する必要があります。

Explorer 9とFirefox 9では、完全に機能します。

Chrome 15.0.874.121では、ひどく減速します。それは、およそ500 divsまでうまく動作し、その後本質的に壊れます。

これがなぜこのようになるのでしょうか？

また、一度に1つずつ「ブロック」する設定がパフォーマンスに影響しますか？または、JSが完了したら、再描画が完了しますか？ （私はこれがブラウザの違いかもしれないと思います）。表示プロパティを変更するにはどうすればいいですか？

よろしくお願いします。 Daz。

Answer 1

まず、@FritsvanCampenと@Walkerneoのおかげです。彼らの提案は、使用して各要素を非表示にする前に、次の...

をしようとする私を導い：

document.getElementById('div'+i).style.display = ''; 

私は@Walkerneoが提案し、親のdivを非表示にしないと。 @FritsvanCampenが提案したようにして、何かをする前にsetTimeoutを使用します。次のようにコードは次のとおりです。

したがって

document.getElementById('PARENT').style.display = 'none'; 
setTimeout("showAllTheDivs()",1); 

、問題のブラウザ（クローム）、もはや一度のdiv 1を配置しようとしません。

これはバグのようですが、ExplorerやFirefoxでは明らかではないため、この回避策はうまくいくようです。私は人々が1msのタイムアウトで問題を引き起こすと思うかどうか聞いてみたいと思う。今でも十分に良いと思われる！

もう一度@FritsvanCampenと@Walkerneoに感謝します。

Answer 2

連続した呼び出しにsetTimeoutを追加して、ブラウザが間に再描画し、ウィンドウ全体をロックしないようにすることができます。 setTimeoutはかなりの遅延を追加するので、バッチでそれらを行います：~10ms 1コール。

一般に、ブラウザの動作を制御することは不可能です。あるブラウザで動作するものは、別のブラウザではうまく動作しない場合があります。一般的に、最も簡単な解決策を選んで、それが逐次的に修正されるよう祈ってください。

これは質問をします。なぜあなたは1ページに非常に多くのdivを持っていますか？あなたはそれらを1つのdivに入れて表示/非表示にできませんでしたか？