JavaScript事件循环机制EventLoop

前言

今天与同事切磋高级开发技能，同事问到了事件循环机制Event Loop。一时没有回答上来，回家后整理了一下。以此谨记。

概念

Event Loop即事件循环，是指浏览器或Node的一种解决javaScript单线程运行时不会阻塞的一种机制，也就是我们经常使用异步的原理。
在JavaScript中，任务被分为两种，一种宏任务（MacroTask）也叫Task，一种叫微任务（MicroTask）。

宏任务

宏任务包括 script (整体代码)、setTimeout、setInterval、 setlmmediate、 l/O、 UI rendering

微任务

微任务包括 promise、Qbject observe、Mutation Observer
微任务是跟屁虫，一直跟着当前宏任务后面代码执行到一个微任务就跟上，一个接着一个

实例展示

我们来看以下代码

console.log('script start' );
 // 宏任务
setTimeout( function () {
  console.log('setTimeout' );
}, 0);
  // 微任务跟在当前宏在务屁股后面
Promise. resolve().then(function () {
  //微任务跟在当前宏任务配服石面
  console.log('promise1');
}).then(function () {
  // 微任务跟在当前宏任务屈股后面
  console.log('promise2');
});
console.log('script end');
复制代码

在以上代码中第一次洪任务为script (整体代码)，所以优先输出script start和script end
在本次宏任务中有两个.then的微任务，所以其次输出promise1和promise2
在第二次事件循环中我们遇到了宏任务setTimeout 所以再输出setTimeout
所以最终输出为

以下我画了张图方便大家更好理解

小练习

以下给大家带来了两个小练习，大家可以手动敲下，深刻的理解其中的原理

题目1

输出为
3 4 8 5 2

题目2

输出为