javascript - jQuery 和附加大量 HTML

我发现如果使用得当，使用 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 集的下一个性能提升的指针或技术？

最佳答案

jQuery的性能存在问题，由于其$ .trim函数，因此将较大的html字符串插入DOM。

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

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

sHtml

javascript - jQuery 和附加大量 HTML