一篇文章 带你理解JavaScript的事件循环！

推荐文章：Tasks, microtasks, queues and schedules
看不懂英文的话，可以用Google翻译

JS的事件循环/JS是如何实现异步的？

JS是单线程的，但又能实现异步的原因在于事件循环和任务队列体系。先说一下几个概念：同步任务、异步任务、任务队列、macrotask、microtask。

同步任务指的是在主线程上排队执行的任务，只有前一个任务执行完毕，才能执行后一个任务。

异步任务指的是，不进入主线程、而进入"任务队列"（task queue）的任务，等待同步任务执行完毕之后，轮询执行异步任务队列中的任务。

macrotask 宏任务，宏任务队列等同于我们常说的任务队列，

"任务队列"是一个先进先出的数据结构，排在前面的事件，优先被主线程读取。

microtask 微任务，总是添加到当前任务队列末尾执行。如果在处理microtask期间，如果有新添加的microtasks，也会被添加到队列的末尾并执行。

事件循环：
JS 会创建一个类似于 while (true) 的循环，JS顺序执行宏任务，当宏任务的JS堆栈清空之后，执行微任务。微任务清空即为一个宏任务的完成，接着执行另一个宏任务。

常见的macrotask有：

• run <script>（同步的代码执行）
• setTimeout
• setInterval
• setImmediate (Node环境中)
• requestAnimationFrame
• I/O
• UI rendering

常见的microtask有：

• process.nextTick (Node环境中)
• Promise callbacks
• Object.observe (基本上已经废弃)
• MutationObserver
• await后面的后面语句

async函数里面await标记之前的语句和 await 后面的语句是同步执行的。
后面的语句是异步的，丢进Micro

顺序执行宏任务，当宏任务的JS堆栈清空之后，执行微任务。微任务清空即为一个宏任务的完成，接着执行另一个宏任务。