jQuery并附加大量HTML

Question

我发现如果正确完成,使用jQuery创建HTML客户端可以是一个巨大的性能助推器.我使用AJAX返回JSON来检索动态内容,然后我构建相关的HTML并使用jQuery插入它.我第一次搞砸了这种技术,我发现IE的JavaScript中的字符串连接器的执行速度非常慢,因此构建一个超过50行的动态表执行得非常糟糕.

var shtml = '<table>';
for (var i = 0; i < 100; i++) {
  shtml += '<tr><td>A bunch of content</td></tr>';
}
shtml += '</table>';
$('#myTable').append(shtml);

然后我发现了一种用于字符串连接的技术,它改变了一切.而不是使用sting +=运算符使用数组来进行连接;

var shtml = ['<table>'];
for (var i = 0; i < 100; i++) { 
  shtml.push('<tr><td>A bunch of content</td></tr>');
}
shtml.push('</table>');
$('#myTable').append(shtml.join(''));

我发现性能显着提高.然而,现在,在我开始看到浏览器本身一次性动态插入如此多的内容之前,存在大约100行的上限.有没有人有任何指针或技术可以帮助我实现大型动态HTML的下一个性能提升？

Answer 1

由于它的$ .trim函数,jQuery存在性能问题,并且在DOM中插入了大量的html.

我有时会发现普通的旧dom脚本比使用jquery快得多.尝试类似的东西

document.getElementById('id').innerHTML = myarray.join('')

Answer 2

如果您在服务器端生成 HTML，然后使用 Ajax 检索 html 并将其附加到 DOM，您可能会获得更好的性能。（我假设您无论如何都使用 Ajax 从服务器获取所有数据。）