Ένα πίνακας με 2 εκατομμύρια στοιχεία φτάνει, κάθε στοιχείο πρέπει να επεξεργαστεί για 100 χιλιοστά του δευτερολέπτου. Η αλληλεπίδραση με τον διακομιστή δεν μπορεί να αλλάξει. Πώς να επεξεργαστείτε αυτόν τον πίνακα ώστε να μην μπλοκάρει το UI;

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