16

大きなコレクションをループして DOM に追加する場合、DOM はすべての項目が追加された後にのみ更新されます。append()各呼び出しの後に DOM が更新されないのはなぜですか? 各追加後 (または追加回数 n 回ごと) に DOM を強制的に更新することはできますか?

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

jsfiddle へのリンク

注: すべての要素をローカル変数に追加し、その変数を DOM に追加することで、パフォーマンスを向上させる (DOM リフローを回避する) ことができることを理解しています。しかし、すべての要素がレンダリングされるまで、最初の n 要素を画面にレンダリングし、次に次の n 要素をレンダリングする必要があります。

4

4 に答える 4

15

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/

于 2013-09-27T19:49:46.817 に答える
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();
于 2013-09-27T19:49:42.847 に答える
-3

一般に、DOM に何度も触れないようにしてください。すでにお気づきのように、これはパフォーマンス キラーです。

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

このように、DOM に触れるのは 1 回だけです。

別の方法は、配列を使用することです。

var result=[];
for (i=0; i<5000; i++) {
    result.push('<li>Line Item</li>');
}
$('#collection').append(result.join(""));
于 2013-09-27T19:57:50.813 に答える
-4

それが本当にやりたいことなら…

var i = 0;
for (i=0; i<5000; i++) {
    setTimeout(function() {
        $('#collection').append('<li>Line Item</li>');
    }, 0);
}
于 2013-09-27T19:45:19.977 に答える