Замените элемент HTML быстрее в jQuery

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 строит элементы из строки, он добавляет все элементы верхнего уровня, перебирая их.Если вы оберните элементы списка в один элемент, он должен работать намного быстрее, потому что нужно добавить только 1 элемент верхнего уровня в dom.

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

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

Возможно, вы также захотите clear() <ol> перед добавлением к нему элементов

другое редактирование Я создал тест jsperf в http://jsperf.com/insert-html-vs-dom-manipulation - обе эти версии медленнее, чем установка innerHTML (потому что для создания элементов используется jQuery). Использование dom-манипуляции с нативными методами намного быстрее, чем установка HTML, НО самый быстрый способ с большим отрывом - использовать DOM-манипуляции с DocumentFragment без jQuery, используя нативные методы .

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

Соединения с массивами выполняются быстрее, чем манипуляции со строками.

var html[];

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

Answer 6

Это немного ускорит его. Конкатенация строк при длительном использовании может занять много времени из-за того, что происходит «под колпаком».

$(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, так как он анализирует каждый новый элемент перед его вставкой. Создание «пейджера» и кэширование элементов, которые вы собираетесь вставить, значительно ускорит это.