Middle
Dolazi niz od 2 miliona elemenata, svaki element treba obraditi za 100 milisekundi. Interakcija sa serverom ne može se menjati. Kako obraditi ovaj niz tako da ne blokira UI?
sobes.tech АИ
Одговор од АИ
Чтобы обработать большой массив с длительной обработкой каждого элемента и не блокировать 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, можно вынести обработку туда, чтобы не блокировать главный поток.