换个角度看 JS 的 Event Loop

Posted 2021-04-30 SingleTalk

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了换个角度看 JS 的 Event Loop相关的知识，希望对你有一定的参考价值。

Event Loop 直译就是“事件循环”，以往你看到这方面的文章，配图常常会有一个圆环。

诚然，圆环很形象化的体现了 Loop 的意思，但今天我想带你从另一个角度看看 JS 的事件机制。

在这个视角下，圆环会被我剪开改造成一条平直的传送带。每次触发的事件可以看成一个任务包，这个任务包从前到后分成 ABC 三个区域。

任务包里包含了两类操作：同步操作和会生成异步任务的操作。我们将这些操作按先来先执行的策略排好，放入任务包中的 A 区域。

现在我们将任务包放到传送带上，并启动传送带，将任务包送入引擎中。引擎会依次执行任务包 A 区域的操作。如果是同步操作，直接执行完事；如果是会生成异步任务的操作，那就要多费点心了。

根据产生异步任务的方法不同，异步任务分为宏任务 (Macro Task) 和微任务 (Micro Task) 。

具体来说，通过 setTimeout、setInterval、setImmediate 这些 set* 方法生成的是宏任务。而 Promise.then、process.nextTick 生成的就是微任务了。

你问如何区分宏任务和微任务？对不起，唯记忆尔～

以上是关于换个角度看 JS 的 Event Loop的主要内容，如果未能解决你的问题，请参考以下文章