前端面试题 | 你对JS Event Loop 事件循环机制怎么理解？

JS是一门单线程的语言，它的异步和多线程操作是通过Event  Loop事件循环机制来实现的。

Event Loop 大体由三部分组成：调用栈（call stack），消息队列（Message Queue），微任务队列（Microtask task）

Event Loop开始时，会从全局栈开始执行，遇到函数调用，会把它压入调用栈中，被压入的函数叫做帧（Frame）,当函数返回后，会从调用栈中弹出，弹出之后会将接下来的任务再压入栈中执行并弹出。

JS中的异步操作，例如（宏任务）：fetch,事件回调，settimeout,setInterval会进入消息队列中，等调用栈中的同步任务都执行完毕弹出以后，再去执行消息队列中的宏任务（此情况是只有宏任务的情况下）。

使用promise async await创建的异步操作会放到微任务队列当中，微任务队列会在调用栈清空之后立即执行，并且再处理期间，新加入的微任务也会一同执行，微任务执行完毕才会去执行宏任务。

同步任务会直接再调用栈中执行并弹出，异步任务会放到异步处理模块，那么异步处理模块中又分宏任务（消息队列）和微任务（微任务队列）；那么什么是同步任务，什么是异步任务？异步任务中的宏任务包含哪些？微任务又包含哪些呢？

• 什么是同步任务? 
  • 由于js是单线程的，同步任务都是在主线程上排队执行，前面任务没有执行完成，后面的任务会一直等待
• 什么是异步任务?
  • 不进入主线，进入任务队列，等待主线程任务执行完才开始执行。常见的异步任务：setTimeout和setInterval
• 宏任务：
  • script(可以理解为外层同步代码)
  •  setTimeout/setInterval
  •  UI rendering/UI事件
  •  postMessage，MessageChannel
  •  setImmediate，I/O（Node.js）
• 微任务：
  • Promise.then
  • process.nextTick（Node.js） 
  • Object.observe（已废弃；Proxy 对象替代）
  • MutaionObserver

总结： 

          所有同步任务都会在主线程上执行，上一个同步任务执行完之后，下一个同步任务才会压入执行栈，遇到异步任务，会将异步任务放到异步任务队列中，等待同步任务的执行，同步任务出栈之后，栈为空，执行异步任务，异步任务又分为宏任务和微任务，微任务比宏任务先执行，如果执行微任务的过程中又有限的微任务加入，也会先执行微任务再执行宏任务。

有问题欢迎大家提出~~看完点个赞吧~