First, why is there event loop?

Js tasks are divided into synchronous and asynchronous tasks: 1. Synchronous tasks are directly placed on the main thread and executed in a queue; 2. Asynchronous tasks will be placed in the task queue. If there are multiple asynchronous tasks, they need to queue in the task queue, which is similar to a buffer. Call stack: it is a stack structure. A function call will form a stack frame, which contains the context information such as the parameters and local variables of the currently executing function. After the function is executed, its execution context will pop out from the stack. Js is single-threaded, single-threaded refers to parse and execute javascript code in js engine threads only one, only do one thing at a time, an ajax request, the main thread in the process of waiting for a response back to do other things, in the event table before the browser registered the ajax callback function, the response returned the callback function is added to the queue waiting for task execution, It does not block the thread; it is asynchronous. So, the process of checking whether the call stack is empty and adding a task to the call stack is the Event loop, which is at the heart of JS asynchronism.Copy the code

2. Event Loop in browser

Micro-task and Macro-task

There are two types of asynchronous queues in the browser-side event loop: Micro (micro task queue) and Macro (macro task queue).

Common macro tasks: setTimeout, setInterval, Script (overall code), I/O operations, UI rendering, etc.

Common microtasks: New Promise().then(), MutationObserve, process.nexttick (), etc.

2. The process of event cycle

Check whether the macro task queue is empty, execute a task in the macro task queue; if it is empty, continue to check whether the microtask queue is empty; if it is not empty, take out the task execution in the microtask queue, continue to check the microtask pair column after execution; if the microtask queue is empty, perform view update.Copy the code

Node event loop

1. Event loops in Node are completely different from those in browsers. Nodejs uses V8 as the PARSING engine of JS, and liBUv designed by itself is used for I/O processing. Libuv is a cross-platform abstraction layer based on event-driven, which encapsulates the underlying characteristics of different operating systems, provides a unified API externally, and the event loop mechanism is also realized in it.

2. Node operates as follows:

1. V8 engine parsing JS scripts; 2. Parsed code calls the Node API; 3. The Libuv library is responsible for node API execution. It assigns different tasks to different threads to form an event loop and asynchronously returns the execution results of tasks to V8 engine. 4. The V8 engine returns the result to the user.Copy the code

3. Six stages

The event loop in the Libuv engine is divided into six phases, which run over and over in sequence.

1. Timers: This stage performs the callback of timer (setTimeout, setInterval). 2. The I/O callbacks phase: Handles some of the few unexecuted I/O callbacks from the previous cycle; Idle, prepare stage: only internal use of the node. Poll stage: Obtain new I/O events. If appropriate conditions are considered, the node will block. 6. The Callbacks phase: Executes the socket's close event callbackCopy the code