如何优化 DOM 插入循环答案

【问题标题】：How to optimize the DOM inserting loop如何优化 DOM 插入循环
【发布时间】：2016-09-18 10:57:52
【问题描述】：

例如：我想在这样的表中插入许多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内容？

【问题讨论】：

@PranavCBalan 是不是 clone() 可以插入自定义数据，比如 ID
$('.your-tr-class').clone().html('td html code here')
@snookieordie 优秀
如果你关心性能，你可以试试其中一个虚拟 DOM 库，比如 React、Riot.js 等等

标签： javascript jquery loops optimization

【解决方案1】：

添加这样的函数来为您执行此操作。

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)
}

【讨论】：

【解决方案2】：

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

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)

【讨论】：

用tbody.append(rows)替换这个tbody.append(tr)

【解决方案3】：

优化版本：

var tbody = $('#tbody'),        
    htmlStr = "";

for (var i = 0, len = articlelist.length; i < len; i++) {  // avoid accessing 'length' property on each iteration
     htmlStr += '<tr><td>' + articlelist[i].id + '</td>'
                + '<td>' + articlelist[i].channelid + '</td>'
                + '<td>' + articlelist[i].comment + '</td>'
                + '<td>' + articlelist[i].last_edit_time + '</td><td><tr>';        
}
tbody.append(htmlStr); // parses the specified text as HTML or XML and inserts the resulting nodes

【讨论】：