Event Loop

起因

是因为看见 神奇的程序员 写的一篇求职文章中和面试官有分歧，所以自己也就重新梳理了下，然后想写成文章

什么是Event Loop

JavaScript中的事件循环是一种处理异步操作的机制，由于JavaScript是单线程，也就是说，他只有一个执行栈。

当JavaScript代码执行时，他会被添加到执行栈中。如果代码中有异步操作，如定时器、网络请求等，他们会被添加到 消息队列 中，等待执行。

消息队列 又分为两种队列，一种是宏任务队列，一种是微任务队列

那么宏任务和微任务分别都有哪些？

宏任务：

1. 整体代码 Script
2. SetTimeout
3. setInterval
4. setimmediate（尽在Node环境中）
5. I/O 操作（如文件读写，仅在Node.js环境中）
6. UI渲染（仅在浏览器环境中）
7. 事件回调（如点击事件、键盘事件等）

微任务：

1. Promise.then
2. MutationObserver（仅在浏览器环境中）
3. Process.nextTick(仅在Node.js环境中)

Event Loop 的执行机制是怎样的？

执行机制如下：

• 执行同步任务，将异步任务分别添加到宏任务队列或者微任务队列中去
• 当执行栈为空时，事件循环会先执行微任务队列中的所有任务，直到微任务队列为空
• 然后事件循环会从宏任务队列中取出第一个宏任务执行，执行完毕后再执行微任务队列中的所有任务
  • 假如执行宏任务队列中的某个任务时，如果该宏任务中又产生了新的宏任务和微任务处理机制如下：
  • 将新产生的微任务添加到微任务队列的末尾
  • 将新产生的宏任务添加到宏任务队列的末尾
  • 当前宏任务的回调函数执行完成之后，会先检查微任务队列
  • 执行微任务队列中的所有任务，直到微任务队列为空
  • 当微任务队列为空时，在执行下一个宏任务
• 重复步骤，直到宏任务队列和微任务队列都为空

图文并用

接下来将会出一些题和一些图

console.log('1');

setTimeout(() => {
  console.log('2');
}, 0);

new Promise((resolve, reject) => {
  console.log('3');
  resolve();
}).then(() => {
  console.log('4');
  new Promise((resolve, reject) => {
    console.log('5');
    resolve();
  }).then(() => {
    console.log('6');
  });
});

console.log('7');

执行顺序逻辑如下

练习：