Как реализовать таблицу с тяжёлыми вычислениями формул так, чтобы интерфейс не зависал и всё работало плавно?

Проблема производительности таблиц

Когда таблица содержит тысячи строк и сложные формулы, каждая операция ввода или прокрутки может вызывать пересчёт всех зависимых ячеек. Это приводит к блокировке основного потока браузера, из-за чего интерфейс «зависает». Основная задача — минимизировать объём работы, выполняемой синхронно в UI-потоке.

Ключевые подходы

• Виртуализация: рендерить только видимые строки и столбцы, используя библиотеки типа react-virtualized или tanstack-virtual. Это снижает количество DOM-узлов и ускоряет прокрутку.
• Мемоизация: кэшировать результаты формул для каждой ячейки, чтобы при повторном вычислении использовать сохранённое значение, если входные данные не изменились.
• Отложенные вычисления: пересчитывать формулы только для изменённых ячеек и их зависимостей, а не для всей таблицы.
• Web Workers: выполнять тяжёлые расчёты в отдельном потоке, чтобы не блокировать UI. Основной поток получает результат асинхронно.

Пример реализации с мемоизацией

const cache = new Map();
function computeCell(row, col, data) {
  const key = `${row}-${col}`;
  if (cache.has(key)) return cache.get(key);
  // Тяжёлая формула, например, сумма диапазона
  const result = data.slice(0, row).reduce((sum, r) => sum + r[col], 0);
  cache.set(key, result);
  return result;
}

Пример с Web Worker

// worker.js
self.onmessage = (e) => {
  const { rows, formula } = e.data;
  const result = rows.map(row => formula(row));
  self.postMessage(result);
};

// main.js
const worker = new Worker('worker.js');
worker.postMessage({ rows: data, formula: (r) => r.a + r.b });
worker.onmessage = (e) => updateTable(e.data);

Вывод

Для плавной работы таблицы с тяжёлыми формулами комбинируйте виртуализацию, мемоизацию и фоновые вычисления. Это особенно важно для финансовых приложений, редакторов данных и аналитических панелей, где пользователь ожидает мгновенную реакцию на ввод.