@maksam07

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

Доброго времени суток. Недавно начал интересовать вопрос, что использовать, если в блок нужно добавлять много информации. Порядка 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 секунд

Ну и собственно сам вопрос: мне и дальше пользоваться вторым кодом или есть какой-то вариант кода, который будет делать это еще быстрее, либо, может есть какие-то коррективы для моего?
  • Вопрос задан
  • 4698 просмотров
Пригласить эксперта
Ответы на вопрос 3
potapchino
@potapchino
создавайте объекты в памяти, а потом вставляйте в 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);
Ответ написан
@forgetable
Node/Flutter/C++
Есть ещё один вариант - innerHTML.
https://codepen.io/forgetable/pen/xdjmvd
В пене можно открыть консоль и посмотреть скорость создания 20000 объектов.
Всегда нужно помнить, что jQuery примерно в два раза медленнее чистого js, и ещё медленнее оптимизированного.

P.S: Добавил метод с прибавлением append'ом разом - не быстрее.
Ответ написан
romy4
@romy4
Exception handler
создавай элементы отдельно от DOM, а потом эту новую ветку одним appendChild добавляй
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы