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中增加了大约20ms.但我仍然感谢@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;
}

Answer 2

我建议你使用DocumentFragment和使用本机javascript进行这种大规模的DOM操作.我准备了一个例子,你可以在这里查看.

var fragment = document.createDocumentFragment(),
    tr, td, i, il, key;
for(i=0,il=data.length;i<il;i++) {
    tr = document.createElement('tr');
    for(key in data[i]) {
        td = document.createElement('td');
        td.appendChild( document.createTextNode( data[i][key] ) );
        tr.appendChild( td );
    }
    fragment.appendChild( tr );
}
$('#mytable tbody').append( fragment );

我认为这是完成这项工作的最快方式.

Answer 3

最重要的是从dom创建整个表格内容然后插入到表格中.这个镀铬在大约3到5毫秒后结束:

function createTableFromData(data) {
    var tableHtml = '';
    var currentRowHtml;
    for (var i = 0, length = data.length; i < length; i++) {
        currentRowHtml = '<tr><td>' + data[i].join('</td><td>') + '</td></tr>';
        tableHtml += currentRowHtml;        
    }  
    return tableHtml;    
}

var textToAppend= createTableFromData(yourData);
$('#myTable').append(textToAppend);