javascript - jQuery 和附加大量 HTML

Question

我发现，如果使用得当，使用 jQuery 创建 HTML 客户端可以极大地提高性能。我使用返回 JSON 的 AJAX 来检索动态内容，然后构建相关的 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('')