Sobes.tech
Middle

Atnāk masīvs no 2 miljoniem elementu, katrs elements jāapstrādā 100 milisekundēs. Ar servera ar interakciju mainīt nav iespējams. Kā apstrādāt šo masīvu, lai neapstādinātu lietotāja saskarni?

sobes.tech AI

Atbilde no AI

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