jQueryループで追加 - DOMは最後まで更新されません

Question

大きなコレクションをループしてDOMに追加すると、DOMはすべてのアイテムが追加された後にのみ更新されます。 append()の呼び出し後にDOMが更新されないのはなぜですか？追加するたびにDOMを強制的にリフレッシュさせることができますか？

var i = 0; 
for (i=0; i<5000; i++) { 
    $('#collection').append('<li>Line Item</li>'); 
} 

Link to jsfiddle

注：私は（DOMリフローを避ける）より良いパフォーマンスは、ローカル変数へのすべての要素を追加して、DOMにその変数を追加することによって達成することができることを理解しています。しかし、すべての要素がレンダリングされるまで、最初のn要素を画面にレンダリングし、次にnをレンダリングします。あなたはしばらく一度のブラウザに制御をお返しする必要が

Answer 1

ブラウザが停止中のほとんどすべてのものJavascriptは実行中です。これには、例えば、DOMレンダリング、イベント処理、イメージアニメーションが含まれます。

DOMをレンダリングさせる唯一の方法は、Javascriptを終了することです。あなたは、更新後に再度コードを開始するsetTimeoutメソッドを使用することができます。

var i = 0; 

function appendSomeItems() { 
    for (var j=0; j<50; i++, j++) { 
    $('#collection').append('<li>Line Item</li>'); 
    } 
    if (i < 5000) window.setTimeout(appendSomeItems, 0); 
} 

appendSomeItems(); 

デモ：http://jsfiddle.net/Uf4N6/

Answer 2

それはあなたが何をしたいのか本当になら...

var i = 0; 
for (i=0; i<5000; i++) { 
    setTimeout(function() { 
     $('#collection').append('<li>Line Item</li>'); 
    }, 0); 
} 

Answer 3

：

var current = 0 


    function draw() { 
     var next = current + 10 
     for(var i = current; i < next; i++) { 
      $('#collection').append('<li>Line Item</li>'); 
     } 
     current = next 
     setTimeout(draw, 50); 
    } 

draw(); 

Answer 4

一般的に、DOMに何度も手を触れないでください。あなたがすでに見てきたように、それはパフォーマンスのキラーです。

var result=""; 
for (i=0; i<5000; i++) { 
    result+='<li>Line Item</li>'; 
} 
$('#collection').append(result); 

このようにして、DOMに一度だけ触れます。

代わりに、配列を使用します。

var result=[]; 
for (i=0; i<5000; i++) { 
    result.push('<li>Line Item</li>'); 
} 
$('#collection').append(result.join(""));