Чтобы отрендерить тысячу элементов без зависания браузера, можно разбить рендеринг на небольшие части и выполнять их асинхронно, используя Event Loop. Это позволяет браузеру обрабатывать пользовательские события и обновлять интерфейс между партиями рендеринга.

Один из подходов — использовать requestIdleCallback или setTimeout для поэтапного добавления элементов:

const container = document.getElementById('list');
const items = new Array(1000).fill(null).map((_, i) => `Элемент ${i + 1}`);

function renderChunk(start, chunkSize) {
  const end = Math.min(start + chunkSize, items.length);
  for (let i = start; i < end; i++) {
    const div = document.createElement('div');
    div.textContent = items[i];
    container.appendChild(div);
  }
  if (end < items.length) {
    // Отложенный вызов следующей части
    setTimeout(() => renderChunk(end, chunkSize), 0);
  }
}

renderChunk(0, 50); // Рендерим по 50 элементов за раз

Так браузер не блокируется, так как между партиями рендеринга Event Loop может обрабатывать другие задачи, например, пользовательские события или перерисовку.

Как можно отрендерить тысячу элементов без зависания браузера, используя знание Event Loop?