eventLoop 宏任务与微任务

最近一直准备面试，所以在过架构相关的基础知识（会涉及较多底层），会把很多基础知识都写出来，不过没办法什么都写，主要是因为时间原因，毕竟今年的行情…希望尽早有份工作吧

因为上一篇promise里面很多题都涉及到了微任务和宏任务，所以这里就简要的概述一下：

浏览器会先执行清空主栈里的EC(非global)，直到全部清空后再去执行清空微任务，微任务清空完才会执行宏任务，微任务与宏任务都是异步的，这也是vue中nextTick的实现原理，主要也是使用了事件循环。（但要注意NodeJs11以下并非与浏览器一致）。

vue\src\core\util\next-tick.js 源码

微任务(microtask)

async/await，Promise.then，Object.observe，MutationObserver

宏任务(macroTask)

绑定事件（如click），setTimeout，setInterval，ajax

具体可以参考下面这篇文章，此篇只做一个概括总结：
浏览器和Node不同的事件循环

练习题1：

setTimeout(() => {
    console.log(1);
}, 20)

console.log(2);

setTimeout(() => {
    console.log(3);
}, 10);

console.time(4);

for(let i =0; i < 900000000; i++) {}

console.timeEnd(4);

setTimeout(() => {
    console.log(6);
}, 8)

console.log(7);

setTimeout(() => {
    console.log(8);
}, 15)

console.log(9);

// 2, 7, 9, 3, 1, 6, 8

练习题2：

console.log(1);

setTimeout(() => {
    console.log(2);
}, 50);

console.log(3);

setTimeout(() => {
    console.log(4);
    while(1===1){} // 导致浏览器崩溃，需要自己手动去任务管理器里结束进程
}, 0)

console.log(5);

/*
 * 输出结果
 * 'script start'
 * 'async1 start'
 * 'async2'
 * 'promise1'
 * 'script end'
 * 'async1 end'
 * 'promise2'
 * 'setTimeout'
 */