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

素颜马尾好姑娘i 2022-11-04 13:21 230阅读 0赞

推荐文章：[Tasks, microtasks, queues and schedules][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

![image-20201214092953116][]

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

[Tasks_ microtasks_ queues and schedules]: https://jakearchibald.com/2015/tasks-microtasks-queues-and-schedules/?utm_source=wechat_session&utm_medium=social&utm_oi=619928018081157120&from=singlemessage
[image-20201214092953116]: /images/20221023/782653302a244230a48b39874275c369.png