在jQuery中更快地替换元素HTML

Replace element HTML faster in jQuery

本文关键字：替换 元素 HTML jQuery      更新时间：2023-09-26

我正在使用以下代码填充一个包含大约25000个项目的列表：

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倍？

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

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

除了直接使用innerHTML:

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

尝试"字符串缓冲区"技术：

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

不是真的。

使用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);
}

edit：实际上，使用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);

在将元素添加到<ol> 之前，您可能还希望clear()

另一个编辑我在http://jsperf.com/insert-html-vs-dom-manipulation-这两个版本都比设置innerHTML慢(因为jQuery用于创建元素(。将dom操纵与本机方法一起使用要比设置HTML快得多，但最快的方法是在很大程度上使用dom操纵与DocumentFragment，而不使用jQuery，使用本机方法。

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

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

这将大大加快速度。字符串串接在大量使用时可能需要很长时间，因为"隐藏"会发生这种情况。

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

这里需要注意的一点是，当执行25000的迭代时，如果要插入大量记录，则很难将时间减少到毫秒。这种情况尤其发生在IE中，因为它在插入每个新元素之前都会对其进行解析。构建一个"寻呼机"并缓存要插入的项将大大加快速度。

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

我的的一个很好的例子

相关文章：