1

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

2
  • уточните - что из себя представляет элемент? блоки пользователю видны сразу все? можно сказать пиксели изображения? или по замыслу нужно скролить? 16 мая 2020 в 15:06
  • А для чего будут использоваться блоки и о каких цветах идет речь? Может вместо 40к разных блоков легче было бы сделать один большой canvas и рисовать квадратики там? Или использовать CSS-gradient, если цвета повторяются. 16 мая 2020 в 20:40

1 ответ 1

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>

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.