Что быстрее: appendChild vs append vs ...?

Question

[maksam07]

Доброго времени суток. Недавно начал интересовать вопрос, что использовать, если в блок нужно добавлять много информации. Порядка 10 000 - 1 000 000 строк, типом: <div>строка 1</div>

Изначально я пробовал самый стандартный jQuery: $("#id").append( a.str );
Сразу говорю, в a.str хранится до 1 000 строк, полученные ajax запросом. И путем "setTimeout" эта операция выполняется 1 - 1 000... раз ( точные цифры неизвестны. Тестировал с цифрой 48 )
Результаты меня не очень порадовали т.к. это заняло ~107 секунд ( конечно же я знаю, что время зависит от обработки ajax запроса, поэтому тестов делал до 5 и время указано среднее )

Далее, я нашел такой код:

var div = document.createElement('div');
div.innerHTML = a.str ; 
var target = document.getElementById( "id" );
target.appendChild(div);

Результаты этого кода были впечатляющими. Операция заняла ~50 секунд

Ну и собственно сам вопрос: мне и дальше пользоваться вторым кодом или есть какой-то вариант кода, который будет делать это еще быстрее, либо, может есть какие-то коррективы для моего?

Comments

[alex]

var div = document.createElement('div');
div.innerHTML = a.str ; 
var target = document.getElementById( "id" );
target.appendChild(div);

как этот код может выполняться 50!!! секунд? что-то вы там шаманите не то, выкладывайте полный листинг вашего кода

[maksam07]

Alex: таймер на 48 повторений, каждое повторение добавляет по 1000 строк. Задержка таймера 350 мс + получение ответа сервера форматом JSON и его обработка. Это ведь ajax запрос

[alex]

Максим Компаниец: json как выглядит?

Answer 1

[alex]

создавайте объекты в памяти, а потом вставляйте в DOM

const target = document.querySelector('.target');
const fragment = document.createDocumentFragment();

// create data
const data = ((arr) => {
	for(let i = 0; i < 100000; i++) {
		arr.push(`string${i}`);
	}
	return arr;
})([]);

data.forEach((string) => {
	const div = document.createElement('div');
	div.textContent = string;
	fragment.appendChild(div);
});

target.appendChild(fragment);

Comments

[maksam07]

набросал такой вариант:
https://jsbin.com/yirurexebo/edit?html,output
Ваш, если я не сильно испортил код, то работает не лучшим образом.

[Павел Корнилов]

Максим Компаниец, вариант совершенно не правильный.
Надо так:

Answer 2

[Иван Вишневский]

Есть ещё один вариант - innerHTML.
https://codepen.io/forgetable/pen/xdjmvd
В пене можно открыть консоль и посмотреть скорость создания 20000 объектов.
Всегда нужно помнить, что jQuery примерно в два раза медленнее чистого js, и ещё медленнее оптимизированного.

P.S: Добавил метод с прибавлением append'ом разом - не быстрее.

Comments

[Николай]

есть какие-то доказательства озвученных цифр?

[Иван Вишневский]

Николай: вот, есть бенчмарк, который показывает, почему лучшая практика - это document.getElementById, например:
https://jsperf.com/jquery-vs-javascript-performanc...

[maksam07]

Иван Астапов: я им пользовался, но по цифрам он показал результат схожий с .append
Сейчас попробую провести тесты

[Иван Вишневский]

Максим Компаниец: посмотрите, я кодепен приложил же. в вопросах быстрого добавления вряд ли есть что-то быстрееinnerHTML.

[maksam07]

Иван Астапов: набросал такой вариант:
https://jsbin.com/yirurexebo/edit?html,output

[Иван Вишневский]

Максим Компаниец: мы сейчас о совсем разных вещах говорим. Если нам нужно один раз добавить кучу элементов, то всё совсем иначе.
Переписал часть с innerHTML: https://jsbin.com/fayifibabo/edit?html,output

[maksam07]

Иван Астапов: да, 1 раз добавляется сразу 1 000 строк, и повторение длилось у меня 48 раз. То есть в общей сумме добавлялось 48 000 строк. Сама строка генерировалась в php (ajax запрос) и записывалась в переменную str. После чего этот str нужно было дописать в блок.

Сейчас же поклацал Ваш вариант кода, но appendChild все равно выигрывает в производительности: 13.9 ms - 17.9 ms, против innerHTML: 15.9 ms - 22.1 ms. Делал по 20 кликов на обе кнопки (примерно по 2 клика в секунду).

Если клацать быстро:
appendChild: 15.0 - 25 ms ( тут еще пару раз было ~54 )
innerHTML: 16 - 30.9 ms

И кстати, Как быть с вашим кодом, если у меня строки добавляются не в JS, а возвращаются из запроса? Всесто цикла просто написать html.push( a.str );Или это бессмысленно?

[Иван Вишневский]

Максим Компаниец: всё просто - мы создаём массив, в который записываем данные через push. Потом мы на выход делаем innerHTML(array.join('')); Ещё один аспект - если мы работаем с большим объемом данных, и нам нужно их хранить в переменной, никогда не стоит использовать конкатенацию строк - они складываются в пул и не очищаются из оперативной памяти. Для этого нормальной практикой будет array.join('').

Answer 3

[romy4]

создавай элементы отдельно от DOM, а потом эту новую ветку одним appendChild добавляй

Comments

[romy4]

<script>
// ins.data.txt содержит 10000 строк вида  <div>string 1</div>
$.ajax("ins.data.txt",{dataType:"html", success: doSuccess,crossDomain: true});
function doSuccess(data) {
    var ins = document.getElementById('ins');
    var div = document.createElement('div');
    div.innerHTML = data;
    ins.appendChild(div);
}
</script>
<div id="ins"></div>

меньше секунды

[maksam07]

romy4: примерно такого вида и есть мой JS код. Меня интересовало, правильно я его использую, либо есть еще более экономный вариант

[romy4]

Максим Компаниец: сомневаюсь, что есть