Цикл событий — одна из тех запретных тем, о которых никто не хочет говорить из-за сложности некоторых основных концепций. Но на самом деле, это одна из самых важных концепций, чтобы понять, как работает JavaScript под капотом, сегодня мы прольем свет посреди ночи, чтобы отразить зло, где бы оно ни скрывалось, поняв, как язык сети управляет его задачи.
Есть два основных аспекта, которые следует учитывать, когда JavaScript Engine читает и выполняет наш код:
- Нам нужно место для хранения и записи информации (переменные, функции и т.д.)
- Нам нужно отслеживать, что происходит с нашим кодом, строка за строкой.
Javascript организует переменные и задачи, используя четыре понятия: стек вызовов, очередь событий, запланированная очередь и куча памяти.
Стек вызовов
Стек — это линейная структура данных, которую JavaScript использует для упорядочения вызовов функций в зависимости от области действия определенной функции (глобальная область, область действия блока, область действия функции). Он хранит элементы, используя метод «последний пришел, первый ушел» (LIFO). Всякий раз, когда новый элемент добавляется в стек, он добавляется на вершину стека, и верхний элемент всегда удаляется из стека первым.
Мы можем представить себе стопку как кучу посуды, в которой вы ставите одну посуду на другую. Но вот в чем дело, вы не можете взять первый элемент, который вы добавили, только последний, вот когда используется концепция Последний пришел, первый ушел (LIFO) применены.
На самом деле, название веб-сайта Stack Overflow навеяно очень злой проблемой, которая часто возникает, и называется она Stack Overflow. Это происходит, когда мы снова и снова вызываем функции, вложенные друг в друга. Если мы просто будем добавлять функции в стек, не извлекая их из стека, у нас будет переполнение стека. Мы можем очень легко вызвать этого демона, используя рекурсию.
Куча памяти
Куча памяти — это просто область, в которой память выделяется или освобождается без какого-либо порядка; когда мы создаем новую переменную, куча памяти создает ссылку для хранения нашей переменной. Это противоположно стеку, в котором память освобождается по принципу последним пришел, первым ушел (LIFO).
Очередь событий и запланированная очередь
Очередь — это линейная структура данных, в которой используется порядок первым пришел — первым обслужен (FIFO). Цикл событий имеет запланированную очередь и очередь событий, каждая из которых играет жизненно важную роль в том, что JavaScript кажется многопоточным языком, хотя на самом деле это не так.
Очередь событий — это специальная очередь, которая отслеживает все очереди функций, которые необходимо поместить в стек вызовов. Очередь событий отвечает за отправку новых функций на дорожку для обработки. Структура данных очереди необходима для поддержания правильной последовательности, в которой все операции должны отправляться на выполнение.
Запланированная очередь содержит все асинхронные задачи, которые должны быть выполнены в будущем; на самом деле, всякий раз, когда стек вызовов и очередь событий пусты, запланированные задачи будут передаваться в очередь событий, а затем в стек вызовов.
На самом деле, когда дело доходит до промисов в JavaScript, у нас есть дополнительная концепция, которую нам нужно рассмотреть, — очередь микрозадач. Очередь микрозадач — это очередь, в которой есть все промисы и которая будет иметь приоритет над запланированной очередью.
Цикл событий
Цикл событий является главным героем нашей игры, он отвечает за проверку того, есть ли задача, ожидающая выполнения, на самом деле, он находится посередине между стеком вызовов и очередью событий, удостоверяясь, что есть задача либо в очереди событий, либо в очереди микрозадач, которая должна быть передана в стек вызовов для выполнения, мы упоминали ранее, что очередь микрозадач имеет более высокий приоритет, чем запланированная очередь, ну, мы собираемся объяснить процесс, чтобы понимать на более глубоком уровне.
Когда в стеке вызовов есть задачи, они будут выполняться, и поэтому выполненные задачи будут удалены из стека вызовов, когда стек вызовов пуст, цикл событий будет проверять, есть ли какая-либо задача в запланированном очереди, очереди микрозадач и в очереди событий, если в очереди событий нет задачи, цикл событий будет отображаться в запланированной очереди, если есть запланированная задача, цикл событий передаст эту задачу в очередь событий а затем он также увидит, есть ли задача в очереди микрозадач, в случае, если есть задача, цикл обработки событий передаст задачу в очереди микрозадач в стек вызовов, и, наконец, когда задача будет завершена и удалена из стека вызовов запланированная задача, которая находилась в запланированной очереди и была передана в очередь событий, будет передана в стек вызовов.
На изображении ниже мы видим обзор движка JavaScript; в данном случае «Web Api» — это то место, куда попадет запланированная задача. По практическим соображениям мы разделили очередь на две части: очередь событий и очередь микрозадач, чтобы лучше понять, как цикл событий определяет приоритеты выполнения.
Теперь, когда мы знаем, как работает цикл событий, мы можем написать лучший асинхронный код с более глубоким пониманием основных концепций, лежащих в основе JavaScript, красота понимания процесса и замечание, что в нем нет магии, это просто инженерное искусство, созданное невероятными умами, которые влияют на то, как мы разрабатываем веб-приложения, и на возможности, которые у нас есть как у разработчиков, чтобы изменить жизнь миллионов пользователей по всему миру.
Давайте прольем свет во тьму и избавим пользователей от переполнения стека.
Автор: Йосеф Бландин.
Посетите наш сайт и узнайте о наших услугах: https://turpialdev.com/
Подписывайтесь на нас!
https://www.instagram.com/turpialdev/
https://www.facebook.com/turpialdev
«https://www.linkedin.com/company/turpial- разработка"
