HTML / Производительность: обработка массивной динамической вставки DOM

Question

У меня 464 объекта JSON. Элемент HTML должен быть сгенерирован из каждого из этих элементов и вставлен в div в последовательном порядке. Какой будет самый быстрый способ сделать это?

A) Цикл по объектам, создание разметки для каждого, объединение их всех и установка innerHTML контейнера div в сцепленную разметку:

document.getElementById("container").innerHTML = 
    jsonItems.map(function(item) {
        return convertToHTMLString(item);
    }).join("");

B) Цикл по объектам, создание узла DOM для каждого и последовательная вставка каждого в контейнер:

var container = document.getElementById("container");

jsonItems.forEach(function(item) {
    container.appendChild(convertToDOMNode(item));
});

C) Перебрать объекты, генерируя DOM-узел для каждого, последовательно добавляя их к DocumentFragment, затем вставляя фрагмент в контейнер:

var fragment = document.createDocumentFragment();

jsonItems.forEach(function(item) {
    fragment.appendChild(convertToDOMNode(item));
});

document.getElementById("container").appendChild(fragment);

Answer 1

Тест

Правильный ответ, пожалуйста, сравните его сами:)

Я лично считаю, .innerHTML - это дьявол , поэтому используйте документфрагменты.

И я думаю, что мы все знаем, что фрагменты документа лучше, чем вводить данные непосредственно в DOM.Это та же самая логика, что и рендеринг материала с экрана и его замена.

Answer 2

У нас была такая же проблема некоторое время назад, не в таком масштабе, но достаточно большая. В итоге мы создали HTML на уровне сервера (потому что он быстрый), используя привязку, а затем добавили отправленный фрагмент HTML к родительскому элементу div один раз на стороне клиента в случае успешного обратного вызова вызова ajax. Это было быстрее, чем любой другой метод, который вы описали здесь, и размер ответа (использование трафика) увеличился только на 20 КБ, что в нашем случае было приемлемым. Надеюсь, что это поможет:)

Answer 3

Производительность innerHTML против DOM будет не такой значительной по сравнению с подходом, который вы используете для генерации узлов.Я уверен, что innerHTML будет быстрее, если функция convertToHTML работает быстрее, чем другие.innerHTML выполняет только один вызов DOM, и его машинный код браузера анализирует строку, создает узел DOM и внедряет его в DOM за один раз.Это должно быть самым быстрым из всех подходов JavaScript, которые интерпретируют код.Если вы можете заставить ConvertToHTML превзойти все другие функции преобразования, чем innerHTML - самый быстрый.

Answer 4

Я бы использовал DocumentFragment. Я бы определенно не использовал вариант 2, потому что это потребует повторного рендеринга страницы при каждой вставке. Проверьте тест скорости, сделанный на этом предмете г-ном. JQuery себя, J. Resig. Он предлагает использовать DocumentFragment, поскольку он обеспечивает увеличение производительности в 2-3 раза при тестировании.

http://ejohn.org/blog/dom-documentfragments/

Answer 5

B будет самым медленным наверняка, почти все руководства по js рекомендуют не делать этого.С другой стороны, C тоже может быть медленным, поскольку appendChild - это модификация DOM, которая всегда медленнее.Существует также более старый эксперимент, который вы можете запустить на странице самостоятельно: http://andrew.hedges.name/experiments/innerhtml/