Ein Array mit 2 Millionen Elementen kommt an, jedes Element muss 100 Millisekunden verarbeitet werden. Die Interaktion mit dem Server darf nicht geändert werden. Wie verarbeitet man dieses Array, um die Benutzeroberfläche nicht zu blockieren?

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