Javascript 用500行填充一个表需要长时间的jQuery和引导CSS

灵感来自于对我的评论

在我的电脑上，在Chrome 23中填充500行的表格大约需要15秒。删除引导CSS并不能使其立即生效，但可以显著缩短时间

添加行的实际代码为：

$.each(response, function (idx, row) {
  var new_row = $('#row_template').clone();
  new_row.removeAttr('id');
  $('td[data-name=col1]', new_row).text(row.col1);
  $('td[data-name=col2]', new_row).text(row.col2);
  $('td[data-name=col3]', new_row).text(row.col3);
  $('td[data-name=col4]', new_row).text(row.col4);
  $('td[data-name=col5]', new_row).text(row.col5);
  $('td[data-name=col6]', new_row).text(row.col6);
  $('td[data-name=col7]', new_row).text(row.col7);
  $('td[data-name=col8]', new_row).text(row.col8);
  $('td[data-name=col9]', new_row).text(row.col9);
  $('td[data-name=col10]', new_row).text(row.col10);
  new_row.insertBefore($('#row_template')).show();
});

---

通过连接HTML和

getElementById（）.innerHTML

，我可能会获得非常低的执行时间，但是我可以在保持一些易用性的同时（特别是从模板获取行）进行任何其他明显的优化吗？

只有在表可见的情况下进行优化，速度才会很慢。如果在更改之前隐藏它并在更改之后再次显示它，则速度相当快：

$('#results').hide();

$.each(response, function (idx, row) {
  ...
});

$('#results').show();

---

在这里查看我的解决方案：

不要添加每一行-这意味着重新绘制500次。将它们添加到一个html字符串中，并将其添加到页面中。例如：

一次添加一个
然后再加上
​

jQ:

$（'addmany'）。在（'click'，function（）上{
对于（i=0；我可以同情浏览器……当有人观看时，我的工作速度也会变慢。）SmartK8-这确实很快，但你实际上还没有回答问题，只是链接到了一个答案。这对其他任何人来说都没有任何好处，当他们点击链接时，它不会指向任何地方。链接很好，需要代码，而且更好。是的，这就是它的jist。我倾向于相信JS能够独立工作，加藤：谢谢，我已经在准备更详细的答案了。我只是快速给出了预览答案。我做了一些测试。实际上，如果我们删除
显示：无
或保留
.show（）
。重要的是，在这个过程中，表是隐藏的。我编辑了答案以澄清这一点，请看您是否同意。奇怪。最初的测试用例在Firefox中只需要大约2秒钟。连接或使用模板系统进行连接的性能要高得多，但也考虑到+1，因为对于0.1，这甚至更快比SmartK8的解决方案快0.4s。它的代码很难看，而且牺牲了模板功能。如果有人感兴趣，混合解决方案（获取编辑元素的外部TML，将其连接，然后插入）不会比SmartK8的解决方案快。
<button id="addmany">Add one at a time</button>
<button id="addonce">Conact then add</button>
<table>
</table>​

$('#addmany').on('click', function(){

    for (i=0; i<5000; i++)
    {
        var row=$('<tr><td>test</td></tr>');
        row.appendTo('table');
    }
});

$('#addonce').on('click', function(){
    rows='';
    for (i=0; i<5000; i++)
    {
        var row='<tr><td>test</td></tr>';
        rows=rows+row;
    }
    $(rows).appendTo('table');
});

​