JavaScript присутствует повсюду, начиная с веб-браузеров и заканчивая устройствами IoT, поэтому очень важно иметь надлежащие знания об основах этих систем и о том, что происходит под капотом каждый раз, когда мы разрабатываем приложение в одной из разновидностей JS (Angular). , Vue.js, React, Express и т. д.).
На следующих диаграммах мы видим высокоуровневую архитектуру веб-браузера и сервера, на котором работает Node.js.
Они похожи и используют среду выполнения JS (V8, JavaScriptCore, ChakraCore или SpiderMonkey), которая, в конце концов, и выполняет наши приложения JavaScript.
JS-среда выполнения.
Среда выполнения JS имеет только один стек (также известный как стек вызовов) и кучу памяти.
Вероятно, вы слышали, что JavaScript является однопоточным; то есть это может запускать только одну вещь за раз, теперь вы знаете, почему это так.
Куча памяти — это место, где происходит выделение памяти.
Я подробнее остановлюсь на этих темах в другом посте.
Стек вызовов.
Стек вызовов — это структура данных, которая записывает, в какой программе мы находимся. Если мы входим в функцию, мы помещаем ее на вершину стека. Если мы возвращаемся из функции, мы выскакиваем из вершины стека. Это все, что может сделать стек.
Обратный звонок/Очередь сообщений.
Рассмотрим функцию, которая требует значительного времени для обработки, например, fetch() или асинхронную функцию, и JS не может дождаться завершения этой функции, потому что наш стек будет заблокирован, и, как следствие, наше веб-приложение будет тоже перестал.
Среда выполнения JS использует очередь сообщений, которая представляет собой список сообщений, подлежащих обработке. Каждое сообщение имеет связанную с ним функцию, которая вызывается для обработки сообщения.
В какой-то момент цикла событий среда выполнения начинает обрабатывать сообщения в очереди, начиная с самого старого. Затем сообщение удаляется из очереди и вызывается соответствующая функция с сообщением в качестве входного параметра. Как всегда, вызов функции создает новый кадр стека для использования этой функцией.
Обработка функций продолжается до тех пор, пока стек снова не станет пустым. Затем цикл обработки событий обработает следующее сообщение в очереди (если оно есть).
Цикл событий.
Затем Event Loop — это механизм, который обрабатывает все эти задачи (События, Асинхронные функции и т.д.), которые находятся в Очереди Обратных Обратных вызовов/Сообщений, и когда они готовы к выполнению, добавляет старые в Стек вызовов, когда есть доступный.
Мы можем увидеть, как все эти концепции работают вместе в следующем моделировании.
Я надеюсь, что этот пост может быть полезен, и не забывайте комментировать, если у вас есть вопросы, или связаться со мной в Твиттере. Пока :)
В сериале.
П.Д.: Если этот пост был вам полезен, поддержите меня, купив одну из этих книг или одну из JS Starter для вашего нового проекта. Спасибо заранее :)
