Anhängen an das Dom innerhalb jeder Iteration oder Erstellen eines Arrays und Ausgabe?

Question

Ich postete a question yesterday Umgang mit JSON-Daten analysieren. In einer der Follow-up-Antworten sagte jemand, dass ich einen Performance-Hit genommen habe, indem ich die Funktion jQuery append() innerhalb jeder Iteration verwendet habe, während ich each() verwende.

ich tat:

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

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

    ... parsing ... 

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

    }); 

}); 

ich es geändert, dies zu sein:

$.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]); 
     } 

    }); 

Und dies scheint richtig zu funktionieren, zB Demo: http://jsbin.com/isuro

Aber mache ich das Recht? Ich bin ein wenig noob und möchte nur sicherstellen, dass ich mich dem richtig annähere. Danke für jeden Hinweis!

Answer 1

Sie sollten nicht iterieren müssen, um auszugeben.

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

sieht sonst feine

Answer 2

Sie sind es immer noch falsch. Der Punkt ist, dass Sie DOM nicht in einer Schleife ändern wollen, weil es nur so langsam ist. Sie wurden Elemente zu einem Array hinzugefügt, so dann können Sie einfach alle von ihnen in einem Funktionsaufruf hinzufügen:

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

Answer 3

In den meisten Browsern wird es schneller sein, eine große HTML-String anhängen als mehrere kleine Appends auszuführen. So

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

Sollte bessere Ergebnisse erzielen als

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

(Offensichtlich ist dieser Unterschied signifikant ist nur, wenn Sie eine große Anzahl von Elementen hinzufügen)