JS macro task and micro task

One 、 About js Perform asynchronous task explanation

• js yes Single thread language （ If multithreading dom Will go crazy ）
• js Although it's single threaded , however Browsers are multithreaded ,js Encounter asynchronous tasks , I didn't deal with it myself , Instead, it is handed over to other threads of the browser
• ​ Browser threads include ：javascript Engine threads 、 Interface rendering thread 、 Browser event trigger thread 、 Program timer thread 、http Request thread, etc
• js Common asynchronous tasks are ： event 、 Timer 、 Network request, etc

Two 、js The event loop

• Single thread means , All tasks are queued , The previous task is over , Will perform the latter task
• So you can only perform one task at a time , Called the main thread , Used to perform synchronization tasks
• Outside the main thread , There are also two task lists for storing asynchronous tasks , Macro task 、 Micro task
• once “ Execution stack ” All synchronization tasks in are completed , The system will read “ Task queue ”, The corresponding event enters “ Execution stack ” Start execution , The order of execution is ： The main thread => Micro task => Macro task
• The main thread keeps repeating the third step above , That's what they say Event Loop（ The event loop ）

Macro task ： Including the overall code script,setTimeout,setIntervcal
Micro task ：Promise,process.nextTick

3、 ... and 、 Practical cases

console.log('1');
setTimeout(function() {
    
    console.log('2');
    process.nextTick(function() {
    
        console.log('3');
    })
    new Promise(function(resolve) {
    
        console.log('4');
        resolve();
    }).then(function() {
    
        console.log('5')
    })
})
process.nextTick(function() {
    
    console.log('6');
})
new Promise(function(resolve) {
    
    console.log('7');
    resolve();
}).then(function() {
    
    console.log('8')
})

setTimeout(function() {
    
    console.log('9');
    process.nextTick(function() {
    
        console.log('10');
    })
    new Promise(function(resolve) {
    
        console.log('11');
        resolve();
    }).then(function() {
    
        console.log('12')
    })
})

//js The code is from top to bottom , Line by line points to , First encounter the first line console.log(‘1’); Execution output 1, And then the second line setTimeout Asynchronous task , Put in task queue .
// Next, I met promise.nextTick It is the micro task that is put at the end of this cycle , And then I met new Promise Direct to output 7,then Put to the end of this cycle , Then perform 
// Encountered again setTimeout Put in task queue , This round of code execution is finished , Start executing the code at the end of this round in turn , Output 6,8. Then the task of the main thread is completed , No task queue 
// Take out one of setTimeout Put it into the main thread and start execution , Output 2, And then meet process.nextTick, At the end of this cycle , perform new Promise Output 4,then
// Put it at the end of this cycle , The main thread code has finished executing , Start executing the output at the end of this round 3,5. Then go to the task queue to get the second setTimeout Execution output 9,11,10,12.
// So the order of output is 1,7,6,8,2,4,3,5,9,11,10,12.