如何在5分钟内和面试官说清楚“事件循环”？

这是我参与 8 月更文挑战的第 1 天，活动详情查看：8 月更文挑战 8 月更文挑战

背景

开门见山的说：大家在前端面试过程中肯定都被会被问到事件循环 ，事件循环我们都懂，但是这一个抽象的概念，总觉得自己说不好，说出来不够直白，没能让面试官 get 到我们的点

楼主就是这样的（哈哈哈哈 ?）

所以今天下定决心来总结：如何在 5 分钟内说好事件循环，给大家提供一个参考答案

我们先把几个基本的概念给复习一遍

首先，我们要说清楚事件循环，我们必须了解 javaScript 的工作机制，掘金上有很多作者说得很详细哈，我们今天就简单的来说

javaScript 这门语言在诞生之初，就是为了 GUI，为了我们的网页而生，提供用户一些基础的操作，设计为单线程也正是因为上述的大部分原因。单线程的设计在这类场景中效率相对更高。

那为什么设计为单线程，效率会更高呢？

我们采用反证法来说明

我们知道 DOM 的渲染是同步任务，DOM 的渲染会阻塞单线程，但是也能保证页面的渲染是平顺的
假设这个时候假设 javascript 设计为多线程，DOM 的渲染任务拆分为多个小任务分别放入了多个线程，而多个线程里不单单是 DOM 的渲染任务，还有其他的任务在排队，那最终的界面渲染的效果会存在一卡一卡的效果

同步任务很好理解，我们简单的写一写

console.log('三点几了！做咩做？饮茶先啦')

这就是一个同步任务

那为什么会存在异步任务呢？

在现实的场景中，我们的接口不会立即返回数据，或者我们期望一些代码在某段时间之后执行

setTimeout(function(){
    console.log('做咩做！老细豆某会呔你滴啦')
}, 60)

上述的计时器就是一个很典型的异步任务

执行栈：执行任务的地方

任务队列：存放异步任务的地方

做工：在一段时间内，同步任务一开始就进入执行栈中执行，在同步任务执行完毕之后，执行栈会去查看任务队列中是否有异步任务？有，则取出来执行

重复上述的做工的机制，不断地处理后续的任务，这个机制就叫做事件循环

异步任务又分为宏任务和微任务

（借个图，侵删）如何在5分钟内和面试官说清楚“事件循环”？

回到本文的题目：如何在 5 分钟内和面试官说清楚“事件循环”？

下面是楼主总结的参考答案

上述的四点说完，事件循环的工作机制就有了一个大致的描述

面试官可能还会穿插一些问题，例如：

所以在面试中，还是需要我们对宏任务和微任务有针对性的训练，能动手做题实践和理解，那是最好不过的了

文章的篇幅有限加上楼主的技术水平有限，错误的地方希望大家积极留言指出 ?

好好学习不会差，我是你们的 970?

你们的点赞是我进步的动力，大家一起进步！

并发模型与事件循环 - JavaScript | MDN

JavaScript 运行机制详解：再谈 Event Loop

深入：微任务与 Javascript 运行时环境 - Web API 接口参考 | MDN

[面试题：说说事件循环机制(满分答案来了)](juejin.cn/post/684490… "面试题：说说事件循环机制(满分答案来了 "面试题：说说事件循环机制(满分答案来了)")")