上一篇炒冷饭系列1：一道字节面试题引出的this指向问题开启了炒冷饭系列，想必很多人不知道炒冷饭的真正含义，那这里就引用一下百度百科的解释。

炒冷饭是一个网络流行语，意思是比喻重复已经说过的话或做过的事，没有新的内容。

逛掘金的都知道，平台有很多文章的主题都是写了又写，在一些用户看来就是一直在冷饭热炒的感觉；感觉没有其他内容主题可以写了，其实不然，冷饭热炒也是一门学问，毕竟每个人对每个事物的认知都是不一样的，你有你的见解我有我的看法，只是在别人写的时候你对其还没有一定的认知罢了。

web前端面试题2022（web前端面试题2022最全）

所以我就干脆开启一个炒冷饭系列，但是此冷饭非彼冷饭，我的冷饭取材于面试或者工作中遇到的一些自己掌握不牢的知识点，而不是包罗万象地介绍全部，其实就是一个视自身掌握情况来决定是否冷饭热炒的系列。

同样，这次还是由一道字节的面试引出要介绍的主题，还是上篇文章说的，真的是准备不足而不是别人问得深入、基础。所以再次提醒面试大厂一定要好好准备，不然真的机会渺茫啊。题目还是一道代码题，要求你说出打印什么，为什么？

题目就是这样的，其实真的不难，你可以试着去分析一下，如果觉得拿不准结果，那就耐心看完此文之后再来回看，相信那时你应该就能十拿九稳了。接下来就由这道面试引出这篇文章的主题：Js的事件循环机制，如果你很了解这个主题那就选择略过，否则就一起往下看看，这是面试题必考的点！

众所周知，为了与浏览器进行交互，Javascript是一门非阻塞单线程的脚本语言。怎么去理解？

在DOM操作中，如果有一个添加节点线程和一个删除节点的线程，浏览器并不知道以哪个为准，所以只能选择一个线程来执行代码，从而防止冲突。

单线程就意味着任务需要排队，按顺序执行。如果某一任务很耗时，那后面的任务不得不排队等待，所以为了避免这种阻塞，就需要一种非阻塞机制。这种非阻塞机制就是异步机制，即需要等待的任务不会阻塞主线程中同步任务的执行。

既然主要的原因知道了，那就接着说说一些主要的概念然后再介绍具体的事件循环执行问题。

Js是单线程的脚本语言，但是浏览器是多进程的。浏览器的每一个tab标签页都代表一个独立的进程，其中浏览器渲染进程也只属于浏览器多进程中的其中一种，其主要负责页面渲染，脚本执行，事件处理等。

浏览器进程还包含有以下主要线程：GUI渲染线程、JS引擎线程、事件触发线程、定时器触发线程和HTTP请求线程等。

进程是具有一定独立功能的程序关于某个数据集合上的一次运行活动，进程是系统进行资源分配和调度的一个独立单位。

线程是进程的一个实体，是CPU调度和分派的基本单位，它是比进程更小的能独立运行的基本单位。

（注意：一个进程挂掉不会影响其他进程，但是一个线程挂掉将导致整个进程挂掉）

主线程指的是JS引擎执行的线程。这个线程只有一个，页面渲染、函数处理都在这个主线程上执行。

工作线程这个线程可能存在于浏览器或JS引擎内，与主线程是分开的；处理文件读取、网络请求等异步事件。

同步任务指的是在主线程上排队执行的那些任务。只有前一个任务执行完毕，才能执行后一个任务。

异步任务指的是由JavaScript委托给宿主环境（浏览器或Node.js）进行执行的任务。当异步任务执行完成后，会通知JavaScript主线程执行异步任务的回调函数。

举个例子：一个人吃完饭后看手机，看手机后聊八卦，这样按照顺序一步步来，等上一件事完了之后再执行后面事情的就是同步方式；而一个人在吃饭的同时，可以看手机和聊八卦，这样能做很多件事情的就是异步方式。

任务队列主要分两种：宏任务和微任务。

宏任务：每次执行栈执行的代码。常见的宏任务主要包含：script(整体代码)、setTimeout、setInterval、I/O、异步Ajax、setImmediate(Node.js环境)等。

微任务：当前宏任务执行结束后立即执行的任务。常见的微任务主要包含：Promise.then(catch、finally)、MutaionObserver、process.nextTick(Node.js环境)等。

好了，到这里事件循环机制里面相关的概念已在上面列出解释了。其实通过上面的介绍可以得到下面这样一个图示：

任务进入执行栈，就会根据任务类型判断是同步任务还是异步任务，然后分别进入不同的执行环境，同步任务进入主线程，异步任务进入任务队列。主线程内的任务执行完毕后，回去任务队列读取对应的任务，推入主线程执行。上述过程不断重复就是事件循环。

每一个宏任务执行完之后，都会检查是否存在待执行的微任务；如果有，则执行完所有微任务后再继续执行下一个宏任务；反之没有就直接执行下一个宏任务。

根据上面图示可以得到事件循环机制的关键步骤，如下：

好啦，JS事件循环的相关概念和流程顺序就介绍完了。掌握概念之后，来看一些例子加深一下→

回到一开始提到面试题，那就看看它的执行结果是怎样的，分析如下：

下面来一个例子试试水：

分析过程，如下：

下面来一个经典的例子：

分析过程，如下：

将上面的经典改造一下，用最终完全体来结束示例：

分析过程，如下：

到这里，JS事件循环机制示例相关的题和分析过程就介绍完了，想必通过上面的介绍你一定能对JS的事件循环机制有更深的理解，相信以后遇见其他类似的面试题也能迎刃而解了。冲冲冲！→

最后，xdm看文至此，点个赞再走哦，3Q^_^

伙伴们，如果觉得本文对你有些许帮助，点个或者?个关注再走呗^_^。另外如果本文章有问题或有不理解的部分，欢迎大家在评论区评论指出，我们一起讨论共勉。