追加到每個迭代內的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]); 
    } 

（很明顯，這種差異顯著只有當您加入了大量元素）完美