【中高级前端面试题】谈谈事件循环（EventLoop）？宏任务微任务？

文章目录 前言一、弄清楚一些基础概念1.什么是进程？2.什么是线程？3.什么是单线程？4. js为什么是单线程？浏览器呢？ 二、同步任务和异步任务宏任务、微任务是什么？ 三、事件循环代码执行流程（Event Loop事件循环）： 四、面试真题总结

---

前言

前几天和朋友视频聊天，让他充当前端面试官模拟一下技术面试，他问了我几个很有意思的问题，基本上都是中高级前端技术面试中高频出现的问题，其中一个就是本文的题目。如果大家经常刷面试题肯定也看到过这个问题，今天我就把这个问题整理一下，希望可以帮助到大家能够深入理解事件循环。

javascript可以在node环境和浏览器环境下运行，大部分前端小伙伴接触浏览器环境更多一点，所以今天先介绍一下浏览器中js事件循环，node环境的等我随后花时间再整理一篇文章，欢迎关注。

---

一、弄清楚一些基础概念 1.什么是进程？

进程：是cpu分配资源的最小单位；（是能拥有资源和独立运行的最小单位）

2.什么是线程？

线程：是 *** 作系统能够进行运算调度的最小单位。它被包含在进程之中，是进程中的实际运作单位。一条线程指的是进程中一个单一顺序的控制流，一个进程中可以并发多个线程，每条线程并行执行不同的任务。

3.什么是单线程？

截图自百度百科，单线程就是进程里只能有一个线程。众所周知js是单线程的，那大家有没有想过它为什么他是单线程的？

4. js为什么是单线程？浏览器呢？

js被设计为单线程其实是和他的用途有关，它的诞生主要是为了实现用户和浏览器之间的交互，以及 *** 作dom，这种特殊的使命决定了它只能是单线程的模式，否则会带来很多问题。举个栗子：若js支持多线程，一个线程要改某个dom元素，另一个线程要删除同一个dom元素，浏览器该如何处理？

可能有些同学会问现在新版的html标准下webworker不就是多线程的吗？
虽然是多线程的，但是也是在主线程的控制下，且webworker仅仅能进行计算任务，不能 *** 作DOM，其本质还是单线程的。关于webworker我会抽空再整理一篇文章分享给大家，这也是中高级前端需要了解掌握的知识点，欢迎大家关注。

浏览器是多进程的，浏览器每一个tab页都是一个独立的进程。

了解这些基础概念后，就可以接着进行了

二、同步任务和异步任务

我们了解到了JS是单线程，那就是指一次只能完成一件任务，如果在同个时间有多个任务的话，这些任务就需要进行排队，前一个任务执行完，才会执行下一个任务。但如果有一个任务的执行时间很长，比如文件的读取或者数据的请求等等，那么后面的任务就要一直等待，这个时候就会造成程序假死，非常影响用户的使用体验。

为了解决这种问题，Js 有两种任务的执行模式：同步模式（Synchronous）和异步模式（Asynchronous）。

同步模式：就是前一个任务执行完成后，再执行下一个任务，程序的执行顺序与任务的排列顺序是一致的、同步的；
异步模式: 则完全不同，每一个任务有一个或多个回调函数（callback），前一个任务结束后，不是执行队列上的后一个任务，而是执行回调函数；后一个任务则是不等前一个任务的回调函数的执行而执行，所以程序的执行顺序与任务的排列顺序是不一致的、异步的。

宏任务、微任务是什么？

异步模式下，js又将异步任务分为了宏任务和微任务。两种任务分放不同的队列，先进先出。在最新标准中，它们被分别称为task与jobs。

1、宏任务有：
整体代码的script（外层同步代码）、setTimeOut,setInternal,DOM监听,UI渲染或UI有关事件, ajax等。

2、微任务有：
promise、object.observe（对象监听）、MutationObserver(监听DOM树的变化)

三、事件循环

上边的概念都弄清楚后，我们就可以很轻松的弄明白事件循环的流程了。
找到了一张图：

代码执行流程（Event Loop事件循环）：

先执行同步代码，遇到异步宏任务将异步宏任务放入宏任务队列，遇到异步微任务放到微任务队列，所有同步代码执行完毕后再将异步微任务调入主线程执行，执行完毕再将宏任务队列中的宏任务依次调入主线程执行。

四、面试真题

Promise.resolve().then(()=>{
  console.log('1')  
  setTimeout(()=>{
    console.log('2')
  },0)
});
setTimeout(()=>{
  console.log('3')
  Promise.resolve().then(()=>{
    console.log('4')    
  })
},0);
console.log('5');

// 以上代码执行完毕，控制台输出的顺序？

答案我写在评论区，认真看完文章肯定能答对。

---

总结

以上就是我整理的我个人关于事件循环的理解，希望可以帮助到你，可能有理解偏差的地方，欢迎大家给我留言谈论。最后希望大家遇到不懂的面试题或者遇到知识盲区时，都能够沉下心来深入的了解一些相关的知识，这样才能真正的提高个人能力，处理问题游刃有余。若仅仅要为了应付面试而去死记硬背这些八股概念，怕是经不起面试官的深究追问…

最后，希望大家都能够升职加薪收割到自己满意的offer！