Наличие прочной основы Javascript требует понимания механизмов, лежащих в основе самого языка. В этой статье я поделюсь идеями, которые лежат в основе языка Javascript.
Javascript Engine
Самым известным является движок V8 Engine, разработанный Google, который используется в Chrome и Node.js, но на самом деле движков Javascript гораздо больше. Если они соответствуют стандарту, установленному стандартами ECMAScript, любой может написать движок JS. Здесь вы можете найти список всех JS-движков:
Как работает JS-движок?
1. Парсер
Парсер HTML обнаруживает тег скрипта с источником. Исходный код внутри этого сценария загружается как поток байтов UTF-16 в декодер потока байтов. Этот декодер потока байтов затем декодирует байты в токены, которые отправляются синтаксическому анализатору. Чтобы сэкономить время, движок пытается избежать синтаксического анализа кода, который не нужен сразу.
2. AST
Парсер создает узлы на основе полученных токенов. С помощью этих узлов он создает абстрактное синтаксическое дерево (AST).
Здесь вы можете посмотреть, как ваш код преобразуется в AST:
https://astexplorer.net/
3. Переводчик
Затем следует интерпретатор, он проходит через AST и генерирует байтовый код. Он читает код построчно. Когда байт-код был сгенерирован, AST удаляется, освобождая место в памяти.
Проблема с интерпретаторами заключается в том, что выполнение одного и того же кода несколько раз может быть очень медленным, поэтому у нас есть компилятор, который не повторяет циклы и более оптимизирован.
4. Профайлер
Профилировщик отслеживает и отслеживает код, чтобы оптимизировать его.
5. Компилятор
Компилятор работает заранее и создает перевод написанного кода и компилирует его на язык более низкого уровня, который могут читать машины.
Другими примерами компиляторов являются Babel, который преобразует современный JS в совместимый с браузером JS, и Typescript, который представляет собой надмножество JS, которое компилируется до JS.
6. Оптимизированный код
Зачем вам это нужно знать? Таким образом, мы можем оптимизировать код, чтобы он выполнялся быстрее.
Стек вызовов и куча памяти
Стек вызовов отслеживает, где мы находимся в коде. Он использует функции "первым пришел" и "последним", а также стеки. Куча памяти - это место для хранения и записи информации, где мы выделяем, используем и удаляем память. Стек вызовов вызывает функцию из кучи памяти и после выполнения удаляет ее из стека. Когда достигнут максимальный стек вызовов, например с бесконечным циклом мы называем это переполнением стека.
JS автоматически освобождает память, которая больше не используется. Он помечает и выметает это из памяти. Например, когда значение переназначается, а исходное значение больше не используется. Мы называем это сборкой мусора.
Утечки памяти происходят, когда часть памяти больше не используется или требуется приложению, но все еще занимает память. Это происходит, например, когда вы:
- Случайно установили глобальные переменные
- Не закрывайте eventListeners или setIntervals
- Ссылка из DOM
Цикл событий и очередь обратного вызова
Если стек вызовов не знает, что делать с функцией, он отправит ее в веб-API. Когда он готов, например, когда данные были получены, функция отправляется в очередь обратного вызова, а затем цикл событий помещает ее в стек вызовов только тогда, когда стек вызовов пуст.
Вот отличный ресурс, где вы можете увидеть все это в действии:
http://latentflip.com/loupe/
Время выполнения JS
JS - это однопоточный язык, что означает, что одновременно может выполняться только один набор инструкций. Есть только один стек вызовов. За исключением того, что у нас есть не только JS Engine, но и JS Runtime. Среда выполнения - это весь пакет, включая все инструменты, за создание JS отвечает движок.
Браузер поставляется с веб-API, который не является родным для JS. Веб-API может позаботиться об асинхронных действиях. Вы можете получить доступ к веб-API, используя методы объекта window. Если мы посмотрим на Node.js, который представляет собой среду выполнения, которая позволяет нам запускать JS вне браузера, написанного на C ++, он использует движок V8 из браузера, но расширяет его с помощью глобального API вместо веб-API, используемого браузером. .
Глобальный контекст исполнения
Каждый код в JS запускается в контексте выполнения. Глобальный контекст выполнения запускается первым из стека вызовов. Он дает доступ к глобальному объекту и ключевому слову this и создается на так называемой фазе создания.
Эта статья будет время от времени обновляться.
Если вы узнали что-то из этой статьи, оставьте аплодисменты.
