这是我参与 8 月更文挑战的第 1 天，活动详情查看：8 月更文挑战 8 月更文挑战
背景
开门见山的说：大家在前端面试过程中肯定都被会被问到事件循环 ，事件循环我们都懂，但是这一个抽象的概念，总觉得自己说不好，说出来不够直白，没能让面试官 get 到我们的点
楼主就是这样的（哈哈哈哈 🤣）
所以今天下定决心来总结：如何在 5 分钟内说好事件循环，给大家提供一个参考答案
我们先把几个基本的概念给复习一遍
基本概念
首先，我们要说清楚事件循环，我们必须了解 javaScript 的工作机制，掘金上有很多作者说得很详细哈，我们今天就简单的来说
javaScript 是单线程
javaScript 这门语言在诞生之初，就是为了 GUI，为了我们的网页而生，提供用户一些基础的操作，设计为单线程也正是因为上述的大部分原因。单线程的设计在这类场景中效率相对更高。
那为什么设计为单线程，效率会更高呢？
我们采用反证法来说明
- 我们知道 DOM 的渲染是同步任务，DOM 的渲染会阻塞单线程，但是也能保证页面的渲染是平顺的
- 假设这个时候假设 javascript 设计为多线程，DOM 的渲染任务拆分为多个小任务分别放入了多个线程，而多个线程里不单单是 DOM 的渲染任务，还有其他的任务在排队，那最终的界面渲染的效果会存在一卡一卡的效果
同步任务和异步任务
同步任务很好理解，我们简单的写一写
console.log('三点几了！做咩做？饮茶先啦')
这就是一个同步任务
那为什么会存在异步任务呢？
在现实的场景中，我们的接口不会立即返回数据，或者我们期望一些代码在某段时间之后执行
setTimeout(function(){
console.log('做咩做！老细豆某会呔你滴啦')
}, 60)
上述的计时器就是一个很典型的异步任务
执行栈和任务队列
执行栈：执行任务的地方
任务队列：存放异步任务的地方
做工：在一段时间内，同步任务一开始就进入执行栈中执行，在同步任务执行完毕之后，执行栈会去查看任务队列中是否有异步任务？有，则取出来执行
重复上述的做工的机制，不断地处理后续的任务，这个机制就叫做事件循环
异步任务又分为宏任务和微任务
- 宏任务会在下次事件循环的起始时刻被执行
- 微任务会在当前的事件循环末尾时刻被执行
（借个图，侵删）
总结
回到本文的题目：如何在 5 分钟内和面试官说清楚“事件循环”？
下面是楼主总结的参考答案
- js工作机制是单线程的，但是任务有同步任务和异步任务之分
- 执行任务的地方叫执行栈，而异步任务会进入任务队列等待被执行
- 执行栈中的任务执行完毕之后，执行栈会去查看任务队列中还有没有未执行的任务。有，则拿出来执行；没有，则开始下一次的工作
- 重复第三点的工作，不断地处理后续的任务，这样的工作机制就是事件循环
上述的四点说完，事件循环的工作机制就有了一个大致的描述
面试官可能还会穿插一些问题，例如：
- 为啥js是单线程的？为啥会有异步任务啊？
- 说一说宏任务和微任务的区别？
- 手写一道同步任务和异步任务执行顺序的题目的输出结果
所以在面试中，还是需要我们对宏任务和微任务有针对性的训练，能动手做题实践和理解，那是最好不过的了
最后
文章的篇幅有限加上楼主的技术水平有限，错误的地方希望大家积极留言指出 😊
好好学习不会差，我是你们的 970😎
你们的点赞是我进步的动力，大家一起进步！
参考资料
JavaScript 运行机制详解：再谈 Event Loop
深入：微任务与 Javascript 运行时环境 - Web API 接口参考 | MDN
[面试题：说说事件循环机制(满分答案来了)](juejin.cn/post/684490… "面试题：说说事件循环机制(满分答案来了 "面试题：说说事件循环机制(满分答案来了)")")
