Потоки16 / 19

Потоки JavaScript

Где выполняется код страницы и зачем нужен Web Worker.

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

Если в этом потоке запустить долгий расчёт, например генерацию карты, обработчики кликов будут ждать его завершения. Из-за этого игра может перестать отвечать на действия игрока.

Браузер
Основной поток

Код страницы · по очереди

Обработать ввод
Обновить игру
Задание →← РезультатСообщения
Поток Worker

Код задачи · отдельно от страницы

generateMap()Рассчитать карту
Фоновые потоки V8

Часть подготовки кода и работы сборщика мусора.

Основной поток и Worker могут работать одновременно. Внутри каждого потока код выполняется по очереди.

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

Что делает async

Функция с async возвращает Promise.

async function buildMap() {
  return generateMap(); // Still runs on the calling JS thread
}

Здесь generateMap() выполняется в том же потоке, где вызвана buildMap(). Если расчёт долгий, поток всё это время занят. Добавление async не переносит расчёт в Worker.

Основной вывод

Код в одном потоке выполняется по очереди. Для отдельного выполнения JavaScript создают Web Worker. async сам по себе не переносит вычисления в другой поток.

Проверить по первоисточнику ↗

HTML Standard · Web Workers↗Отдельное выполнение JavaScript и обмен сообщениями со страницей.ECMA-262 · AsyncFunctionStart↗Вызов async-функции начинает выполнение её тела в текущем потоке.ECMA-262 · Promise Objects↗Promise представляет результат операции или ошибку.V8 · Background compilation↗Движок может выполнять часть подготовки кода в фоновом потоке.V8 · Orinoco GC↗Часть работы сборщика мусора может выполняться в фоне.