В чем разница между асинхронностью и многопоточностью?

Разница между асинхронностью и многопоточностью

Асинхронность и многопоточность — это разные способы управления параллелизмом. В JavaScript (как и в браузере) существует одноклиентский механизм, поэтому многопоточность реализуется по-другому, чем в системных языках вроде Java или C++.

Асинхронность

Асинхронность — это способ работать с операциями, которые не требуют немедленного завершения. Код продолжает выполняться, а результат операции обрабатывается позже через callback, Promise или async/await.

// Асинхронная операция с Promise
function fetchUser(id) {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve({ id, name: "John" });
    }, 1000);
  });
}

console.log("Start");
fetchUser(1).then(user => {
  console.log("User:", user);
});
console.log("End");

// Вывод:
// Start
// End
// User: { id: 1, name: "John" }

Особенности асинхронности:

• Одна ветка выполнения (один поток)
• Не блокирует основной поток
• Event loop управляет очередью асинхронных операций
• Идеально для I/O операций (сетевые запросы, чтение файлов)

Многопоточность

Многопоточность — это использование нескольких потоков выполнения, которые выполняются параллельно (на разных ядрах процессора) или чередуются (на одном ядре).

В JavaScript многопоточность достигается через Web Workers:

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

// Отправить данные в worker (другой поток)
worker.postMessage({ data: "Hello from main" });

// Получить результат из worker
worker.onmessage = (event) => {
  console.log("Result from worker:", event.data);
};

// worker.js (отдельный поток)
self.onmessage = (event) => {
  const result = heavyComputation(event.data);
  self.postMessage(result);
};

function heavyComputation(input) {
  // Дорогостоящие вычисления
  let sum = 0;
  for (let i = 0; i < 1000000000; i++) {
    sum += i;
  }
  return sum;
}

Особенности многопоточности:

• Несколько потоков выполнения
• Действительно параллельное выполнение на многоядерных процессорах
• Требует синхронизации доступа к общим ресурсам
• Может привести к условиям гонки (race conditions)

Сравнительная таблица

Event Loop и асинхронность

Event Loop — это механизм, который выполняет асинхронный код в JavaScript:

console.log("1");

setTimeout(() => {
  console.log("2");
}, 0);

Promise.resolve()
  .then(() => {
    console.log("3");
  });

console.log("4");

// Вывод:
// 1
// 4
// 3 (microtask)
// 2 (macrotask)

Event Loop работает в три фазы:

1. Call stack — выполнить синхронный код
2. Microtask queue — выполнить Promise callbacks
3. Macrotask queue — выполнить setTimeout/setInterval

Web Workers и многопоточность

Web Workers позволяют запустить JavaScript в отдельном потоке без блокирования UI:

// Долгий расчёт без блокировки UI
const worker = new Worker("fibonacci.js");

// Прогресс вычисления
worker.postMessage(40);

worker.onmessage = (event) => {
  console.log("Fibonacci(40) =", event.data);
  // UI остался отзывчивым
};

// Остановить worker
worker.terminate();

Когда использовать

Асинхронность:

• Сетевые запросы (fetch, API calls)
• Таймеры и задержки
• Чтение/запись файлов
• Работа с DOM
• Когда нужна простота и читаемость кода

Многопоточность (Web Workers):

• Тяжелые вычисления (фибоначчи, матричные операции)
• Обработка больших данных
• Парсинг больших JSON файлов
• Когда важно не блокировать UI

Практический пример

// Асинхронность — хороша для I/O
async function loadUsers() {
  const response = await fetch("/api/users");
  return response.json();
}

// Многопоточность — нужна для CPU-heavy
const worker = new Worker("calculate.js");
worker.postMessage(data);
worker.onmessage = (event) => {
  console.log("Done:", event.data);
};

Вывод

• Асинхронность — один поток, но операции не блокируют друг друга
• Многопоточность — несколько реальных потоков, выполняющихся параллельно
• В JavaScript основной инструмент — асинхронность через Promise и async/await
• Для по-настоящему параллельных вычислений используй Web Workers
• В браузере нет классической многопоточности (как в Java/C++), есть Web Workers