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

2019-09-28 18:36:30 阅读：173 来源： 互联网

标签：javascript jquery performance string concatenation

我有一个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的回答,并将更频繁地利用:)

解决方法:

最快的将是这样的：

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

标签：javascript,jquery,performance,string,concatenation
来源： https://codeday.me/bug/20190928/1828522.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

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