js-宏任务和微任务

一、关于js执行异步任务详解

• js是单线程语言（如果多线程dom会疯掉）
• js虽然是单线程，但是浏览器是多线程的，js碰到异步任务，并没有自己处理，而是交给了浏览器的其他线程
• ​浏览器的线程包括：javascript引擎线程、界面渲染线程、浏览器事件触发线程、程定时器线程、http请求线程等
• js异步任务常见的有：事件、定时器、网络请求等

二、js事件循环

• 单线程就意味着，所有任务需要排队，前一个任务结束，才会执行后一个任务
• 所以在同一时间只能执行一个任务，称为主线程，用来执行同步任务
• 主线程之外，同时还有两个任务列表用于存放异步任务，宏任务、微任务
• 一旦“执行栈”中的所有同步任务执行完毕，系统就会读取“任务队列”，对应的事件进入“执行栈”开始执行，执行顺序为：主线程=>微任务=>宏任务
• 主线程不断重复上边的第三步，也就是常说的Event Loop（事件循环）

宏任务：包括整体代码 script，setTimeout，setIntervcal
微任务：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’)；执行输出1，然后第二行setTimeout异步任务，放入任务队列。
//下面遇到promise.nextTick是微任务放到本轮循环的结尾，之后遇到new Promise直接指向输出7，then被放到本轮循环的结尾，接着执行
//又遇到的setTimeout放到任务队列，本轮代码执行完，开始依次执行本轮结尾的代码，输出6,8。然后主线程的任务执行完毕，无任务队列
//中取出一个setTimeout放入主线程开始执行，输出2，然后遇到process.nextTick，放到本轮循环的结尾，执行new Promise输出4,then
//放入本轮循环结尾，主线程代码执行完，开始执行本轮结尾输出3,5。然后再去任务队列中取第二个setTimeout执行输出9,11,10,12。
//所以输出的顺序为1，7，6，8，2，4，3，5，9，11，10，12。