在jQuery中更快地替换元素HTML

Question

我正在填充一个包含大约25,000个项目的列表,使用如下代码:

var html = "";
for(var i = 0; i < reallyLongArray.length; i++) {
   html += "<li><a href='#'>Hi</a></li>";
}
$("#list ol").html(html);

令我惊讶的是,我使用了一个分析器,发现我的代码中的瓶颈不是迭代数千次的循环,而是将列表的html设置为字符串.这通常需要我的计算机大约5-10秒,这是一个数量级太慢.

有没有办法做到这一点明显更快,即至少快10倍？

Answer 1

将html包装在一个项目中.当jQuery从字符串构建元素时,它会通过迭代来添加所有顶级项.如果将列表项包装在单个元素中,它应该更快,因为它只需要向dom添加1个顶级元素.

var html = "<ul>";
// your loop...
var html += "</ul>";
// add list html to list container

Answer 2

除了直接使用innerHTML:

$("#list ol").get(0).innerHTML = html;

...并尝试"stringbuffer"技术:

var html = [];
for(i = 0; i < reallyLongArray.length; i++) {
   html.push("<li><a href='#'>Hi</a></li>");
}
$("#list ol").html(html.join(''));

...并不是的.