jQuery并附加大量HTML

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

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

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

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

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

Answer 1

由于它的$ .trim函数，jQuery存在性能问题，并且在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

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

$("table tr:last").after('

...

');

就像googleDocs中的文档行一样

Answer 5

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

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之间变化很大。

任何c c？

Answer 9

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