JS event loop mechanism: synchronous tasks, macro tasks, micro tasks

Synchronous tasks, macro tasks, micro tasks

Synchronous tasks, macrotasks, and microtasks belong to the problem of the event loop mechanism in JavaScript. In the JavaScript runtime environment, there is a main thread and a task queue, and all codes will be queued into the task queue. When the main thread is idle, it will take a task from the task queue and execute it. The tasks in JavaScript can be divided into three types : synchronous tasks, macro tasks and micro tasks , and they are arranged in different order in the task queue.

Synchronous tasks are tasks executed directly on the main thread, and are executed sequentially.

Macrotasks and microtasks are tasks executed asynchronously, and will be put into the corresponding task queue first, and then retrieve and execute the macrotasks and microtasks after the tasks on the main thread are executed. The difference is that the execution order of macro tasks and micro tasks is different:

• Macro tasks include tasks such as setTimeout, setInterval, I/O, UI Rendering, etc., which will be put into the macro task queue, and wait for the synchronization tasks executed by the main thread to be executed before taking out and executing the tasks in the macro task queue.

• Microtasks include tasks such as Promise, process.nextTick, Object.observe, MutationObserver, etc., which will be put into the microtask queue, and wait for the synchronization tasks executed by the main thread and the tasks in the macrotask queue to be executed before taking out and executing the microtasks. Tasks in the task queue.

Therefore, in the JavaScript runtime environment, we need to understand the event loop mechanism and the execution order of synchronous tasks, macro tasks, and micro tasks in order to correctly understand the execution process and results of the code.

The execution order of tasks in JavaScript is as follows:

1. Execute synchronous tasks, that is, tasks that are executed sequentially.

2. Execute a task in the current macro task queue, such as setTimeout, setInterval, setImmediate, etc.

3. Executes all tasks in the microtask queue that can be executed immediately, such as Promise, process.nextTick, etc.

4. Go back to the macro task queue, execute the next macro task, and repeat steps 2 and 3.

The execution order of asynchronous tasks in JavaScript follows the task queue mechanism. In an event loop cycle, there may be multiple macrotasks (such as setTimeout, setInterval, etc.), and a queue of microtasks (such as Promise, process.nextTick, etc.). Whenever a macro task is executed, a task will be sequentially taken from the micro task queue for execution until all micro tasks are executed; then the execution of the next macro task will start.

Here is a code example that demonstrates the sequence of execution above:

console.log(1);

setTimeout(() => {
    
    
  console.log(2);
  Promise.resolve(3).then(data => console.log(data));
})

Promise.resolve(4).then(data => console.log(data));

console.log(5);

The execution result of this code is: 1 5 4 2 3.

The explanation is as follows:

1. Execute the synchronization task and output 1.
2. Execute setTimeout(() => {console.log(2);...}), put the callback function into the macro task queue.
3. Execute Promise.resolve(4).then(data => console.log(data)), put the callback function into the microtask queue.
4. Execute console.log(5)and output 5.
5. Execute the callback function in the microtask queue and output 4.
6. Take out the callback function in the macro task queue and execute it, and output 2.
7. Execute Promise.resolve(3).then(data => console.log(data)), put the callback function into the microtask queue.
8. Execute the callback function in the microtask queue and output 3.

It should be noted that setTimeout will add the function it is in to the macro task queue, and Promise.resolve.then will add the callback function to the micro task queue. When encountering a microtask queue, all microtasks must be executed before the next macrotask is executed.