Как вы знаете, JavaScript — это однопоточный язык. Итак, очень важно знать, как наши коды будут работать в JavaScript, когда у нас есть сложные коды и трудоемкие функции. Что произойдет, если часть наших кодов может занять много времени? Должен ли он блокировать поток и весь процесс наших кодов?

Конечно же нет!!!!!!

Нам нужно обрабатывать их асинхронно. Следовательно, остальные коды будут обрабатываться и ничего не будет заблокировано. В этой статье мы рассмотрим некоторые ключевые концепции языка JavaScript, такие как:

Стек вызовов

Цикл событий

Микрозадачи

Макрозадачи

Стек вызовов

Стек вызовов — это механизм, отвечающий за отслеживание вызовов различных функций. При вызове функции интерпретатор JavaScript добавит ее в стек вызовов и запустит. Если эта функция вызывает другую функцию (что случается часто), интерпретатор добавит вызываемую функцию в стек вызовов.

Мы знаем, что стек — это структура данных LIFO. LIFO расшифровывается как «последним пришел, первым вышел». Итак, вызываемая функция будет обработана и после завершения процесса интерпретатор снимает ее со стека и возобновляет выполнение предыдущей функции.

Этот цикл будет повторяться до тех пор, пока вся функция не будет обработана.

Цикл событий

Мы знаем, что Javascript — это однопоточный язык. В фоновом режиме он обрабатывает множество запросов, используя цикл обработки событий. Цикл событий JavaScript — это механизм, который позволяет выполнять код JavaScript без блокировки. Он работает, непрерывно выполняя задачи одну за другой из очереди задач и позволяя другим кодам выполняться между ними. Это означает, что код может продолжать работать, даже если выполняется длительная задача.

Микрозадачи и макрозадачи

Микрозадачи — это небольшие высокоприоритетные задачи, которые выполняются перед любыми другими задачами. Примеры микрозадач включают Promises, MutationObserver, queueMicrotask и process.nextTick в Node.js. Микрозадачи выполняются сразу после завершения текущей задачи.

С другой стороны, макрозадачи — это более крупные задачи с более низким приоритетом, которые выполняются после завершения всех микрозадач. Примеры макрозадач включают setTimeout, setInterval и отрисовку пользовательского интерфейса. Макрозадачи выполняются только после выполнения всех микрозадач.

Разница между микрозадачами и макрозадачами

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

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

Заключение

В заключение, разница между микрозадачами и макрозадачами в цикле событий JavaScript имеет решающее значение для оптимизации вашего кода JavaScript. Понимая приоритеты и варианты использования каждого типа задач, вы можете максимально эффективно использовать цикл событий JavaScript и гарантировать, что ваш код работает эффективно.

P.S:

Видео на YouTube, посвященное этой статье: https://www.youtube.com/watch?v=YiDzk6hO37U

Коды GitHub для этой статьи: https://github.com/DevEmpower/youtube-common-projects/tree/main/0007-Call-Stack-and-Event-Loop-in-Javascript