宏任务与微任务

规则

1. Js解析Function(整个script视为global Function)时，将同步任务排队到执行栈中，异步任务排队到事件队列中。

2. 事件队列中的任务分为:
   宏任务：Function，CallBack ：setTimeout，setInterval，setImmediate，I/O，UI交互事件
   微任务：PromiseCallBack process.nextTick MutationObserverCallBack

3. 浏览器环境中执行方法时，先将执行栈中的任务清空，再将微任务推到执行栈中并清空，之后检查是否存在宏任务，若存在则取出一个宏任务，执行完成检查是否有微任务，以此循环…

4. Event Loop在浏览器与node环境中的区别：
   浏览器环境每次执行一个宏任务，再去检查微任务
   node会清空当前所处阶段的队列，即执行所有task，再去检查微任务

栗子

1. 首先执行所有宏任务 A.log1；B.setTimeout1将回调加入宏任务队列eventTable；C.创建Promise并执行构造函数中的log7，reolve将then的回调log8加入微任务队列；D.setTimeout2将回调加入宏任务队列eventTable；到此宏任务全部执行结束；
2. 宏任务结束后执行当前微任务队列 a.log8；微任务队列结束；
3. 宏任务队列eventTable中的两个setTimeout重新加入宏任务队列中，先执行A.setTimeout1的回调；执行A1.log2，执行A2.promise构造log4；加入微任务log5；宏任务A结束；执行微任务队列a.log5；
4. 执行下一个宏任务setTimeout2；

注意：首次执行时，可以将整个代码理解为一个function, 一个global宏任务。

console.log('1');
setTimeout(function() {
    console.log('2');
    new Promise(function(resolve) {
        console.log('4');
        resolve();
    }).then(function() {
        console.log('5')
    })
})
new Promise(function(resolve) {
    console.log('7');
    resolve();
}).then(function() {
    console.log('8')
})
setTimeout(function() {
    console.log('9');
    new Promise(function(resolve) {
        console.log('11');
        resolve();
    }).then(function() {
        console.log('12')
    })
})

结果 1 7 8 2 4 5 9 11 12