preface

The browser event loop, which most basic interviews will ask about, is covered in this article.

Event loop mechanism

Event loops are a set of mechanisms responsible for executing code, collecting and processing events, and executing subtasks in queues.

In the event loop, the stack data structure used is the execution context stack. Whenever a function is called, the corresponding execution context is created and pushed onto the stack. Heap data structures are used primarily to represent a largely unstructured area of memory where objects are stored; The queue data structure used is the task queue, which is mainly used to store asynchronous tasks. The diagram below:

Execution context stack

In the process of JavaScript code to run, will enter the different execution environments, one starts the first to enter the global environment, the global context is created first incorporated into the stack, then when the function is to enter the corresponding function environment, the corresponding function is incorporated into the stack context is created, when in after the completion of the execution context code execution on the top of the stack, Will push it off the stack. The stack in question is the execution context.

Task queue

In the event loop mechanism, there are many kinds of task queues, which are divided into macro task queue and micro task queue.

Macro task

Macro tasks include setTimeout, setInterval, I/O, UI Rendering.

Micro tasks

Microtasks include Promise, Object.Observe (deprecated), and MutationObserver (a new feature in HTML5).

The flow of the event loop mechanism

  1. The main thread executes the whole JavaScript code and forms the execution context stack. When encountering various task sources, the asynchronous task specified by the main thread is suspended. After receiving the response result, the asynchronous task is put into the corresponding task queue until the execution context stack only has the global context.

  2. All task queues in the microtask queue are pushed and executed according to priority and asynchronous tasks in a single task queue are pushed and executed in a first-in-first-out manner until all microtask queues are emptied.

  3. The asynchronous tasks in the macro task queue with the highest priority in the task queue are pushed and executed in first-in first-out mode.

  4. Repeat steps 2 and 3 until all macro and micro task queues are empty and the global context is unloaded.

To put it simply, the process of the event loop mechanism is that the main thread executes the whole JavaScript code and dispatches the tasks specified by each task source to each task queue, and then the microtask queue and macro task queue are pushed alternately for execution until all task queues are cleared and the global context is pushed out of the stack.

The last

Node.js does have an event loop, but it’s completely different from the browser’s event loop. Node.js uses V8 as the PARSING engine of JS, and libuv designed by myself is used for I/O processing. Libuv is a cross-platform abstraction layer based on event-driven, which encapsulates some underlying features of different operating systems and provides a unified API externally. The event loop mechanism is also implemented inside it. I won’t expand on it here, but if you want to know more about it, go to the documentation.

Thanks for reading!

Need to add wechat communication, can leave a message!