Вернуться




Интерпретатор JavaScript: объясняем работу движка на пальцах



Интерпретатор JavaScript (JS), если простыми словами, — это некая программа, которая преобразует код JS в машиночитаемый язык. Но важно не путать его с компилятором JS,потому что разница, возможно, не очевидна сразу, однако она есть. Интерпретатор JS считывает заданный код построчно и по порядку и тут же начинает его «выполнять». Компилятор же вначале «считывает» весь код, потом проводит с ним оптимизацию и только после этого воспроизводит уже оптимизированный код.

«Движок» JavaScript — это программа, объединяющая в себе интерпретатор JS и компилятор. Именно внутри этих «движков» код JS преобразуется в код более «простого» уровня. Разрабатывая программы на языке JavaScript, мы преследуем идею, что компьютер (или, возможно, просто браузер) обязательно выполнял ее правильно. Но компьютер может выполнить и понять только «машинный» код.«Движок» как раз переводит наш код JS на «машинный».

Объясняем работу движка JS на пальцах

С любым JavaScript кодом, поступившим внутрь «движка», должен произойти ряд определенных этапов работы, прежде чем он отразится в «console.log». Давайте с этим разбираться подробнее: что именно должно с ним произойти?

1. Парсер

Первый этап работы с кодом это парсер. На этом этапе код «разбивается» на небольшие логические части (токены). Это делается для того, чтобы потом понять назначение этих токенов и что дальше с ними делать.

2. AST (Abstract Syntax Tree). Абстрактное синтаксическое дерево

В результате полученных на первом этапе токенов создается некое «представление» кода. Оно имеет структуру «дерева» и отсюда берет свое название.

3. Интерпретатор JS

Интерпретатор JavaScript считывает код файла по каждой строке отдельно и поочередно. При этом он сразу анализирует и преобразовывает этот код, прямо в течение «работы» самой программы, и не останавливает ее выполнение. Основываясь на уже имеющемся AST, интерпретатор создает байт-код. На данном этапе никакой оптимизации не производится.

4. Профайлер

Данный этап проводит проверку кода. Именно на этом этапе осуществляется специальный контроль за ходом выполнения кода, но с целью обратить внимание на возможности его оптимизации. Далее ту часть кода, которую возможно оптимизировать, профайлер передает компилятору на оптимизацию,который, в свою очередь, компилирует и оптимизирует код, делая его работу быстрее.

5. Компилятор JavaScript

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

6. Деоптимизация

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

Движок JS. Немного истории

В раннюю эпоху расцвета Интернета и браузерной борьбы за пользователей большинство разработчиков браузеров внедряли лишь интерпретатор JavaScript. Тогда это было обосновано, ведь интерпретатор проводит выполнение любой программы построчно, по мере того как сам код в него поступает. А из этого следует его главное достоинство — быстродействие кода. Потому что в этом случае любая поступающая команда в виде кода выполнялась просто мгновенно, и появлялся эффект «быстродействия» браузера.

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

Так и появился на свет движок JavaScript, который, по сути, совмещает в себе лучшее от двух подходов: от компилятора JS и интерпретатора JS.



Если вам понравилась эта статья поделитесь ею с друзьями, тем самым вы помогаете нам развиваться и добавлять всё больше интересного и полезного контента!




Cхожие статьи





Учебный курс по React, часть 1: обзор курса, причины популярности React, ReactDOM и JSX

Учебный курс по React, часть 1: обзор курса, причины популярности React, ReactDOM и JSX

Представляем вашему вниманию первое занятие учебного курса по React для нач ...

21 Февраля 2021    JavaScript

Учебный курс по React, часть 2: функциональные компоненты

Учебный курс по React, часть 2: функциональные компоненты

 Cегодня мы представляем вашему внимание продолжение курса. Здесь мы погово ...

21 Февраля 2021    JavaScript

Учебный курс по React, часть 3: файлы компонентов, структура проектов

Учебный курс по React, часть 3: файлы компонентов, структура проектов

В этом материале мы поговорим о файлах компонентов и о структуре React-прое ...

21 Февраля 2021    JavaScript