Macro task and micro task understanding

1. What is a macro task Micro task

js It's a single thread language Simply speaking There is only one channel When there are many tasks There will be congestion This situation arises ‘ Multithreading ’ But this kind of ‘ Multithreading ’ It is imitated by single thread That's fake Then there is Sync 、 Asynchronous task .

2.JS Why distinguish Macro task 、 Micro task

1 js It's single threaded But sub synchronous asynchronous
2 Macro task 、 All micro tasks are Asynchronous task They all belong to a queue

3. Macro task 、 Micro task What are they?

Macro task script、setTimeout、setInterval、postMessage、MessageChannel、setImmediate
Micro task Promise.then、Object.observe、MutationObserver、process.nextTick

4. Macro task 、 Micro task How to execute

Execute synchronization code first
encounter Asynchronous macro task Will Asynchronous macro task Put in Macro task queue
encounter Asynchronous micro task Will Asynchronous micro task Put in In the micro task queue
When all synchronization code is executed
then Asynchronous micro task Call in from the queue Main thread execution
When the micro task is completed
then Asynchronous macro task Call in from the queue Main thread execution
Cycle all the time until All tasks are completed

5. Case study

setTimeout(function(){
    
    console.log(1)
})
new Promise(function(resolve){
    		    
    console.log(2)
    resolve()
}).then(function(){
    		    
    console.log(3)
}).then(function(){
    
    console.log(4)
})		
console.log(5)
// 2 5 3 4 1

1. encounter setTimeout Asynchronous macro task Put in the macro task queue
2. encounter new Promise new Promise The code executed when instantiating is synchronous So the output 2
3. Promise then Asynchronous micro task Put it in the queue of microtasks
4. Encounter synchronization task Output 5 The synchronization task in the main thread has finished executing
5. take Asynchronous micro task Call in from the queue Main thread execution Output 3 4 The micro task queue is empty
6. take Asynchronous macro task Call in from the queue Main thread execution Output 1 Macro task queue is empty

setTimeout(() => {
    
    new Promise(resolve => {
    
        resolve()
    }).then(() => {
    
        console.log('test')
    })
    console.log(4)
})
new Promise(resolve => {
    
    resolve()
    console.log(1)
}).then( () => {
    
    console.log(3)
    Promise.resolve().then(() => {
    
        console.log('before timeout')
    }).then(() => {
    
        Promise.resolve().then(() => {
    
          console.log('also before timeout')
        })
    })
})
console.log(2)
// 1, 2, 3, before timeout, also before timeout, 4, test

1. encounter setTimeout Asynchronous macro task Put in the macro task queue
2. encounter new Promse new Promse When instantiating The code executed is synchronized So the output 1
3. and Promise.then Asynchronous micro task Put it in the queue of microtasks
4. Encounter synchronization task Output 2 The synchronization task in the main thread has finished executing
5. take Asynchronous micro task Call in from the queue Main thread execution Output 3
   In this micro task There are micro tasks Promise.resolve().then( Micro task A).then( Micro task B) Put them in the micro task queue in turn
6. From the micro task queue Take out Micro task A Put in In the main thread Output before timeout
7. From the micro task queue Take out Micro task B Put in In the main thread Micro task B And then there is Micro task C Put it in the queue of microtasks
8. From the micro task queue Take out Micro task C Put in In the main thread Output also before timeout The micro task queue is empty
9. From the macro task queue Take out Macro task Put in In the main thread This task There is a micro task D Put it in the queue of microtasks Next, output 4 Macro task queue is empty
10. From the micro task queue Take out Micro task D Put in In the main thread Output test The micro task queue is empty

console.log(1)
setTimeout(function() {
    
    console.log(2)
}, 0)
const p = new Promise((resolve, reject) => {
    
    resolve(4)
})
p.then(data => {
    
    console.log(data)
})
console.log(3)
// 1, 3, 4, 2

1. Encounter synchronization task Output 1
2. encounter setTimeout Asynchronous macro task Put in the macro task queue
3. encounter Promise new Promise The code executed during instantiation is synchronized But because of new Promse No output events So go ahead and do encounter .then
4. perform .then Asynchronous micro task Put in In the micro task queue
5. Encounter synchronization task Output 3 The synchronization task in the main thread has finished executing
6. from In the micro task queue Take out Micro task Put in In the main thread Output 4 The micro task in the main thread has finished executing
7. from Macro task queue Take out Macro task Put in In the main thread Output 2 The macro task in the main thread has finished executing

console.log(1)
setTimeout(function() {
    
    console.log(2)
    new Promise(function(resolve) {
    
        console.log(3)
        resolve()
    }).then(function() {
    
        console.log(4)
    })
})

new Promise(function(resolve) {
    
    console.log(5)
    resolve()
}).then(function() {
    
    console.log(6)
})

setTimeout(function() {
    
    console.log(7)
    new Promise(function(resolve) {
    
        console.log(8)
        resolve()
    }).then(function() {
    
        console.log(9)
    })
})
console.log(10)
// 1, 5, 10, 6, 2, 3, 4, 7, 8, 9

1. Encounter synchronization task Output 1
2. encounter setTimeout Asynchronous macro task Put in the macro task queue
3. encounter Promise new Promise The code executed during instantiation is synchronized So the output 5 So go ahead and do encounter .then
4. perform .then Asynchronous micro task Put in Micro task queue in
5. encounter setTimeout Asynchronous macro task Put in Macro task queue
6. Encounter synchronization task Output 10 The synchronization task in the main thread has finished executing
7. from In the micro task queue Take out Micro task Put in In the main thread Output 6 The micro task in the main thread has finished executing
8. from Macro task queue Take out Macro task Put in In the main thread Execute the first Output 2 3 4
9. Carry out the second setTimeout Output 7 8 9 The macro task in the main thread has finished executing

new Promise((resolve, reject) => {
    
    resolve(1)
    new Promise((resolve, reject) => {
    
        resolve(2)
    }).then(data => {
    
        console.log(data)
    })
}).then(data => {
    
    console.log(data)
})
console.log(3)
// 3, 2, 1

1. encounter Promise new Promise The code executed during instantiation is synchronized But because of No output events
   So go on encounter new Promse No output events And then go on encounter .then Asynchronous micro task Put it in the queue of microtasks
2. We'll go on with the .then Asynchronous micro task Put it in the queue of microtasks
3. Encounter synchronization task Output 3 The synchronization task in the main thread has finished executing
4. From the micro task queue Take out Micro task Put in The main thread in Output 2 3 The micro task in the main thread has finished executing Task queue is empty

summary

First synchronous then asynchronous
asynchronous contain Macro task Micro task
asynchronous encounter Micro task Do the micro task first After the execution If there is no micro task Just go to the next macro task