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

jQuery存在性能问题，并且由于其$ .trim函数而向DOM插入大量html。

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

这样的东西

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

Answer 2

请注意，速度瓶颈通常不是创建DOM，而是插入 DOM。在具有复杂样式表的IE以及新内容包含多级嵌套标记时尤其如此。

请参阅：http://bitkickers.blogspot.com/2008/12/ajax-grid-performance-in-ie.html

Answer 3

您是否考虑过使用模板库？例如PURE具有非常好的性能（尝试500行示例）。

Answer 4

尝试克隆DOM本身的部分而不是动态生成它（即附加实际的DOMElements，这样就不必创建它们。）

Answer 5

我认为你可以在很多部分拆分html并逐个追加。

$("table tr:last").after('<tr>...</tr>');

与googleDocs中的文档行一样

Answer 6

我昨天附加了大量的HTML。我认为在服务器端进行渲染和插入是可行的方法，也可以补充说，在我的测试中，不使用jquery的速度提高了50-100ms，其中包括：

http://programmingdrunk.com/playground

您需要启用firebug控制台才能查看速度结果

Answer 7

Chase是对的，你通过JavaScript生成HTML的速度并不重要，它是可以杀死你的DOM插入。将任何编程语言与DOM结合起来都会很慢。

我唯一的建议是将表分页，这样你就不会一次加载这么多，或者根本不使用AJAX。

Answer 8

就我而言，document.getElementById（'id'）。innerHTML = myarray.join（''）也是一个杀手，因为数组有10个HTMl字符串。在IE 7上，连接将创建一个很长的字符串，并且nnerHTML性能在100ms到1200ms之间变化很大。

任何问题？

Answer 9

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

jQuery并附加大量HTML

9 个答案: