Как работает JavaScript: обзор движка, среды выполнения и стека вызовов
JavaScript становится все более популярным, и команды используют его на разных уровнях своего стека — интерфейсные, серверные, гибридные приложения, встроенные устройства и многое другое.
Этот пост предназначен для того, чтобы глубже изучить JavaScript и его работу: зная строительные блоки JavaScript и их взаимодействие друг с другом, вы сможете писать код лучше. В следующих статьях мы также поделимся некоторыми практическими правилами, которые мы используем при разработке SessionStack- легкого JavaScript-приложения, которое должно быть надежным и высокопроизводительным, чтобы оставаться конкурентоспособным.
Как видно из статистики GitHut, JavaScript находится на вершине с точки зрения активных репозиториев и Total Pushes в GitHub. Он не сильно отстает и в других категориях.
Так как проекты все больше зависят от JavaScript, то разработчикам необходимо хорошо понимать внутрненнее устройство и возможности экосистемы для создания хорошего программного обеспечения.
Как оказалось, многие разработчики ежедневно используют JavaScript, но не знают, что происходит под капотом.
Обзор
Почти все уже слышали о V8 Engine как о концепции, и большинство людей знают, что JavaScript является однопоточным или использует колбек очередь.
В этом посте мы подробно рассмотрим все эти концепции и объясним, как на самом деле работает JavaScript. Зная эти детали, вы сможете писать лучшие, не блокирующие приложения, которые должным образом используют предоставленные API.
Если вы новичок в JavaScript, этот пост поможет вам понять, почему JavaScript такой «странный» по сравнению с другими языками.
Если же вы опытный разработчик JavaScript, здесь вы найдете свежую информацию о том, как на самом деле работает JavaScript Runtime, который вы используете каждый день.
Движок JavaScript
Популярным примером движка JavaScript является движок Google V8. Например, V8 используется внутри Chrome и Node.js. Вот очень упрощенное представление о том, как он выглядит:
Механизм состоит из двух основных компонентов:
- Memory Heap — здесь происходит выделение памяти;
- Call Stack — именно там находятся кадры стека при выполнении кода.
The Runtime
Практически каждый разработчик JavaScript использует браузерные API (например, «setTimeout»). Однако, эти API не предоставляются движком.
Оказывается, реальность немного сложнее.
Итак, у нас есть движок, но на самом деле гораздо больше — такие вещи, как веб-API, которые предоставляются браузерами: DOM, AJAX, setTimeout и многие другие.
А еще, у нас есть популярный event loop и колбек очередь (callback queue).
Стек вызовов
JavaScript — это однопоточный язык программирования, что означает, что он имеет один стек вызовов. Поэтому он может делать одну вещь за раз.
Стек вызовов — это структура данных, которая в основном записывает, где мы находимся в программе. Если мы переходим в функцию, мы помещаем ее на вершину стека. Если мы возвращаемся из функции, мы выскочим из верхней части стека. Это все, что может делать стек.
Вот пример. Взгляните на следующий код:
function multiply(x, y)
Когда движок начнет выполнять этот код, стек вызовов будет пуст. После этого шаги будут следующими:
Каждая запись в стеке вызовов называется кадром стека (Stack Frame).
И именно так строится стека трейс, когда генерируется исключение — в основном это состояние стека вызовов, в момент когда оно произошло. Взгляните на следующий код:
function foo()
Если этот код выполняется в Chrome (при условии, что этот код находится в файле с именем foo.js), будет выведен такой стек трейс:
« Blowing the stack » — происходит, когда вы достигаете максимального размера стека вызовов. Это может произойти довольно легко, например, при использовании рекурсии без тщательного тестирования кода. Посмотрите на пример:
function foo()
Движок начинает выполнение кода с вызова функции «foo». Однако, эта функция, является рекурсивной и начинает вызывать себя без каких-либо условий завершения. Таким образом, на каждом этапе выполнения, одна и та же функция снова и снова добавляется в стек вызовов. Это выглядит примерно так:
В какой-то момент, количество вызовов функций в стеке вызовов превышает фактический размер стека вызовов, и браузер решает предпринять действия, выдавая ошибку, которая может выглядеть примерно так:
Выполнение кода в одном потоке может быть довольно простым, поскольку вам не нужно иметь дело со сложными сценариями, возникающими в многопоточных средах, например, с дедлоками.
Но работа с одним потоком также довольно ограничена. Поскольку в JavaScript есть один стек вызовов, что же произойдет, когда мы запустим медленные задачи?
Параллелизм и Event Loop
Что происходит, когда в стеке вызовов у вас есть вызовы функций, которые занимают огромное количество времени для обработки? Например, представьте, что вы хотите выполнить сложное преобразование изображений с помощью JavaScript в браузере.
А почему это вообще проблема? Проблема в том, что, несмотря на то, что в стеке вызовов есть функции для выполнения, браузер на самом деле больше ничего не может делать — он блокируется- браузер не может рендерить, не может выполнять любой другой код. Он просто завис. И это проблема для UI, и не единственная. Как только ваш браузер начинает обрабатывать много задач в стеке вызовов, он может перестать отвечать на запросы в течение довольно длительного времени. Большинство браузеров вызывают ошибку, спрашивая вас, хотите ли вы закрыть веб-страницу.
Сейчас это не лучший UX, не так ли?
Итак, как же выполнить тяжелый код, не блокируя пользовательский интерфейс и не заставляя браузер виснуть? Решение — асинхронные колбеки.
Если вам трудно воспроизводить и понимать проблемы в своих JavaScript приложениях, взгляните на SessionStack. SessionStack записывает все в ваших веб-приложениях: все изменения DOM, взаимодействия с пользователем, исключения JavaScript, трассировки стека, неудачные сетевые запросы и сообщения отладки.
Присоединяйтесь к нашим каналам FrontEndDev и Web Stack в Telegram, чтобы не пропустить самое интересное из мира веб-разработки!
Sign up for more like this.
Enter your email
Работа с MongoDB. Заметки на полях
Привет. Как фронт разработчик, я никогда особо плотно не работал с БД. Конечно были какие то пет проекты на NodeJS с использованием sqlite и даже монги, но все это было на скорую руку. Пришло время кое-что зафиксировать. Установка Можно поставить монгу в систему 1 — как пакет, 2 — можно
Jem Nov 27, 2023 • 2 min read
Кастомизируем Fender Stratocaster
Привет! Очень хотел всегда иметь в арсенале своих гитар Stratocaster, пусть даже и Squier. Нашел на авито не особо дорогой (13к), послушал и взял. Но как только привез его домой, понял что мне не особо нравится его цвет. И решил я, что можно его ошкурить и оствить натуральный цвет дерева,
Jem Jan 1, 2023 • 6 min read
Makelangelo плоттер на плате от 3д принтера
Привет! Вот уже несколько лет я увлекаюсь рисунками на ЧПУ. Есть несколько устройств, при помощи которых я рисую. Одно из них — настенный плоттер на базе Ардуино под названием Polargraph. На нем я практиковался в рисунках больших размеров. У проекта есть софт для подготовки рисунка и управления процессом рисования, и
Что такое framework и runtime?
Нигде не нашел чёткого опрделения этми двумя понятиям. Я понимаю фреймворк, как платформу, которая необходима для работы каких-либо приложений. Например, набор динамически линкуемых библиотек для нескольких приложений — уже фреймворк. Также под это определение подохдит и Java Runtime Environment (в том числе и JVM). Однако что такое рантайм? С одной стороны это всего лишь фаза выполнения программы. С другой стороны есть куча терминов, как runtime libraries, runtime system. Что вкладывает майкрософт в это понятие тоже неясно. Объясните, пожалуйста!
Отслеживать
задан 2 фев 2016 в 12:26
193 1 1 золотой знак 1 1 серебряный знак 4 4 бронзовых знака
2 ответа 2
Сортировка: Сброс на вариант по умолчанию
Между библиотекой и фреймворком разница небольшая, но принципиальна. Если Ваш код просто использует функции модуля, то этот модуль скорее всего библиотека. А вот если модуль заставляет Вас писать код так как он хочет и сам его вызывает, то это уже фреймворк. А вот собственно модуль — это набор файлов-исходников (иногда уже скомпилированных).
runtime — это часть кода, существует в выполнимом файле (либо в отдельных so/dll) и обеспечивает всякие «удобства». Например, узнать тип объекта или сделать те же виртуальные вызовы. Добавляется обычно компилятором и обычный пользователь может даже не знать о нем. Также словом runtime называют то время, когда программа выполняется. Что конкретно имеется ввиду — нужно сдедить за контекстом.
runtime libraries — это библиотеки, которые используются во время работы программы. Иногда библиотеки поставляются в двух видах — для разработки и для обычной работы (вторые часто оптимизированы и с них выброшено лишнее). Хороший пример — bpl файлы делфи. Для одного и того же компонента могут быть библиотеки, которые содержат всякие инструметы для IDE, а есть которые только для работоспособности кода.
JRE — это не фреймворк, это runtime библиотека. Хотя с другой стороны это фреймворк для байткода. Но так как на байткоде пищут только особые извращенцы, то обычному программисту это не фреймфорк. А вот вся java — это один сплошной фреймворк:)
Node js javascript runtime что это
Node. js — это среда выполнения JavaScript, основанная на движке V8, который разработан Google для использования в браузере Google Chrome. Однако Node. js используется для выполнения JavaScript на серверной стороне. Node. js позволяет разработчикам создавать масштабируемые и высокопроизводительные сетевые приложения. Он также имеет доступ к множеству модулей из стандартной библиотеки Node. js, что делает разработку приложений более удобной.
Похожие записи:
- Жирный Шрифт Javascript
- Javascript Hash
- Что такое распарсить json javascript
- Javascript border что это
Node.js
Node.js (Node) — это платформа с открытым исходным кодом для работы с языком JavaScript, построенная на движке Chrome V8. Она позволяет писать серверный код для веб-приложений и динамических веб-страниц, а также программ командной строки. В основе платформы — событийно-управляемая модель с неблокирующими операциями ввода-вывода, что делает ее эффективной и легкой.
Освойте профессию «Frontend-разработчик»
Платформу разработал Райан Дал, программист из Америки, в 2009 году. До появления Node.js приложения, которые написаны на языке программирования JavaScript, можно было запускать только в браузере. С появлением платформы стало возможно писать на JavaScript не только в браузере, но и на сервере.
Что такое Node.js и как она работает
Node.js работает на движке V8, транслирующем JavaScript в машинный код. Простыми словами, Node.js — это приложение на C++, которое получает на входе код JavaScript и выполняет его. Чтобы взаимодействовать с устройствами ввода-вывода на компьютере, в платформе предусмотрен собственный интерфейс на C++. Таким образом, платформа превращает специализированный скриптовый язык JavaScript в язык общего назначения, поэтому на Node.js можно писать любые компьютерные программы. Платформа позволяет пользоваться единым языком JavaScript для написания кода и на стороне клиента (Frontend), и на сервере (Backend). Эти возможности Node.js важны для разработки приложений реального времени, которые основаны на событиях.
Профессия / 9 месяцев
Frontend-разработчик
Создавайте интерфейсы сервисов, которыми пользуются все
Для чего нужна Node.js
Платформу используют fronted-разработчики, backend-разработчики и другие. Она позволяет написать программу для разных ОС: Linux, OS X и Windows, может использоваться для создания API. Также Node.js применяется для разработки кросс-платформенных приложений: например, списка задач, который должен работать на разных платформах, синхронизировать данные в реальном времени и отправлять на мобильное устройство. Node.js используется при создании сервисов с постоянным обменом информацией с пользователем: социальных сетей, онлайн-игр, чатов, систем совместной работы над проектом, онлайн-редакторов текста и пр.
Node.js лежит в основе Internet of Things, или просто IoT. Платформа помогает управлять приборами и создавать серверы, способные одновременно обрабатывать большое количество запросов.
Многие крупные компании используют Node.js. Например, eBay и веб-версия PayPal в процессе перехода, а LinkedIn, полностью отказавшиеся от Ruby on Rails в пользу Node.js еще в 2012 году, заявили о 20-кратном ускорении 27 серверов. Среди других известных компаний — Yahoo, Netflix, Uber, Walmart, Google и многие другие.
Станьте Frontend-разработчиком
и создавайте интерфейсы сервисов, которыми пользуются все
Как выглядит код
Пример создания и запуска HTTP-сервера на Node.js, выдающего «Hello, World!»:
const http = require('http'); const requestListener = function (req, res) < res.writeHead(200); res.end('Hello, World!'); >const server = http.createServer(requestListener); server.listen(8080);Причины популярности
Высокая скорость. JavaScript-код, который выполняется в среде Node.js, может быть в несколько раз быстрее, чем написанный на языках вроде Ruby или Python. В Node.js используется модель асинхронного программирования. Модель позволяет продолжить обработку других задач, не дожидаясь завершения передачи данных. Когда требуется выполнить операцию ввода-вывода вроде доступа к файловой системе или базе данных, Node.js не блокирует главный поток ожиданием результатов. Платформа инициирует ее выполнение и продолжает выполнять другие задачи, пока результаты предыдущей операции не будут получены.
Универсальность и гибкость. В Node.js выполняется код, который написан на JavaScript. Это означает, что frontend-разработчики, которые уже используют JavaScript в браузере, могут писать и клиентский, и серверный код на привычном языке программирования, не изучая инструмент с нуля. В Node.js можно быстро переходить на новые стандарты ECMAScript по мере их реализации. Новые возможности языка становятся доступны сразу после установки поддерживающей их версии Node.js.
Читайте также С чего начать учить JavaScript? 5 шагов для старта
Большое количество модулей и библиотек. Экосистема Node.js стремительно развивается благодаря менеджеру пакетов NPM. Он содержит более 500 000 модулей и библиотек open-source, которые находятся в свободном доступе. Также постоянно появляются новые.
Работа на движке Chrome V8. Node.js работает на JavaScript-движке V8 от Google. V8 — движок JavaScript с открытым исходным кодом, распространяемый по лицензии BSD. Он применяется в браузерах на основе Chromium. Это означает, что в Node.js использованы наработки тысяч инженеров. Движок написан на C++, имеет открытый исходный код и продвинутые библиотеки.
Как установить Node.js
Установка Node не должна вызвать проблем даже у новичков, ниже приведен алгоритм действий на Windows и OS X.
Установка Node.js на Windows и Linux
Первый шаг — установка консоли. На Windows уже предустановлен терминал cmd.exe, но как основное «место работы» он не подходит. В качестве аналога используется эмулятор консоли, например cmder. После этого шага с официального сайта Node.js необходимо скачать последнюю версию платформы.
После запуска инсталлятора Node.js устанавливается в интерактивном режиме. В конце установки необходимо проверить версию с помощью двух команд: node -v и npm -v.
В операционных системах на основе Linux Node.js устанавливается с помощью пакетного менеджера.
Установка Node.js на OS X
Алгоритм мало отличается от установки на Windows; разница лишь в том, что предварительные шаги не нужны. С официального сайта нужно скачать последнюю доступную версию, установить ее и можно сразу пользоваться.
Frontend-разработчик
Научитесь создавать удобные и эффектные сайты, сервисы и приложения, которые нужны всем. Сегодня профессия на пике актуальности: в России 9000+ вакансий, где требуется знание JavaScript.