各繰り返しの内側にdomを追加するか、配列と出力を作成しますか？

Question

私はa question yesterdayを投稿し、jsonデータを解析しました。フォローアップの回答のひとつで、誰かがそれぞれの反復で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]); 
    } 

よりも良い結果が得られるはず（もちろん、この違いは、多数の要素を追加している場合にのみ重要です）

完璧に動作