각 반복 안에 dom에 추가하거나 배열 및 출력을 만드시겠습니까?

Question

json 데이터를 구문 분석하는 a question yesterday을 게시했습니다. 후속 답변 중 하나에서 누군가가 각 반복 (반복) 내에서 jQuery append() 함수를 사용하여 성능을 저하시키고 있다고 말하면서 each()를 사용합니다.

내가 뭐하고 있었 :

$.getJSON("http://myurl.com/json?callback=?", 
    function(data) {   

    // loop through each post 
    $.each(data.posts, function(i,posts){ 

    ... parsing ... 

    // append 
    $('ul').append('<li>...</li>'); 

    }); 

}); 

내가이 수를 수정 :

$.getJSON("http://myurl.com/json?callback=?", 
    function(data) { 

    // create array 
    arrPosts = new Array(); 

     // loop through each post 
     $.each(data.posts, function(i,posts){ 

     ... parsing ... 

     arrPosts[i] = '<li> ... </li>'; 

     });   

     // output 
     for (i=0;i<arrPosts.length;i++){ 
     $('ul').append(arrPosts[i]); 
     } 

    }); 

을 그리고이 올바르게 작동하는 것, 예를 들어 데모 : http://jsbin.com/isuro

을하지만이 일을하고있다 권리? 나는 다소 멍청한 짓을하고 있으며, 내가 올바르게 접근하고 있는지 확인하고 싶다. 어떤 조언을 주셔서 감사합니다!

Answer 1

출력을 반복하지 않아도됩니다.

$('ul').append(arrPosts.join("\n")); 

그렇지 않으면 당신은 여전히 ​​잘못하고있다

Answer 2

잘 보인다. 요점은 루프에서 DOM을 수정하고 싶지 않다는 것입니다. 왜냐하면 너무 느리기 때문입니다.

$('ul').append(arrPosts.join('')); 

Answer 3

대부분의 브라우저에서는 여러 개의 작은 추가를 수행하는 것보다 하나의 큰 HTML 문자열을 추가 할 빨리 될 것입니다 : 당신은 단지 하나의 함수 호출에 그들 모두를 추가 할 수 있도록 배열에 항목을 추가했다. 따라서

$('ul').append(arrPosts.join("\n")); 

이

for (i=0;i<arrPosts.length;i++){ 
    $('ul').append(arrPosts[i]); 
    } 

보다 더 나은 결과를 얻을해야 완벽하게