Un tableau de 2 millions d'éléments arrive, chaque élément doit être traité pendant 100 millisecondes. L'interaction avec le serveur ne peut pas être modifiée. Comment traiter ce tableau pour ne pas bloquer l'interface utilisateur?

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

Пример подхода с использованием setTimeout или requestIdleCallback:

function processChunk(array, start, chunkSize) {
  const end = Math.min(start + chunkSize, array.length);
  for (let i = start; i < end; i++) {
    // Обработка элемента, занимает ~100ms
    processElement(array[i]);
  }
  if (end < array.length) {
    setTimeout(() => processChunk(array, end, chunkSize), 0);
  }
}

processChunk(largeArray, 0, 10); // обрабатываем по 10 элементов за раз

Так UI не будет заморожен, так как между партиями даётся время на отрисовку и обработку событий.

Если доступен Web Worker, можно вынести обработку туда, чтобы не блокировать главный поток.