保姆级带你理解事件循环机制

题记：面试总有些面试官喜欢问，什么是循环机制，前端代码如何执行的，什么又是宏任务微任务，oh，my god，

我们首先需要理解以下几个概念

概念：

调用栈

调用栈是JS引擎追踪函数执行的一个机制，当一次有多个函数被调用时，通过调用栈就能够追踪到哪个函数正在被执行以及各个函数之间的调用关系。

你可以简单理解为执行函数的容器。

WEB API

 

当你在调试，或者在决定如何以最佳的方式为任务队列和微任务队列安排调度顺序的时候，如果你了解关于 JavaScript 运行时是如何在背后执行这一切的，那将对你的理解会非常有帮助。

JavaScript 本质上是一门单线程语言。对于在它被设计出来的那个年代来说，这样的设计是一个很好的选择。那个时候的人们很少有多处理器计算机，而且当时预期由 JavaScript 处理的代码量也相对较少。

当然，随着时间的流逝，计算机已经发展成为强大的多核系统，而 JavaScript 已经成为计算世界中使用最广泛的语言之一。大量最流行的应用程序至少有一部分是基于 JavaScript 代码的。为了支持这一点，有必要找到方法让项目摆脱单线程语言的限制。

自从定时器（setTimeout() 和 setInterval()）加入到 Web API 后，浏览器提供的 JavaScript 环境就已经逐渐发展到包含任务调度、多线程应用开发等强大的特性。了解 JavaScript 运行时是如何安排和运行代码的对了解 queueMicrotask() 会非常有作用。

上边一段话来源于 深入：微任务与 Javascript 运行时环境 - Web API 接口参考 | MDN (mozilla.org)

我们可以理解为特殊方法调度的地方。 

event loop

Event Loop即事件循环，是指浏览器或Node的一种解决javaScript单线程运行时不会阻塞的一种机制，也就是我们经常使用异步的原理。

大白话就是就是解决异步过程的，解决单线程的问题的。

微任务队列

例如：Promise/$nextTick

宏任务队列

例如：setTimeout/setInterval

空间执行图

事件执行逻辑图 

总结 

我们经常会需要分析是否为同步异步，从空间图我们看到是否属于web API即可。

写的仓促，但愿对于朋友们有所帮助，你的点赞是我前进的动力!!!