JS基础知识三：宏任务和微任务

宏任务和微任务

一、宏队列，macrotask，也叫tasks。 一些异步任务的回调会依次进入macro task queue，等待后续被调用

• setTimeout
• setInterval
• setImmediate (Node独有)
• requestAnimationFrame (浏览器独有)
• I/O
• UI rendering (浏览器独有)

二、微队列，microtask，也叫jobs。 另一些异步任务的回调会依次进入micro task queue，等待后续被调用

• process.nextTick (Node独有)
• Promise
• Object.observe
• MutationObserver

三、执行顺序（宏任务->微任务->宏任务->微任务···）

1. 执行script中代码，有一些是同步任务，有一些是异步任务，遇同步任务立即执行，遇异步任务分别丢入对应任务队列中(宏任务放进宏队列中，微任务放入微队列中)，全局Script代码执行完毕后，同步任务执行完毕，栈Stack会清空
2. 全局Script代码执行算一次宏任务，所以下面就执行刚才放入进微队列中的微任务，按照先进先出的顺序执行，清空微队列
3. 接着执行宏队列，按照先进先出的顺序执行，如果执行的宏任务中有微任务，也是先执行宏任务中的’普通任务’，把微任务丢入微队列，等执行完该个宏任务中的’普通任务’，再执行微队列中的所有微任务，清空微队列
4. 接着执行下一个宏任务，···循环第3步骤

示例：

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')
    })
})

输出1,5,6,2,3,4,7,8,9
输出过程：
遇到console,直接执行输出1；遇到setTimeout，放入宏队列，记做time1；,遇到new Promise，直接执行console.log(‘5’)，输出5；then()放入微队列中；遇到setTimeout，放入宏队列，记做time2；

此时，全局执行完毕，第一个宏任务结束，所有执行微队列，此时有then()，所有输出6；微队列清空

接着执行宏队列，第一个宏任务time1执行，先执行“普通任务”,输出2；遇new Promise直接输出3，又把then放入微队列，直到所有“普通任务”执行完毕，执行微队列中微任务，输出4；微队列清空

接着执行宏队列，第二个宏任务time2执行，先执行“普通任务”,输出7；遇new Promise直接输出8，又把then放入微队列，直到所有“普通任务”执行完毕，执行微队列中微任务，输出9；微队列清空