在 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 从字符串构建元素时，它会通过迭代添加所有顶级项目。 如果将列表项包装在单个元素中，它应该 go 更快，因为它只需向 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 操作与本机方法一起使用比设置 HTML 快得多，但在很大程度上，最快的方法是在没有 jQuery 的情况下使用本机方法的 DocumentFragment 进行 DOM 操作。

Answer 4

$.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";
        }

    });

我的一个很好的例子

Answer 5

这将大大加快速度。 由于“幕后”发生的事情，字符串连接在大量使用时可能需要很长时间。

$(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 6

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

var html[];

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