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(''));

......不是真的。

Answer 3

使用DOM方法创建它应该更快：

var list = ("#list ol");
for(i = 0; i < reallyLongArray.length; i++) {
    $(document.createElement('li'))
        .append($(document.createElement('a'))
            .text('Hi')
            .attr({href: 'foobar'})
        )
        .appendTo(list);
}

编辑：实际上，使用DocumentFragment可以加快速度：

var fragment = document.createDocumentFragment();

for(i = 0; i < reallyLongArray.length; i++) {
    fragment.appendChild($(document.createElement('li'))
        .append($(document.createElement('a'))
            .text('Hi')
            .attr({href: 'foobar'})
        )
        .get(0)
    );
}
$('list ol').append(fragment);

在向其添加元素之前，您可能还需要clear() <ol>

另一个编辑我在http://jsperf.com/insert-html-vs-dom-manipulation创建了一个jsperf测试 - 这两个版本都比设置innerHTML慢（因为jQuery用于创建元素）。使用本机方法使用dom maniuplation要比设置HTML快得多，但最快的方法是使用本机方法在没有jQuery的情况下使用带有DocumentFragment的DOM操作。。

Answer 4

这会加快它的速度。字符串连接可能需要很长时间，因为“引擎盖下”会发生什么。

$(document).ready(function(){
var html = new Array();
for(i = 0; i < reallyLongArray.length; i++) {
   html[i] = "<li><a href='#'>Hi</a></li>";
}
document.getElementById('list').getElementsByTagName('ol')[0].innerHTML = html.join("");

});

这里要注意的一件事是，当进行25,000次迭代时，如果要插入大量记录，则很难将时间缩短到毫秒。这尤其在IE中发生，因为它在插入之前解析每个新元素。构建“寻呼机”并缓存您要插入的项目将大大加快这一点。

Answer 5

数组连接比字符串操作更快。

var html[];

for(i = 0; i < reallyLongArray.length; i++) {
    html.push(string);
}
$(selector).html(html.join(''));

Answer 6

$.grep(ComboBoxData, function (e) {

        if (e.Text.toLowerCase().indexOf(TextBox) != -1 || e.ID.toLowerCase().indexOf(TextBox) != -1) {

            Show = true;
            Result += "<li hdnTextID='" + hdTextID + "' onclick='Select(this," + TextBoxID + ")' onmouseover='triggerTheli(this)' HdntriggerID='" + e.HdntriggerID + "' postBack='" + e.TriggerPostBack + "' Event='" + e.EventName + "' HdnID='" + e.hdnID + "' SelectedValue='" + e.ID + "' style='background:" + Color + "'><a>" + e.Text + "<p> " + e.Description + " </p></a></li>";
            if (Color == "#eff3ec")
                Color = "#fff";
            else
                Color = "#eff3ec";
        }

    });

我的一个很好的例子

在jQuery中更快地替换元素HTML

6 个答案: