Как динамически сгенерировать и вставить на страницу большое количество DOM элементов?

Question

Нужно в корневой элемент(#root) вставить очень большое количество цветных блоков(40тыс+). Пробовал вставлять фрагментами по 1000 через setTimeout(), но все равно зраузер виснет после 2-3к элементов

Answer 1

const el = document.createElement('div');
el.classList.add('element');

function newClone() {
  const clone = el.cloneNode();
  clone.style.backgroundColor = `hsl(${Math.random() * 360}, 80%, 65%)`;
  return clone
}

function task(iteration = 30) {
  if (!iteration) return;
  requestAnimationFrame(() => {
    root.append(...Array.from({
      length: 1000
    }, newClone));
    task(iteration - 1);
  });
}

task();

.element {
  width: 4px;
  height: 4px;
  display: block;
  float: left;
}

<div id="root"></div>

БЛОГ НА HUSL

Как динамически сгенерировать и вставить на страницу большое количество DOM элементов?

Ответы (1 шт):