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을 렌더링하게하는 유일한 방법은 자바 스크립트를 종료하는 것입니다. 당신은 업데이트 후 다시 코드를 시작 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(""));