Middle
Se recibe un array de 2 millones de elementos, cada uno debe ser procesado durante 100 milisegundos. No se puede cambiar la interacción con el servidor. ¿Cómo procesar este array para no bloquear la interfaz de usuario?
sobes.tech AI
Respuesta de la IA
Чтобы обработать большой массив с длительной обработкой каждого элемента и не блокировать 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, можно вынести обработку туда, чтобы не блокировать главный поток.