Event Loop

宏任务有：

<script>标签中的运行代码
setTimeout、setInterval的回调函数
事件触发的回调函数，例如DOM Events、I/O、requestAnimationFrame、Ajax、UI交互等

微任务有：

Promise的回调函数：then、catch、finally
MutationObserver：使用方式
queueMicrotask：使用方式
process.nextTick：Node独有

Event Loop的原理：宏任务与微任务交替执行
为了既不阻塞JS单线程的执行，同时又保障JS执行的效率，前辈们设计了出了一套事件循环机制：

先执行一个宏任务（document 下 script 标签中的所有同步代码），执行过程中如果产出新的宏/微任务，就将他们推入相应的任务队列，之后再执行微任务队列，再之后就执行宏任务队列，如此循环。以上不断重复的过程就叫做 Event Loop(事件循环) 。


同步任务会立即执行，只有异步任务才会被加入到任务队列中进行事件循环（Event Loop）执行
宏任务和微任务都是异步任务下的产物，同步任务是立即执行的，所以它既不存在宏任务队列，也不存在微任务队列
很多人说微任务总是优先于宏任务执行，这句话不严谨。只有在事件循环中，微任务总是优先于宏任务执行（因为整个脚本的执行就是一个宏任务。只有在这个宏任务执行完毕后，JavaScript 引擎才会去执行微任务队列中的所有微任务）
new Promise 中的代码是同步的，但是回调函数则是异步的（微任务）
async/await 是 JavaScript 中使用同步代码来处理异步的一种方式，它本身并不是宏任务或微任务。但 async 函数将返回一个 Promise 对象，即 await 后面的代码会作为 Promise 的回调来处理。因此 await 后面的代码 会被当成微任务，加入到微任务队列中的
setTimeout() 的第2个参数是为了告诉 JavaScript 再过多长时间把当前任务添加到宏任务队列中

async function async1() {
    console.log('1');
    await async2();
    console.log('2');
}

async function async2() {
    console.log('3');
    await asynctest();
    console.log('999');
}
async function asynctest() {
    console.log('3');
}


console.log('4');
async1();

setTimeout(() => {
    console.log('5');
}, 0)

new Promise((resolve, reject) => {
    console.log('6');
    resolve();
    setTimeout(() => {
        console.log('14');
    }, 0)
}).then(() => {
    setTimeout(() => {
        console.log('15');
    }, 0)
    console.log('7');
})
console.log('8');


`
所有的代码执行会被 js 引擎当成一个宏任务，但不会推到宏任务队列
首先打印 4，因为 async1、async2 两个函数开始只是声明，没有调用

然后就是打印 1，看到 async 不要慌，async函数里的内容大都是同步执行的（除了 await 后面是作为 promise 来执行的）
然后就是打印 3，没得讲，调用函数 asynctest
然后就是打印 3，
然后就是打印 6，别说是 2或999，打印 2 999 这个任务在 await 后面，是会被推进了微任务队列的
为啥是 6 解释下，Promise的函数体是同步执行的，只有 then、catch、finally 这些回调才是异步调用的（见上文）
此时的回调函数打印 7，被推进了微任务队列，异步执行
然后就是打印 8，毫无疑问是同步执行
同步任务至此已经全部完成，宏任务执行完了便开始执行微任务队列的微任务了
首先是打印 999，它最开始被推进微任务队列

其次是打印 7，初始化 promise 的时候将它推进微任务队列的（因为回调是异步执行的），这个时候微任务队列也已经执行完
打印2
打印 5，根据前面所讲 setTimeout 是一个标准的宏任务，微任务队列执行完了就要执行宏任务队列
打印 14
打印 15

`