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

Содержание

Интерпретатор 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.

Интерпретатор JavaScript. Compiling online OTUS

Можно ли написать код на JavaScript в простом «Блокноте»? Можно! Но зачем, когда есть большое количество различных инструментов для компиляции когда — как дескотопных, так и online. О них — наша статья.

На практике уже давно нет нужды использовать тот же «Блокнот», ведь применение редактора с ограниченными возможностями существенно замедлит разработку. В наше динамичное время — это попросту недопустимо. Да и непрактично, ведь существует, как уже было сказано выше, масса специализированных инструментов. Но прежде чем продолжить, давайте перечислим основные критерии, на которые желательно ориентироваться при выборе online либо десктопного интерпретатора для работы с JS:

— подсветка синтаксиса. Операторы, спецсимволы, названия — все это должно выглядеть по-разному, что облегчает читаемость кода;

— автодополнение. При вводе какой-либо функции или переменной интерпретатор предложит подсказку к интересующему компоненту (описание, тип, нужные аргументы, возможные варианты и пр.). Это ускоряет разработку;

— подсвечивание ошибок. Когда ошибки и опечатки подсвечиваются в режиме online, их можно исправить сразу же, то есть до этапа компиляции. Очень удобно;

— сокрытие блоков. Актуально, если речь идет о больших проектах на JavaScript. Сокрытие блоков экономит время, т. к. разработчику при поиске нужного фрагмента программы не надо будет скролить весь код целиком;

— прочее. Это может быть менеджер проектов, возможность работы в одном окне сразу с несколькими файлами, поддержка дополнительных плагинов и т. п.

Desktop Compiler для JavaScript

Интерпретаторы, представленные ниже, представляют собой программы, которые нужно устанавливать на свой компьютер.

Notepad++

Просто и удобно. Присутствует подсветка синтаксиса, автоформатирование, автодополнение. Возможна работа с различными кодировками, поддерживается применение плагинов (стоит отметить плагин для ускорения написания кода Emmet). Из минусов — этот interpreter работает только на Windows.

Geany

Маленькая и легкая среда разработки. Поддерживает много типов файлов. Интерфейс удобен, есть стабильная версия под Linux. Это хороший выбор для начинающих программистов и веб-дизайнеров.

Sublime Text

Прост и удобен, является кроссплатформенным. Поддерживает:

— настройку интерфейса;

— горячие клавиши;

— сниппеты;

— подсветку синтаксиса;

— автодополнение;

— автосохранение.

Из минусов — платный.

Atom Editor

По дизайну компилятор Atom похож на Sublime Text, однако является бесплатным и функционирует на базе Chromium. Настраивается легко, имеет встроенный менеджер пакетов, функцию интеллектуального автоматического завершения кода и другие полезные плюшки. Есть все, что нужно для начальной работы, а для увеличения функциональности можно загрузить ряд модулей/плагинов. Требователен к оперативной памяти.

Webstorm

Неплохая IDE от Jetbrains, в которой реализованы и горячие клавиши, и интеллектуальное автодополнение, и немедленное обнаружение ошибок, и навигация, и встроенный терминал, и проверка правильности кода (причем тремя различными способами). Также из плюсов — богатый набор плагинов, поддержка разных фреймворков и языков разметки, плюс особое внимание разработчиков было уделено мелочам. Возможна отладка в Node.js.

Нередко Webstorm называют «умнейшей» и мощной IDE для продвинутой разработки web-приложений на JavaScript и делают это, пожалуй, вполне заслуженно.

Online compiler for JavaScript

Если устанавливать приложение на ПК не хочется, то выполнить компиляцию (compile) можно и online, то есть никакой инсталляции не потребуется — достаточно будет просто открыть ссылку компилятора в интернете. Ниже — список редакторов (интерпретаторов) для JavaScript, которые работают в режиме online:

playcode.io/online-javascript-editor;
rextester.com/l/js_online_compiler;
replit.com/languages/javascript;
js.do;
codepen.io/knox97/pen/zKEvAZ;
onlinegdb.com/online_javascript_rhino_interpreter.

Остается добавить, что многие из перечисленных компиляторов для JavaScript являются универсальными и могут работать с другими языками программирования: Java, C++, Python, PHP, C#, Golang и так далее.

Выбор — за вами!

По материалам:

https://tproger.ru/translations/javascript-tool-list/;
http://uchitel-program.ru/web/redaktory/javascript/.

Внутри механизма Javascript: компилятор и интерпретатор | Аллан Сендаги

Является ли Javascript компилируемым или интерпретируемым?

В программировании обычно есть два способа перевода на машинный язык или на то, что наши компьютеры могут понять.

Теперь это относится к большинству языков программирования, а не только к javascript; Python, Java, C++ используют одни и те же концепции.

Интерпретатор

Здесь мы читаем файлы построчно на лету.

Возьмем приведенный выше код в качестве примера. Здесь все, что мы делаем, это повторяем наш расчет (5+4) 1000 раз. Это повторяется снова и снова. Наш результат 9.

Теперь, если мы передали этот файл интерпретатору, перевод происходит построчно; и обычно это то, как вы предполагаете, что код запускается.

Babel — это компилятор Javascript, который берет ваш современный код JS и возвращает совместимый с браузером JS (старый код JS).
Typescript — это надмножество Javascript, которое компилируется в Javascript.

Из первой строки (функция) -> вторая строка (возврат) -> третья часть (для цикла) и -> вычисления.
Потому что интерпретация кода означает получение набора инструкций и возврат ответа. Так изначально работал javascript.

Компилятор

Компилятор, в отличие от интерпретатора, не транслирует на лету. Он работает заранее, чтобы создать перевод кода, который мы написали. Он компилирует его в язык, понятный машине.

Компилятор выполнит один проход по коду и попытается понять, что он делает. Он возьмет программу на javascript и напишет программу на новом языке x. И если мы возьмем этот язык x, который он выдает, и интерпретируем его, мы получим те же результаты, что и наш язык.

Таким образом, компилятор попытается понять, что мы хотим сделать, и превратит наш язык обычно в язык низкого уровня, такой как машинный код.

Это немного странно, если подумать, потому что в большинстве случаев все языки приходится интерпретировать и компилировать. Программа должна запускаться и интерпретироваться, но она также должна быть переведена во что-то вроде машинного кода.

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

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

Итак, есть два способа запустить код Javascript — с помощью компилятора и интерпретатора. Но зачем использовать одно вместо другого? Каковы плюсы и минусы каждого?

Интерпретаторы

ПЛЮСЫ: Их легко настроить и запустить, потому что нам не нужно преобразовывать наш код на другой язык, как мы видели язык x. Нет шага компиляции перед запуском кода. Вы просто даете интерпретатору файл, и он начинает переводить его построчно на лету.

В некотором смысле это означает, что интерпретатор хорош для такого языка, как Javascript, потому что, когда файл отправляется с сервера, мы хотим, чтобы он немедленно выполнялся; пользователь будет ждать взаимодействия с нашим приложением. Javascript был создан для браузера, поэтому возможность интерпретировать Javascript и запускать его как можно быстрее была идеальной. Вот почему в начале языка использовались интерпретаторы.

ПРОТИВ:

Когда вы запускаете один и тот же код снова и снова, например, когда вы находитесь в цикле, все становится очень медленным.

Compiler PROS

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

ПРОТИВ

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

Итак, компилятор или интерпретатор?

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

Но что, если мы объединим лучшее из обоих миров?
Что, если вместо того, чтобы просто использовать интерпретатор и компилятор, мы объединим их и создадим нечто, называемое компилятором JIT (компиляция точно в срок)? Это то, что браузеры, такие как Chrome, начали делать, чтобы ускорить работу движков.

Как движок V8 использует JIT-компилятор >>>

Как на самом деле работает JavaScript? (Часть 1) | Приеш Патель

Что такое V8 и что происходит под капотом при запуске JavaScript?

Если вы разработчик JS или студент, изучающий язык, очень высока вероятность того, что вы столкнулись с двухбуквенным словом «V8». В этой статье я дам вам краткий обзор различных движков JS, а затем углублюсь в то, как работает движок V8. Вторая часть этой статьи будет содержать концепции управления памятью, а ссылка находится ближе к концу статьи.

Этот пост предоставлен вам Bit (GitHub): платформа для общих компонентов. Bit помогает всем создавать модульные приложения JavaScript, легко обмениваться компонентами между проектами и командой, а также строить лучше и быстрее. Попытайся.

Bit: легко обменивайтесь компонентами между проектами и командами.

Прежде чем мы начнем с JavaScript, давайте разберемся в основах работы любого языка программирования. Компьютер состоит из микропроцессоров, и мы пишем код, чтобы управлять этой крошечной, но мощной машиной. Но какой язык понимают микропроцессоры? Они не понимают Java, Python и т. д., а только машинный код.

Написание кода уровня предприятия на машинном языке или языке ассемблера невозможно, поэтому нам нужны языки высокого уровня, такие как Java, Python, а также компилятор или интерпретатор для преобразования его в машинный код.

Компиляторы и интерпретаторы

Компилятор/интерпретатор может быть написан на том же языке, который он обрабатывает, или на любом другом языке.

Интерпретатор: Читает и переводит файл построчно на лету. Изначально так работал JavaScript.

Компилятор: Компилятор работает заранее и создает новый файл, который содержит перевод машинного кода для вашего входного файла.

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

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

Люди, создающие механизмы ECMAScript, очень умны, поэтому они используют лучшее из обоих миров и создают JIT-компилятор (Just-in-time). JavaScript компилируется, а также интерпретируется, но фактическая реализация и порядок зависят от движка. Мы увидим, какую стратегию использует команда V8.

В случае JavaScript существует механизм для преобразования его в машинный код. Подобно другим языкам, этот движок может быть построен с использованием любого языка, и, следовательно, существует не только один движок.

V8 — это реализация Google движка для своего браузера Chrome.
SpiderMonkey был первым движком, созданным для Netscape Navigator, и теперь используется в FireFox.
JavaScriptCore — это то, что Apple использует для браузера Safari.

Этот список довольно большой, и если вы хотите узнать, что такое движок Internet Explorer, посетите эту страницу в Википедии.

ECMAScript

Из-за огромного списка движков возникает один вопрос; Могу ли я сделать свой собственный двигатель? Да, просто следуйте стандарту ECMAScript.

Если мы делаем переводчик, нам нужно знать допустимые слова из обоих языков. Мы уже знаем, что допустимо в машинном языке, но то, что допустимо в JavaScript, нуждается в стандартизации.

Эта стандартизация JavaScript осуществляется организацией Ecma International в спецификации, называемой ECMAScript или ES. Итак, теперь, когда вы сталкиваетесь со статьей/видео «Что нового в ES7?», вы знаете, что она относится к новым функциям, добавленным в JS по стандарту ECMAScript.

Немного истории

Google создал Карты Google для браузера, который требовал большой вычислительной мощности. Реализация JavaScript в то время была недостаточно хороша для быстрого запуска карт. Google хочет привлечь больше пользователей к своим услугам, чтобы они могли продавать больше рекламы и зарабатывать деньги. Для этого сервис должен быть быстрым и надежным. Поэтому Google создал свой собственный движок под названием V8 на C++, который был запущен в 2008 году и был довольно быстрым или, как говорят некоторые, самым быстрым.

Разбор и построение дерева

Файл JavaScript поступает в движок, и синтаксический анализатор выполняет лексический анализ, который разбивает код на токены для определения их значения. Эти токены составляют AST (абстрактное синтаксическое дерево).

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

JavaScript в AST с использованием astexplorer.net

Сердце движка

Как мы обсуждали ранее, JavaScript интерпретируется интерпретатором с именем Ignition , а также компилируется JIT-оптимизирующим компилятором с именем TurboFan .
Первоначально AST, сгенерированные на предыдущем шаге, передаются интерпретатору, который быстро генерирует неоптимизированный машинный код, и выполнение может начаться без задержки.
Profiler наблюдает за выполнением кода и определяет области, в которых можно выполнить оптимизацию. Например, цикл for выполняется 100 раз, но дает один и тот же результат на каждой итерации.
С помощью этого профилировщика любой неоптимизированный код передается компилятору для выполнения оптимизации и генерации машинного кода, который в конечном итоге заменяет свой аналог в ранее сгенерированном интерпретатором неоптимизированном коде.
Поскольку профилировщик и компилятор постоянно вносят изменения в байт-код, производительность выполнения JavaScript постепенно улучшается.

Еще немного истории

До выпуска версии 5.9 V8 использовались два оптимизирующих компилятора и базовый компилятор.

Базовый компилятор под названием full-codegen быстро создавал машинный код, который не был оптимизирован.
Для оптимизации кода использовались два оптимизирующих компилятора Crankshaft и TurboFan.

С новыми функциями, добавленными в JavaScript, команде V8 стало сложно поддерживать тот же конвейер из-за возрастающей сложности архитектуры. Если вы хотите узнать больше о старом подходе и причинах перехода на новый пайплайн, посетите их сайт здесь.

В будущее

Работа двигателя V8 может измениться в будущем по мере проведения дополнительных исследований для дальнейшего улучшения характеристик. Более того, по мере того, как Webassembly начинает обретать форму, в конвейер может быть добавлен дополнительный шаг.

Существует множество реализаций движков ECMAScript, и V8 от Google — самая известная из них. Я надеюсь, что в этой статье удалось дать вам краткий обзор не только того, как работает JavaScript, но и вообще того, как работает язык программирования. Если вы хотите узнать, какие планы на будущее у команды V8, или хотите получить еще больше подробностей о двигателе, у них есть замечательный блог здесь.

Вышла часть 2 этой статьи, в которой я рассказываю о куче памяти, стеке, цикле событий и других понятиях, связанных с выполнением кода JavaScript. Так что следите за обновлениями!

Если вы не понимаете, какое место Node.