Здравствуйте, уважаемые читатели, Эта статья для тех, кому интересно о том, зачем нужен движок, как он работает и WTH - это JS движок !!!? Итак, эта статья разделена на разделы. Почему, что и как работает JS.

Отказ от ответственности — мы не будем вдаваться в подробности (стек, куча памяти и т. д.). В статье речь пойдет только о JS Engine. Я постарался сделать эту статью интерактивной, не похожей на другие скучные статьи. чтобы вы могли понять и получить все, что может предложить эта статья.

давайте поднимем Вопросы, не так ли?

Что и почему JS Engine?

Движок JavaScript — это программный компонент , выполняющий код JavaScript . Первые движки JavaScript были простыми интерпретаторами , но все соответствующие современные движки используют…. и т.д. (согласно Википедии)

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

допустим, есть два человека, один француз ‍, а другой немец‍✈️, обоим нужно поговорить, как бы они поступили? конечно с помощью какого-нибудь переводчика.

То же самое касается компьютера и вашего кода , ему нужен движок/посредник, так как ваш компьютер не может понять код, с технической точки зрения, компьютер не понимает source codeфайлы machine code.

значит вот что вы понимаете:

'Привет!'

и это то, что понимает ваш компьютер

' 01001000 01100101 01101100 01101100 01101111 00100001'

Исходный код ➡️⚙️➡️ Машинный код

способ преобразования кода определяет тип. как interpreted, compiledи JIT compiled.

возможно, вы слышали о скомпилированном языке, интерпретируемом и о том, что такое JIT-компиляция????

и я верю что многие думают, что javascript это интерпретируемый язык. позвольте мне сказать вам, что это не так❌. « JS — это скомпилированный язык JIT (Just In Time)».

давайте понимать каждый путь.

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

• Интерпретатор: выполняет ту же работу, но построчно, а не все сразу. что делает его в 10 раз медленнее, чем компиляторы. код читается и выполняется одновременно, JS раньше был чисто интерпретируемым языком. что сделало JS намного-намного-намного медленнее!!.

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

1. Интерпретация — Вы читаете строчку и переводите строчку, опять вторая строчка — переводите строчку. что занимает чертовски много времени,
2. Сборник — Ты прочитал всю книгу — сделай свою версию книги на хинди и дай почитать другу. так что позже, когда вам нужно будет объяснить кому-либо, вы сможете это сделать. что является более быстрым способом.
3. JIT-компиляция — вы читаете книгу, а не копируете ее. вы объясняете своему другу, поэтому нет необходимости в копии книги. что является наиболее эффективным и быстрым способом.

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

Давайте разберемся по одному:

1. Ради бога, первым шагом было бы «закодировать»!, XD!
2. Разбор: синтаксический анализ преобразует исходный код в токен (это означает, что ваш код будет похож на const, message, =, «hello». Это 4 токена), затем токен будет преобразован в структуру данных, называемую абстрактным синтаксическим деревом (AST) . ) , который выглядит так

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

Итак, позвольте мне сказать вам, что AST играет решающую роль в проверке правильности✅ и правильного использования программы и языка. (например , linting использует AST, для тех из вас, кто не знает о lint. он проверяет ваш код и показывает ошибки, разве это не круто ), и AST также используется в других местах, таких как babel, webpack, minifiers и подсветка синтаксиса.

Если вы хотите увидеть, как выглядит AST, вы можете посетить этот веб-сайт. или обратитесь к этому примеру.

3. Компиляция: он преобразует ⚙️ AST в машинный/двоичный код, теперь код был преобразован в двоичный код (0, 1), который может понять наш компьютер.

4. Выполнение: это происходит в стеке вызовов (это еще одна интересная тема для обсуждения, но мы не будем ее здесь затрагивать). история здесь не заканчивается,

5. Оптимизация: современный JS-движок постоянно оптимизирует код. Почему JIT быстрый? потому что он сначала создаст неоптимизированную версию машинного кода, поэтому, по крайней мере, выполнение будет происходить настолько быстро, насколько это возможно, а в фоновом режиме будет постоянная ♻️ оптимизация, которая оптимизирует код, и предыдущий неоптимизированный код будет заменен новым оптимизированные.

Вывод :

Зачем нам двигатель? ➡ Поскольку наш код (исходный код) не может быть понят компьютером, он понимает только двоичный код (0,1)/машинный код. поэтому нам нужен какой-то посредник для нашего преобразования (это то, что делает наш движок),

Что делает движок ➡ Исходный код ➡️⚙️➡️ Машинный код

Как работает Engine ➡ Работает в четыре шага

Исходный код ➡ ➡️⚙️➡️ ➡ AST (абстрактное синтаксическое дерево ) ➡ ➡️⚙️➡️ ➡ Двоичный код/Машинный код ➡ ➡️⚙️➡️ ➡ Выполнение в стеке вызовов ➡ ➡️⚙️➡️ ➡ оптимизация ♻️