js in macro and micro tasks task

If you already know the task of macro and micro-task js exist, then you will already have had a promise. Because the js promise is a micro task entry.
First look at a question:

setTimeout(function(){
    console.log('setTimeout')
});

new Promise(function(resolve, reject){
    console.log('pormise body');
    resolve();
}).then(function(){
    console.log('promise then')
});

console.log('main');

The answer to this question is:

promise body
main
promise then
setTimeout

promise body on the first line is not unexpected, surprise, setTimeout appeared in the back of the promise then.
 
setTimeout is asynchronous call and promise then, setTimeout and defined before the promise, if not unexpected, should be the first output setTimeout fishes, but actually the opposite.
 
Here it comes to the knowledge point is the macro and micro tasks task. Share your experiences code above:

setTimeout(function(){ // 同步代码，语句1
    console.log('setTimeout') // 宏任务，语句2
});

new Promise(function(resolve, reject){
    console.log('pormise body'); // 同步代码，语句3
    resolve(); // 同步代码，语句4
}).then(function(){
    console.log('promise then') // 微任务，语句5
});

console.log('main'); // 同步代码，语句6

Then the rule they are running what is it?
 
Originally, the macro and micro-mission tasks, each of which has both a call queue (FIFO).
 
It encounters a macro task, micro tasks, they will push their call queue. It should be noted that the synchronization code is a macro task.
 
A macro executing the task, the task queue to empty the micro, micro task emptied and then go to the next macro task.
 
Let's put the above code line by line reading about:
 
First define two queues, the macro task queue: MacroQqueue, micro task queue: MicroQueue
 
first step, press the synchronization code sequence runs
synchronization code, sentence 1: Adding a macro task, statement 2 push MacroQueue. // MacroQueue: [{task: Statement 2}]
a synchronization code, statement 3: Printing promise body
synchronization code, statement 4: adding a micro-task, the statement 5 push MicroQueue. // MicroQueue: [{task: Statement 5}]
synchronization code, statement 6: printing main. // synchronization code (macro task) to complete
 
the second step, the task queue began to empty the micro-
micro-tasks: 5 statement, jumped from MicroQueue, print promise then. // micro task queues are empty
 
third step, the task queue began to empty macro
macro tasks: 2 statement, jumped from MacroQqueue, print setTimeout // macro task queues are empty
 
Step four: start emptying micro task queue
queue is empty ...
 
a cycle is complete. Start the next round, so the cycle continues.
 
Through the above explanation, we should be able to macro task, the task of micro-operation mechanism have a certain understanding of it. So what are the common task of macro and micro task has it?
See the following table:
 

Macro task	Browser	nodejs
Synchronization code	✅	✅
I / O	✅	✅
setTimeout	✅	✅
setInterval	✅	✅
setImmediate	❌	✅
requestAnimationFrame	✅	❌

 

Micro-task	Browser	nodejs
process.nextTick	❌	✅
MutationObserver	✅	❌
Promise （async/await）	✅	✅

Well, we point to a complex question practice your hand:

console.log('sync statement 1');
Promise.resolve().then(function() {
    console.log('micro task 1');
    setTimeout(function() {
        console.log('macro task 1');
    }, 0);
}).then(function() {
    console.log('micro task 2');
});

setTimeout(function() {
    console.log('macro task 2')
    Promise.resolve().then(function(){
        console.log('micro task 3');
    })
}, 0)
console.log('sync statement 2');

//输出：
// sync statement 1
// sync statement 2
// micro task 1
// micro task 2
// macro task 2
// micro task 3
// macro task 1

It marked to facilitate analysis:

console.log('sync statement 1'); // 同步代码，语句1
Promise.resolve().then(function() { // 同步代码，语句2，注册了一个微任务
    console.log('micro task 1'); // 微任务，语句3
    setTimeout(function() { // 微任务，语句4，同时注册了一个宏任务
        console.log('macro task 1'); // 宏任务，语句5
    }, 0);
}).then(function() {
    console.log('micro task 2'); // 微任务，语句6
});

setTimeout(function() { // 同步代码，语句7
    console.log('macro task 2') // 宏任务，语句8
    Promise.resolve().then(function(){ // 宏任务，语句9，同时注册了一个微任务
        console.log('micro task 3'); // 微任务，语句10
    })
}, 0)
console.log('sync statement 2'); // 同步代码，语句11