Understanding of front-end macro tasks and micro tasks
JavaScript is divided into synchronous tasks and asynchronous tasks, and asynchronous tasks are divided into macro tasks and micro tasks;
macro tasks are initiated by the host (browser, Node), while micro tasks are initiated by JS itself.
Code example:
function app() {
setTimeout(() => {
console.log("1-1");
Promise.resolve().then(() => {
console.log("2-1");
});
});
console.log("1-2");
Promise.resolve().then(() => {
console.log("1-3");
setTimeout(() => {
console.log("3-1");
});
});
}
app();
Output result:
1-2
1-3
1-1
2-1
3-1
First of all, what are macro tasks and micro tasks:
Macro tasks : common timers, user interaction events, etc.
Micro tasks : Promise related tasks, MutationObserver, etc.
first principle
- Everything is ready to exit from the global context, and the timing of the end of the global synchronization code starts
- According to the code example, when console.log("1-2"); is executed, it means that the global context is about to exit, because at this time the global synchronous code has been executed, and the rest are asynchronous codes
second principle
- Under the same level (if you don’t understand the level, you can ignore it for now, I’ll talk about it later), microtasks are always executed before macrotasks
- That is, Promise.then is executed before setTimeout
- So first print 1-3, then print 1-1
How to distinguish the level?
- Codes belonging to the same dimension, for example, the following func1 and func2 belong to the same level of tasks
setTimeout(func1)...
Promise.resolve().then(func2)...
- The following fn1 and fn2 do not belong to the same level, because fn2 belongs to the internal setTimeout microtask queue, and fn1 belongs to the external setTimeout microtask queue
setTimeout(()=>{
Promise.resolve().then(fn1)
setTimeout(()=>{
Promise.resolve().then(fn2)
})})
Summarize:
When the js code is executed, the synchronous task is first executed. After the synchronous task is executed, the asynchronous task is executed. When the asynchronous task is executed, the microtask is executed first and the macrotask is executed at the same level, and so on~
According to the above code example, when the app() method is called, the synchronous task console.log("1-2"); in the code is executed first, 1-2 is printed, and then the asynchronous task is executed. The asynchronous task at the same level has setTimeout( Macro task) and Promise (micro task), according to the order of micro task and then macro task at the same level, first execute Promise to print 1-3, then execute setTimeout to print 1-1, and then execute 2-1 and 3 in sequence according to the execution order -1.