Как определить, что главный поток блокируют долгие вычисления?

Главный поток (main thread) в браузере и в Node.js выполняет JavaScript и обрабатывает события через event loop. Если синхронная функция работает долго, event loop не может перейти к следующей задаче: не обрабатываются клики, не перерисовывается UI, не срабатывают таймеры. Это и есть блокировка главного потока.

Как это заметить

• UI зависает: кнопки не реагируют, анимации дёргаются или останавливаются.
• В браузере в DevTools Performance видны длинные задачи (long tasks) более 50 мс.
• В Node.js растёт event loop lag: setTimeout срабатывает позже ожидаемого.
• Метрики INP и TBT ухудшаются, пользователь чувствует лаги.

Пример проблемы

function heavy() {
  let sum = 0;
  for (let i = 0; i < 1e9; i++) sum += i;
  return sum;
}

button.addEventListener('click', () => {
  const result = heavy(); // блокирует поток на секунды
  console.log(result);
});

Пока выполняется цикл, браузер не может отрисовать даже индикатор загрузки. Пользователь думает, что страница зависла.

Как исправить

1. Вынести вычисления в Web Worker (браузер) или worker_threads (Node.js).
2. Разбить работу на чанки через setTimeout, requestIdleCallback или scheduler.yield.
3. Использовать асинхронные API вместо синхронных (например, fetch вместо синхронного XHR).

const worker = new Worker('heavy.js');
worker.postMessage({ n: 1e9 });
worker.onmessage = (e) => console.log(e.data);

// heavy.js
onmessage = (e) => {
  let sum = 0;
  for (let i = 0; i < e.data.n; i++) sum += i;
  postMessage(sum);
};

Итог: блокировку главного потока стоит искать там, где синхронный код выполняется дольше 50 мс. Для тяжёлых вычислений применяйте воркеры или дробление задач, чтобы сохранить отзывчивость интерфейса и стабильность event loop.