Introduction to the

Event loops are the cornerstone of the mechanism that JavaScript uses to solve execution inefficiencies caused by single-thread blocking. Event Loops have different models in different JavaScript hosting environments.

Task queue

A task queue is a linear structure used to store callbacks of asynchronous tasks. Because asynchronous tasks are different from one another, the task queue also consists of multiple queues.

Microtask Queue

  • setTimeout/setTimeout
  • setImmediate
  • requestAnimationFrame
  • I/O
  • UI Rendering (browser only)

Microtask Queue

  • Process. nextTick (Node only)
  • Promise
  • Object.observe
  • MutationObserver

Event loops in the browser environment

Event cycle model

  1. Execute script synchronization code
  2. The execution stack is empty
  3. Retrieves the first callback task from the microtask queue and executes it on the call stack
  4. Continue to take out the task at the top of the microtask queue, put it into the call stack, and so on, until all the tasks in the microtask queue have been executed
  5. Take out the task at the head of the MacroTask queue and place it on the call stack
  6. Repeat steps 2-5

The flowchart is roughly as follows:

Event loops in Nodejs

In Node, the event loop behaves roughly the same as in the browser. The difference is that Node has its own model. The implementation of event loops in Node relies on the Libuv engine. As we know, Node selects Chrome V8 engine as the JS interpreter. V8 engine analyzes THE JS code and calls the corresponding Node API, which is finally driven by libuv engine to perform the corresponding tasks and put different events in different queues waiting for the main thread to execute. So the event loop in Node actually exists in the Libuv engine.

Event cycle model

In NodeJS Event Loop, the macro queue callback task has 6 stages, as shown below:

The tasks performed in each phase are as follows:

timer

The Timers phase performs setTimeout and setInterval callbacks and is controlled by the Poll phase.

I/O

Execute callbacks except for close events, callbacks set by Timers, and callbacks set by setImmediate()

idle, prepare

Only used internally by node

poll

Poll is a crucial stage in which the system does two things

  • Go back to the Timer phase and perform the callback
  • Perform I/O callback

If the timer is not set when entering this phase:

  • If the poll queue is not empty, the callback queue is traversed and executed synchronously until the queue is empty or the system limit is reached
  • If the poll queue is empty andsetImmediateThe callback needs to be executed, and the poll phase stops and goes to the Check phase to execute the callback
  • If the poll queue is empty andsetImmediateThe callback does not need to be executed, it waits for the callback to be queued and executes immediately, again with a timeout setting to prevent waiting forever

If timer is set:

  • If the poll queue is empty, the poll queue determines whether any timer has timed out, and if so, the callback is returned to the timer phase

check

The Check phase performs the setImmediate callback

close callbacks

Perform socket. On (‘ close ‘,…). These callbacks

In the case of MicroTask, it empties the MicroTask queue before each of the above phases is complete

Refer to the article

Learn the Event Loop once (Once and for all)