JS Event Loop Microtask Macrotask

The previous article said a bit about JS in the timer setTimeout and setinterval implementation principle. Both timers are executed asynchronously, which is part of the process of JS execution.

The model that JS itself executes is the event loop.

JS will create a loop at startup, and each cycle will go to the task queue to find the task to be done. When a task in the queue is executed, the loop will go to the next task to execute. The process of JS execution is the continuous execution of the loop. Code like timers, user-triggered events, promise, and so on, will be pushed toward this task queue as specified.

The task queue is not the only one, with Microtasks and macrotasks points. Macrotask query is a task query, and each macrotask has a microtask. JS start execution, will take a macrotask, and then take the inside of the Microtask to execute. After the current Microtask executes, a microtask is removed until the microtask executes, then exits the Macrotask, executes the next macrotask, and then keeps looping. is equivalent to having a task query, and each task in this queue is equivalent to a task query.

So the phenomenon we observe intuitively, is that these async methods have a priority, microtask than macrotask priority, higher priority than the priority is lower than the first execution, the same priority is based on the time to enter the queue to execute.

Macrotasks:settimeout setinterval setimmediate I/O UI rendering

Microtasks:promise Process.nexttick Object.observe Mutationobserver

See an example:

1Console.log (' Start ')2 3Promise.resolve (). then (() = {4Console.log (' Promise 1 ')5 })6 7SetTimeout (() = {8Console.log (' SetTimeout 1 ')9Promise.resolve (). then (() = {TenConsole.log (' Promise 2 ') OnePromise.resolve (). then (() = { AConsole.log (' Promise 3 ') -}). Then (() = { -Console.log (' Promise 4 ') the         }) -}). Then (() = { -SetTimeout (() = { -Console.log (' SetTimeout 2 ') +Promise.resolve (). then (() = { -Console.log (' Promise 5 ') +             }) A}, 0) atConsole.log (' Promise 6 ') -     }) -Console.log (' SetTimeout 2 ') -}, 0) -  -SetTimeout (() = { inConsole.log (' SetTimeout 3 ') -Promise.resolve (). then (() = { toConsole.log (' Promise 7 ') +     }) -Console.log (' SetTimeout 4 ') the}, 0) *  $Promise.resolve (). then (() = {Panax NotoginsengConsole.log (' Promise 8 ') -})

Execution results are

Startpromise 1promise 8setTimeout 1setTimeout 2promise 2promise 3promise 6promise 4setTimeout 3setTimeout 4promise 7setTi Meout 2promise 5

JS Event Loop Microtask Macrotask