Как оптимизировать парсинг и фильтрацию JSON на 50 тысяч строк, чтобы UI не подвисал из-за однопоточности JS?

Проблема однопоточности

JavaScript выполняется в одном потоке, поэтому длительная синхронная операция, такая как парсинг JSON на 50 тысяч строк, блокирует основной поток. Пока код обрабатывает данные, браузер не может обновлять страницу, обрабатывать клики или прокрутку, что вызывает зависание UI.

Решение: разбиение на части

Вместо того чтобы обрабатывать весь массив за один раз, можно разбить работу на небольшие порции. Каждая порция обрабатывается в отдельном тике event loop, давая браузеру время отрисовать изменения и отреагировать на действия пользователя. Для этого используют setTimeout с нулевой задержкой или requestIdleCallback, который выполняет задачу, когда браузер свободен.

const data = [/* 50k элементов */];
const CHUNK_SIZE = 1000;
let index = 0;

function processChunk() {
  const end = Math.min(index + CHUNK_SIZE, data.length);
  for (; index < end; index++) {
    // фильтрация или парсинг элемента
  }
  if (index < data.length) {
    setTimeout(processChunk, 0); // уступаем поток
  } else {
    console.log('Готово');
  }
}
processChunk();

Web Worker для тяжёлых вычислений

Если обработка очень тяжёлая, лучше вынести её в Web Worker. Worker работает в отдельном потоке и не блокирует UI. Основной поток отправляет данные в worker, worker обрабатывает их и возвращает результат через сообщения.

// main.js
const worker = new Worker('worker.js');
worker.postMessage(largeJSON);
worker.onmessage = (e) => {
  // обновляем UI с результатом
};

// worker.js
self.onmessage = (e) => {
  const data = JSON.parse(e.data);
  const filtered = data.filter(item => item.active);
  self.postMessage(filtered);
};

Практические рекомендации

• Используйте JSON.parse только один раз, а не внутри циклов.
• Для фильтрации больших массивов применяйте filter или reduce, но в сочетании с чанкингом.
• Если данные приходят с сервера, рассмотрите возможность предварительной фильтрации на бэкенде.
• Для визуализации прогресса можно обновлять индикатор после каждой порции.

Вывод

Оптимизация обработки больших JSON-данных сводится к асинхронному разбиению работы или использованию Web Workers. Это сохраняет отзывчивость интерфейса и улучшает пользовательский опыт. Применяйте чанкинг для простых задач, а Web Workers — для сложных вычислений, которые не требуют доступа к DOM.