Senior

Comment rendre mille éléments sans faire planter le navigateur, en utilisant la connaissance de l'Event Loop?

sobes.tech IA

Réponse de l'IA

Чтобы отрендерить тысячу элементов без зависания браузера, можно разбить рендеринг на небольшие части и выполнять их асинхронно, используя 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 может обрабатывать другие задачи, например, пользовательские события или перерисовку.

Précédent Suivant