Javascript有效地从JSON构建表并将其添加到DOM [英] Javascript Effectively Build Table From JSON and Add It to DOM

问题描述

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

I have a JSON array coming in from the server with an array of 200 objects each containing another 10 objects that I want to display in a table format. At first I was creating a <tr> for each iteration and using jQuery to append a <td> built from the array values to the <tr>. This was taking around 30 seconds in Chrome and 19 seconds in IE 8. This was taking too long so I tried switching to the Array.join() method, where I would store each string that would make up the entire table in an array, and at the end do $('#myTable').append(textToAppend). This actually performed worse than my first version by around 5 seconds.

我希望将其延长到10秒左右.我有机会吗?如果没有，我只会一次添加一行，但我不想这样做.

I would like to get this to around 10 seconds. Do I have any chance at that? If not, I'm just gonna add one row at a time, but I'd rather not do that.

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中增加了大约20ms.但我仍然感谢@Emre Erkan的回答，并且会更频繁地使用它:)

UPDATE: I must have messed something up yesterday, because I went back to trying appending elements out of the DOM and then attaching them later, without using jQuery and I've gotten my time down to 85 ms in Chrome and 450 ms in IE7!!! You guys are awesome!!! I gave user1 the answer because that one was more comprehensive, and using fragments didn't really change my times much in Chrome and added around 20ms in IE7. But I still appreciate @Emre Erkan's answer, and will utilize more often :)

推荐答案

最快的将是这样的:

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吨.

And should run in milliseconds. Here is an example: http://jsfiddle.net/Paulpro/YhQEC/ It creates 200 table rows each containing 10 td's.

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

You want to append using elements, not strings, but you don't want to append anything to the DOM until you're done creating the entire structure (to avoid reflow in your loop). So you can clone the original table and append to the clone, then insert the clone after your loop completes.

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

You will also gain a fair bit of speed by avoiding jQuery and interacting with the DOM directly.

您的代码可能如下:

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

这篇关于Javascript有效地从JSON构建表并将其添加到DOM的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！