两周没更新文章了，这次带来一篇关于 EventLoop 的知识点扫盲。在日常工作中还是框架库的底层中都涉及到了EventLoop(事件循环)。那么这次就一起来看一下神奇的事件循环，它神秘的面纱究竟是什么吧。本质上事件循环看上去非常高大上，但是只要理解了它的一些概念。她还是非常漂亮的。
“
如果有理解不到位的地方，欢迎指正。QAQ，让我这个懒猫也更新下。
QAQ众所周知，JavaScript是一个单线程的编程语言。它有且只有一个调用栈。每一次只能做一件事情。程序每次只可以运行一段代码。
“
画重点，一次只能干一件事情。
QAQ那么通过一个实例看一下
function Foo1(a: number, b:number): number { return a * b } function Foo2(n: number): void { console.log(n) // 输出n const nSquare: number = Foo1(n, n) console.log(nSquare) } Foo2(4) // 输出结果 4 => 16 复制代码那么在这个调用栈中，它可能看起来会这样的。每一次调用帧都只会做一件事情。那么一系列同步任务的调用帧堆积在调用栈中每一个调用帧都需要等待上一个调用帧执行完毕后才会去执行。
“
你想去上厕所的时候，发现厕所有人了。你继续等着，按理说每个人10分钟是一个比较标准的时间。但是你没想到里面的是一个摸鱼王，它硬生生都蹲了半个多小时还没出来。此时你的脸已经成了猪肝色，这就叫做阻塞。
QAQ简单来说，就是上一个调用帧执行时间非常久，非常耗时间。那么在这段时间内你无法去干其他的东西。只能进行等待…QAQ。
“
同样是你去上厕所，但是可能你长的比较彪悍，前面的一个鱼王怕你到时候破门单杀，所以主动提出让我先上，上完了叫一下它过来摸鱼。
QAQ异步任务就是在不影响主动当前执行栈中同步任务运行的一种解决方案，可以有效的避免任务阻塞的问题。
宏任务的微任务是事件循环中非常重要的一部分。在浏览器，当我们碰到宏任务事件时，会将其内部执行任务推送到宏任务队列（MacroTask Queue）中。常见的宏任务有setTimeout，setInterval,I/O流操作。
在浏览器中，当调用栈在执行微任务时，会将微任务内部执行任务推送到微任务队列(MicroQueue)中保存，等到本次循环一次性清空掉。如果碰到新的微任务则会添加到队列队尾后执行。常见的微任务就有大家非常熟悉的Promise的各个执行方法，如then, catch等等。其次就是它的兄弟async，它本质上也属于Promise，没有区别，一些冷门的像MutationObserver等等就不多说了。
事件循环其实只要理解了它的运行时就显得非常易懂了。在执行栈中，优先执行的肯定是同步任务老大哥，此过程中，像宏任务和微任务章节中讲的一样，碰到相应的任务会存到相应的队列，想来应该非常清楚。
当执行栈中所有的代码执行完毕，这个时候就会逐条将MicroQueue中的微任务按照先进先出的形式放入执行栈中执行，，过程和正常的执行栈相似。归属不同的任务，微任务插入到队尾依次执行，而宏任务插入到宏任务队列下一次事件循环执行。
当MicroQueue中的任务结束后，那么就会开启下一个MacroQueue宏任务的运行。随后就是一个重复性的操作了。也就是常说的EventLoop。
“
不知道我描述的是否清晰，总结下： 运行 => 归队 => 清空微任务 => 运行 => 归队 => 微任务为空，下一次宏任务。一直进行while(message queue)
QAQ 初始的调用栈也是一个Macro宏任务。一个调用栈只执行一个Macro宏任务，但是可以执行多个Micro微任务，当微任务队列被执行完毕后，才会进行下一个宏任务的执行。执行任务中的微任务会在本次循环被处理掉，而宏任务需要等到下一次执行栈才会执行。EventLoop是一个非常的知识点，希望大家能够从中进行学习到新知识。这篇文章一开始发错了。还好有小伙伴及时私聊提醒我。非常感谢。如果有不正确的地方可以提出来。如果对你有帮助可以点个赞哦。
作者：wangly19 链接：https://juejin.im/post/5efd4a7d5188252e352f0730
