Нужно в корневой элемент(#root) вставить очень большое количество цветных блоков(40тыс+). Пробовал вставлять фрагментами по 1000 через setTimeout(), но все равно зраузер виснет после 2-3к элементов
-
уточните - что из себя представляет элемент? блоки пользователю видны сразу все? можно сказать пиксели изображения? или по замыслу нужно скролить?– Хацкер16 мая 2020 в 15:06
-
А для чего будут использоваться блоки и о каких цветах идет речь? Может вместо 40к разных блоков легче было бы сделать один большой canvas и рисовать квадратики там? Или использовать CSS-gradient, если цвета повторяются.– OPTIMUS PRIME16 мая 2020 в 20:40
Добавить комментарий
|
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>