Javascript 有效地从 JSON 构建表并将其添加到 DOM

Question

我有一个来自服务器的 JSON 数组，该数组包含 200 个对象，每个对象包含另外 10 个我想以表格格式显示的对象。起初我正在创建一个 <tr>对于每次迭代并使用 jQuery 附加一个 <td>从数组值构建到 <tr> .这在 Chrome 中花费了大约 30 秒，在 IE 8 中花费了 19 秒。这花费的时间太长了所以我尝试切换到 Array.join()。方法，我会将构成整个表的每个字符串存储在一个数组中，最后做 $('#myTable').append(textToAppend) .这实际上比我的第一个版本差了大约 5 秒。

我想将其缩短到 10 秒左右。我有机会吗？如果没有，我将一次添加一行，但我宁愿不这样做。

for(allIndex = 0; allIndex < entries.alumnus.length; allIndex++){

  var entry = '<tr id="entry' + allIndex + '" class="entry"></tr>';
  $('#content_table').append(entry);

  $('#entry' + allIndex).append(($.trim(entries.alumnus[allIndex].title) != '' ?
        '<td id="title' + allIndex + '" class="cell"><span class="content">' +
         entries.alumnus[allIndex].title + '</span></td>' : '<td width="5%">' + 
         filler + '</td>'));    
  .
  .
  .
  .//REST OF ELEMENTS
  .
  .
  .
}   

更新:我昨天一定是搞砸了，因为我回去尝试从 DOM 中追加元素，然后在不使用 jQuery 的情况下附加它们，我已经把时间花在了在 Chrome 中为 85 毫秒，在 IE7 中为 450 毫秒!!!你们真棒!!!我给了 user1 答案，因为那个更全面，使用片段并没有真正改变我在 Chrome 中的时间，在 IE7 中增加了大约 20 毫秒。但我仍然感谢@Emre Erkan 的回答，并且会更频繁地使用 :)

Answer 1

最快的看起来像这样:

var oldTable = document.getElementById('example'),
    newTable = oldTable.cloneNode(true);
for(var i = 0; i < json_example.length; i++){
    var tr = document.createElement('tr');
    for(var j = 0; j < json_example[i].length; j++){
        var td = document.createElement('td');
        td.appendChild(document.createTextNode(json_example[i][j]));
        tr.appendChild(td);
    }
    newTable.appendChild(tr);
}

oldTable.parentNode.replaceChild(newTable, oldTable);

并且应该以毫秒为单位运行。这是一个例子:http://jsfiddle.net/Paulpro/YhQEC/它创建 200 个表行，每个行包含 10 个 td。

您想要使用元素而不是字符串来追加，但是您不想在创建整个结构之前向 DOM 追加任何内容(以避免在循环中重排)。因此，您可以克隆原始表并附加到克隆，然后在循环完成后插入克隆。

通过避免使用 jQuery 并直接与 DOM 交互，您还将获得相当快的速度。

您的代码可能如下所示:

var oldTable = document.getElementById('content_table'),
    newTable = oldTable.cloneNode(true),
    tr, td;
for(var i = 0; i < entries.alumnus.length.length; i++){
    tr = document.createElement('tr');
    tr.id = 'entry' + i;
    tr.className = 'entry';

    if(entries.alumnus[i].title){
        td = document.createElement('td');
        td.id = 'title' + i;
        td.className = 'cell';
        var span = document.createElement('span');
        span.className = 'content';
        span.appendChild(document.createTextNode(entries.alumnus[i].title);
        td.appendChild(span);
        tr.appendChild(td);
        tr.appendChild(createFiller(filler));
    }

    // REST OF ELEMENTS

    newTable.appendChild(tr);

}

oldTable.parentNode.replaceChild(newTable, oldTable);

function createFiller(filler){
    var td = document.createElement('td');
    td.style.width = '5%';
    td.appendChild(document.createTextNode(filler);
    return td;
}