7

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

4

9 回答 9

7

由于它的 $.trim 函数，jQuery 和向 DOM 插入大量 html 存在性能问题。

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

document.getElementById('id').innerHTML = myarray.join('')
于 2009-02-27T22:24:27.333 回答
4

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

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

于 2009-02-26T15:46:29.437 回答
3

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

于 2009-02-26T05:10:45.423 回答
1

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

于 2009-02-26T15:52:59.343 回答
1

我认为您可以将 html 拆分为许多部分并一一附加。

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

就像 googleDocs 中的文档行

于 2011-03-22T14:32:30.843 回答
0

Chase 是对的，无论您通过 JavaScript 生成 HTML 的速度有多快，DOM 插入都会杀死您。将任何编程语言与 DOM 联系起来，它会很慢。

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

于 2009-02-26T20:00:14.990 回答
0

在我的情况下，document.getElementById('id').innerHTML = myarray.join('') 也是一个杀手，因为数组有 10 个 HTMl 字符串。连接会创建一个很大的长字符串，并且 nnerHTML 性能在 IE 7 上在 100 毫秒到 1200 毫秒之间显着变化。

有什么线索吗？

于 2009-03-13T04:28:52.407 回答
0

我昨天在添加大量 html 时乱七八糟。我认为在服务器端渲染和插入是要走的路，我也可以补充一点，在我的测试中，不使用 jquery 的速度要快 50-100 毫秒，这里是：

http://programmingdrunk.com/playground

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

于 2009-02-26T05:17:04.300 回答
-1

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

于 2009-02-26T04:48:35.850 回答