documentFragment performance vs. appendChild на непривязанный элемент?

Question

Если я создаю много элементов DOM с Javascript, добавляет их в documentFragment, а затем добавляет фрагмент в документ, предлагая лучшую производительность, чем добавление к unattached элемент, добавляющий этот элемент в DOM ? т.е.

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

while (i < 2000) { 
    el = document.createElement('li'); 
    el.innerText = 'This is my list item number ' + i; 
    fragment.appendChild(el); 
    i++; } 

document.appendChild(fragment); 

против

var el; 
var i = 0; 
var container = document.createElement('div'); 

while (i < 2000) { 
    el = document.createElement('li'); 
    el.innerText = 'This is my list item number ' + i; 
    container.appendChild(el); 
    i++; } 

document.appendChild(container); 

(Примечание:. Это просто упрощенный пример, на мой фактический код, я добавляю много строк таблицы и таблицы элементов)

Благодаря

Answer 1

С первых принципов я бы предположил, что использование фактического элемента обертки должно быть либо быстрым, либо даже незначительно быстрее, чем DocumentFragment. Ускорение приведет к меньшему количеству работы, необходимой для уведомления наблюдателей за мутациями, и один узел должен быть добавлен к дочернему списку вместо распаковки фрагмента и переноса всех его детей в список. Фактически это зависит от базовой структуры данных. массив имел бы более высокую пенительность, чем структура веревки.

Если вы хотите быть уверенным, что вам нужно написать тест и протестировать его во всех основных браузерах, а иногда и повторно тестировать по мере выпуска новых версий с момента их изменения.

Ну, на самом деле вы даже не указали, что используете браузер. Существуют также другие реализации DOM.