js执行机制

1.JavaScript简介

javascript是 单线程，js任务要一个接一个执行

2.JavaScript事件循环

JavaScript 广义的分为 同步任务 和 **异步任务 **

文字解释

• 同步和异步会分别进入不同的执行场所，同步的进入主线程，异步的进入Event Table 并注册回调函数
• 当指定的事件完成，Event Table 会将回调函数里的代码移入到 Event Queue
• 当主线程内的任务执行完后，会到 Event Queue读取对应的函数，进入主线程执行

3.事件循环机制

精细的分类 ： 宏仁务 和 微任务

• macro-task(宏任务)：包括整段js代码，setTimeout，setInterval
• micro-task(微任务)：Promise，process.nextTick

执行顺序

• 进入整体代码（宏任务）后，开始第一次循环，接着执行所有的微任务。然后再次从宏仁务开始，执行完这个宏仁务里的宏仁务和微任务

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代码作为第一个宏任务进入主线程，遇到console.log,输出1
• setTimeout移到宏任务，nextTick移入微任务，打印7， 将then回调移入到微任务，setTimeout移入宏任务

宏任务	微任务
setTimeout1	nextTick
setTimeout2	then

• 第一个宏任务完成后，开始执行所有的微任务 nextTick,then，得到 6，8

第二轮事件循环 （第一个setTimeout)

• 整段代码作为第一个宏任务，打印2，4，将nextTick和then移入微任务
• 执行微任务得到3，5

第三轮事件循环 （第二个setTimeout)

• 整段代码作为第一个宏任务，打印9，11，将nextTick和then移入微任务
  微任务
• 执行微任务得到3，5

第三轮事件循环 （第二个setTimeout)

• 整段代码作为第一个宏任务，打印9，11，将nextTick和then移入微任务
• 执行微任务得到10，12