如何优化DOM插入循环

时间:2016-05-21 05:20:15

标签: javascript jquery loops optimization

例如:我想在这样的表中插入许多tr

var tbody = $('#tbody') 
  // Suppose the articlelist is the data from ajax 
    while (articlelist.length > 0) {
        var article = articlelist.shift(),

        var tr = $(' <tr>'
           +' <td>'+article.id+'</td>'
            +'<td>' + article.channelid +'</td>'
           + '<td>'+article.comment+'</td>'
           +'<td>'+article.last_edit_time+'</td><td>'

         )
        tbody.append(tr)
    }

避免在循环中创建<tr>...</tr>。是否可以使用类生成tr内容?

3 个答案:

答案 0 :(得分:2)

您可以使用循环来连接所有字符串,然后一次性附加这个冗长的字符串。这有助于提高许多tr的性能

var tbody = $('#tbody') 
var rows = ''
while (articlelist.length > 0) {
    var article = articlelist.shift(),

    rows += '<tr><td>'+article.id+'</td>'
       +'<td>' + article.channelid +'</td>'
       + '<td>'+article.comment+'</td>'
       +'<td>'+article.last_edit_time+'</td><tr>';
}  
tbody.append(rows)

答案 1 :(得分:2)

优化版本:

Si tú no estáss yo no voy a lloraar por tiii
Me respondes porfavor?? ❤ piensas venir a Ecuador
cosas veredes!!!! Ay Papá. 
   what y'all know about this?
❤️‼️  ❤️‼️ tag  they make the final decision 
Vähän on twiitattavaa muuta kuin että aijjai ja oijjoi sekä nannaa. 
Binta On est arrivé au chicken elle voulait pleuré carrément tellement elle était heureuse 
ja mir fällt nix mehr ein
Někdo v pátek semnou na flédu na Moju reč??? 

答案 2 :(得分:0)

添加这样的功能来为你做这件事。

while (articlelist.length > 0) {
    make_content(article);
}

function make_content(article) {
     var tbody = $('#tbody');
     var tr = $(' <tr>'
       +' <td>'+article.id+'</td>'
        +'<td>' + article.channelid +'</td>'
       + '<td>'+article.comment+'</td>'
       +'<td>'+article.last_edit_time+'</td><td>'

     )
    tbody.append(tr)
}