> Почему страница зависает при обработке большого массива в JavaScript (JavaScript)

Зависание страницы при обработке большого массива в JavaScript происходит из-за однопоточной модели выполнения (single-threaded event loop). Когда выполняется синхронный код, например, цикл for с миллионом итераций, он блокирует главный поток (main thread), на котором работает рендеринг, обработка событий и другие задачи. Браузер не может обновить интерфейс или отреагировать на действия пользователя до завершения цикла.

Пример проблемы:

JAVASCRIPT
const bigArray = new Array(10000000).fill(0);
bigArray.forEach(item => {
  // тяжёлая обработка
});
// Пока цикл не закончится, страница "зависнет"

Решения:

1. Разбиение на части с setTimeout - позволяет отдать управление браузеру между итерациями:

   JAVASCRIPT
   function processChunk(array, index = 0) {
     const chunkSize = 1000;
     const chunk = array.slice(index, index + chunkSize);
     // обработать chunk
     if (index + chunkSize < array.length) {
       setTimeout(() => processChunk(array, index + chunkSize), 0);
     }
   }

2. Web Workers - выполняют код в отдельном потоке, не блокируя UI:

   JAVASCRIPT
   const worker = new Worker('worker.js');
   worker.postMessage(bigArray);
   worker.onmessage = (e) => { /* результат */ };

3. requestAnimationFrame - для задач, связанных с анимацией или визуализацией.

4. async/await с микротасками (например, через setTimeout или queueMicrotask) - не решает проблему полностью, так как микротаски всё равно блокируют поток.

Выбор метода зависит от задачи: для фоновых вычислений - Web Workers, для пошаговой обработки с обновлением UI - разбиение на чанки.