Что такое поток

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

Практический смысл простой. Поток легче процесса, потому что не требует полной изоляции памяти. Но из-за общей памяти появляется цена в виде синхронизации. Если два потока одновременно читают и меняют одни данные без правил, результат может зависеть от порядка выполнения.

На интервью для Frontend Developer не нужно уходить глубоко в алгоритмы планировщика ОС. Достаточно связать определение с реальным UI. Если главный поток браузерной страницы занят тяжелым JavaScript, пользователь видит фризы, задержки кликов и плохую отзывчивость.

В браузере код страницы обычно выполняется на main thread. На нем же завязаны обработчики событий, часть работы по UI и взаимодействие с DOM. Поэтому тяжелый синхронный код на main thread мешает странице реагировать на действия пользователя.

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

Плохой пример:

button.addEventListener("click", async () => {
  const result = heavyCalculation(hugeArray);
  renderResult(result);
});

Слово async здесь не спасает интерфейс, если heavyCalculation работает синхронно и долго. Пользователь нажмет кнопку и увидит зависание, потому что main thread занят вычислением. Это ломает UX: кнопка не реагирует, индикатор загрузки не успевает отрисоваться, ввод и скролл подвисают.

Безопаснее вынести расчет в Worker или разбить работу на короткие порции и дать браузеру отрисовывать UI между ними. Перед запуском покажите loading, заблокируйте повторный запуск, если он опасен, и обработайте ошибку.

Web Worker дает отдельный контекст выполнения для фоновой работы. Упоминайте его как browser API для CPU-тяжелых задач, а не как замену любому асинхронному коду.

У Worker есть важные ограничения. Он не может напрямую работать с DOM, а общается с main thread через сообщения. Данные обычно проходят через structured clone. Для некоторых объектов можно использовать Transferable objects, чтобы передать владение без лишнего копирования.

Упрощенный пример более безопасной идеи:

// main.js
let activeJobId = 0;
let currentWorker = null;

function runCalculation(items) {
  const jobId = activeJobId + 1;
  activeJobId = jobId;

  currentWorker?.terminate();

  const worker = new Worker("/worker.js");
  currentWorker = worker;

  setLoading(true);
  setError(null);

  worker.onmessage = (event) => {
    if (jobId !== activeJobId || worker !== currentWorker) return;

    renderResult(event.data);
    setLoading(false);
    worker.terminate();
    currentWorker = null;
  };

  worker.onerror = () => {
    if (jobId !== activeJobId || worker !== currentWorker) return;

    setError("Не удалось выполнить расчет");
    setLoading(false);
    worker.terminate();
    currentWorker = null;
  };

  worker.postMessage({ items });
}

function cleanupCalculation() {
  activeJobId += 1;
  currentWorker?.terminate();
  currentWorker = null;
  setLoading(false);
}

// worker.js
self.onmessage = (event) => {
  const result = heavyCalculation(event.data.items);
  self.postMessage(result);
};

Это все еще не полный production-код. Но в нем уже видны важные защиты: loading для UI, обработка ошибки, остановка старого Worker и проверка, что поздний результат не перетрет новые данные на экране.

Если вас спрашивают про поток, отвечайте не только определением. Добавьте, что из этого следует для интерфейса: main thread нельзя занимать долгой синхронной работой, потому что это бьет по отзывчивости.

Если задача CPU-тяжелая, подумайте о Worker. Если задача I/O-bound, например ожидание ответа сети, обычно достаточно fetch, промисов, состояния загрузки и нормальной обработки ошибок. Worker здесь часто усложнит код без выигрыша.

Если данные между потоками разделяются напрямую, нужна синхронизация. Во frontend-коде это редкий, но важный advanced-нюанс: SharedArrayBuffer требует аккуратной работы с Atomics и не должен использоваться как простой способ "быстро поделиться объектом".

Короткий вариант:

Поток - это единица выполнения внутри процесса. Потоки могут выполняться независимо и часто делят память процесса, поэтому при общих данных важна синхронизация. Во фронтенде это связано с main thread: тяжелый синхронный JavaScript блокирует UI. Для долгих вычислений можно использовать Web Worker, но он не работает с DOM напрямую и общается с основным потоком сообщениями.

Если хотите усилить ответ, добавьте одну фразу про async:

Promise и async/await не создают новый поток. Они помогают описать асинхронное ожидание, но CPU-тяжелый код все равно нужно выносить или разбивать, иначе интерфейс будет фризиться.