open atlas
↑ К треку
Внутренности движка JavaScript JSE · 00 · 01

Что такое движок JavaScript

Движок JS превращает исходный текст в работу процессора: парсит, компилирует в байт-код, интерпретирует, затем JIT-оптимизирует горячие участки — а сборщик мусора освобождает память. Движок против рантайма и карта этого трека.

JSE Основы ◷ 10 min
Уровень
ОсновыJuniorMiddleSenior

Вы пишете arr.map(x => x * 2), и это работает. Но ничто в вашем процессоре не понимает map, стрелочные функции или * над числом JavaScript. Что-то должно перевести этот текст в те немногие целочисленные инструкции и инструкции с плавающей точкой, которые кремний действительно исполняет — и решить прямо во время работы программы, какие части стоит скомпилировать в быстрый машинный код. Это «что-то» и есть движок.

За следующие десять минут вы увидите, какая именно стадия отвечает за «медленный JavaScript» — и почему исправление требует работы с движком, а не в обход него.

Движок — это программа, которая исполняет вашу программу

Движок JavaScript — это нативная программа (V8 — это примерно два миллиона строк C++), на вход которой подаётся исходный текст JavaScript, а на выходе — работа процессора. Это не чёрный ящик: это конвейер из хорошо изученных стадий, и у каждой стадии есть «характер» по производительности, который можно наблюдать и на который можно влиять.

Наивная модель — «JavaScript интерпретируется строка за строкой» — неверна уже больше десяти лет. Современные движки адаптивны: они стартуют дёшево (интерпретируют байт-код) и становятся дорогими только там, где это окупается (компилируют в оптимизированный машинный код тот код, что выполняется много раз). Весь трек — про эту адаптивную машинерию и про то, как держаться её быстрых путей.

Пять стадий

Когда встретите flame-граф V8 или профиль Node.js с этими названиями — вы будете знать, куда смотреть. Вот что делает каждая стадия:

  1. Парсер — читает исходный текст и строит абстрактное синтаксическое дерево (AST), структурированное представление вашего кода. Он также делает быстрый проход «pre-parse», чтобы пропустить тела функций, которые ещё не были вызваны (ленивый парсинг).
  2. Интерпретатор (Ignition в V8) — один раз обходит AST, чтобы выпустить компактный байт-код, а затем исполняет этот байт-код на регистровой виртуальной машине. Здесь стартует весь код. Это быстро производить и легко по памяти.
  3. Оптимизирующие компиляторы (Sparkplug, Maglev, TurboFan) — для функций, которые выполняются часто («горячих»), движок компилирует байт-код в нативный машинный код, специализируясь по наблюдениям за типами во время работы. Быстрее исполнять, но дороже и прожорливее по памяти производить.
  4. Сборщик мусора (Orinoco в V8) — работает параллельно со всем остальным, находит объекты, на которые больше никто не ссылается, и освобождает их память. Вы никогда не вызываете free(); GC выводит это сам.
  5. Куча и стек вызовов — память, где живут ваши объекты (куча) и фреймы функций (стек). Форма и время жизни того, что вы туда кладёте, задают стоимость каждой остальной стадии.

Искусство этого трека — читать эти стадии: почему функцию скомпилировали, а потом выбросили (деопт), почему доступ к объекту медленный (расхождение форм), почему память всё растёт (утечка, которую GC не может собрать).

Движок против рантайма — различие, на котором спотыкаются

Движок реализует язык ECMAScript: числа, объекты, функции, прототипы, замыкания, Promise, сборку мусора. Это всё, что он реализует. Он понятия не имеет, что такое setTimeout, fetch, узел DOM или файловый дескриптор.

Всё это даёт рантайм (хост): браузер, Node.js, Deno, Bun. Рантайм встраивает движок и внедряет хостовые объекты и цикл событий, который их планирует. setTimeout — это не JavaScript, это функция, которую рантайм передаёт движку.

Движок против рантайма: кто что даёт
Числа, объекты, замыкания, Promise
движок
Сборка мусора, куча
движок
setTimeout, queueMicrotask
рантайм
fetch, DOM, fs, console
рантайм
Сам цикл событий
рантайм
Строк C++ в V8 (приблизительно)
~2M

Вот почему один и тот же движок (V8) питает Chrome, Node, Edge и Deno с совершенно разными возможностями: ядро языка одно, хост разный. Цикл событий мы разбираем от и до в юните 07; пока зафиксируйте границу: движок исполняет язык, рантайм поставляет окружающий мир.

Викторина

Ваш Node-скрипт вызывает `setTimeout`. Какой компонент на самом деле реализует `setTimeout`?

Викторина

Почему современный движок сначала интерпретирует код, а не компилирует всё в машинный код заранее?

Расставь шаги по порядку

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

  1. 1 Парсер строит AST из исходного текста
  2. 2 Ignition выпускает байт-код
  3. 3 Интерпретатор исполняет байт-код (холодно)
  4. 4 Оптимизирующий компилятор производит специализированный машинный код (горячо)
Почему это работает

Почему вообще «движок»? Термин исторический: у ранних браузеров был компонент, который «приводил в движение» скрипты, как игровой движок движет игру. Название прижилось, хотя сегодняшние движки — это полноценные оптимизирующие компиляторы со сборщиком мусора, ближе к маленькой JVM, чем к простому драйверу скриптов.

Вспомните перед уходом
  1. 01
    Назовите пять основных подсистем движка JavaScript и что делает каждая.
  2. 02
    В чём разница между движком и рантаймом? Приведите по два примера каждого.
  3. 03
    Почему «JavaScript интерпретируется, поэтому медленный» — неверно?
Итог

Движок JavaScript — это нативная программа, которая превращает ваш исходный текст в работу процессора через пять подсистем: парсер, строящий AST; интерпретатор (Ignition), выпускающий и исполняющий байт-код; оптимизирующие компиляторы (Sparkplug, Maglev, TurboFan), компилирующие горячий код в машинный; сборщик мусора (Orinoco), освобождающий память; и кучу со стеком, где живут значения. Модель адаптивна: старт дёшев, оптимизируются только горячие пути. Движок реализует лишь язык ECMAScript — рантайм (Chrome, Node, Deno, Bun) поставляет таймеры, ввод-вывод, DOM и цикл событий. Большая часть «медленного JavaScript» — это движок, сбитый с быстрого пути, а не накладные расходы интерпретации. Теперь, когда вы увидите предупреждение о деопте или скачок GC в профиле, вы будете знать, какую подсистему винить и к какому юниту трека обратиться.

Практика

Начни сверху. Задачи идут от простого к сложному: вспомнить факт, применить к случаю, затем senior-уровень. Открой, попробуй, потом открой ответ.

вспомнитьприменитьуглубить0 из 3 завершено
Связанные уроки
встречается в184

Что-то непонятно?

Задай вопрос по этому уроку. Вопросы анонимны и попадают напрямую автору — урок станет лучше.

хоткеи развернуть
поиск
K
пред. пьеса
k
след. пьеса
j
тиры
t
это меню
?
sources2
expand
  1. 01
  2. 02

Trademarks belong to their respective owners. Editorial reference only.