Оптимизация, добавляющая <li>в <ul>с помощью jQuery

Question

Я заполняю список результатами поиска, добавляя li элементов.Я обновляю DOM для каждого результата.

for (var i = 0; i < topics.length; i++) {
    $("#searchResults").append(
        $("<li />")
            .append(result.Name)
            .addClass("example")
    );
};

Я хочу сначала создать группу из li элементов и обновлять дерево DOM только один раз.

Я пытаюсь что-то вродеэто:

var list = $([]);

for (var i = 0; i < topics.length; i++) {
    list.append(
        $("<li />")
            .append(result.Name)
            .addClass("example")
    );
};

$("#searchResults").append(list);

Но div $("#searchResults") пусто.

В чем проблема?

Answer 1

Примерно так должно быть намного быстрее:

var ul = $("<ul />");
for (var i = 0, l=topics.length; i < l; i++) {
   $("<li />", { text: result.Name, "class": "example" }).appendTo(ul);
};
$("#searchResults").append(ul.contents());

Используя фрагмент документа ($("<ul />")) и добавляя к нему, а затем добавляя в конце, мы не связываемся со всем DOM каждого добавления. Кроме того, мы не выбираем #searchResults каждый цикл ... или проверка .length также может быть дорогой.

Примечание: этот метод по-прежнему использует DOM для создания элементов (в отличие от строки), устраняя проблемы, связанные с result.Name наличием HTML, который может испортить ситуацию и т. Д.

Answer 2

Все предыдущие решения по-прежнему страдают от пересчета, окраски и компоновки для каждого добавляемого нами элемента.

Вместо добавления элементов непосредственно в документ при их создании, вместо этого добавьте их в DocumentFragment и завершите добавление этого в DOM.

var el;
var i = 0;
var fragment = document.createDocumentFragment();

while (i < 500) {
    el = document.createElement('li');
    el.innerText = '1ist ' + i;
    fragment.appendChild(el);
    i++;  
}

div.appendChild(fragment);

Answer 3

Создание элементов DOM на лету обычно будет медленнее, чем просто использование innerHTML (или оболочки вокруг него). Кроме того, объединение строки с + будет обычно медленнее, чем с использованием Array.join('').

В конце концов, я подозреваю, что что-то вроде этого будет самым быстрым:

var list = [];

for (var i = 0; i < topics.length; i++) 
    list.push("<li class=example>",topics[i].Name,"</li>");

$("#searchResults").html(list.join(''));

Answer 4

Попробуйте просто использовать строку.Добавьте все свои li в строку и затем поместите их в innerHTML searchResults div.

var list = '';

for (var i = 0; i < topics.length; i++) {
    list +="<li class=example>" + result.Name + "</li>";
}

$("#searchResults").innerHTML = list;

Если вы ищете эффективность, это, вероятно, лучше, потому что вы немного использую движки DOM.(хотя, если вы не добавите сотни li, это, вероятно, незначительно.