Event Loop事件循环机制，那是什么事件？又是怎么循环呢？

介绍

为什么需要Event Loop?

我们知道js是单线程的，这也就是说同一时间只能执行一个任务，当一个任务执行时间过长就会卡住,用户就无法进行其他操作，所以我们的js充满了异步函数，而Event Loop就是来协调这些任务的。

Event Loop的核心组成

组成：

调用栈：js的同步函数执行时会压入调用栈中执行。
web api:协调异步函数，将其交给web api处理。
任务队列：其分为宏任务队列和微任务队列，存放回调函数。
事件循环：同步任务清空执行栈 -> 微任务队列(一次清空) ->页面渲染(最先插入宏任务)-> 宏任务队列(每次一个)->进入系统idle(空闲) 等待下一次循环，其实也就是不断检查调用栈，当调用栈为空，就将任务队列的任务取出压入调用栈中执行。

那什么属于宏任务，什么又属于微任务呢？

宏任务：setTimeout、setInterval、setImmediate、I/O 任务、DOM 事件回调等

微任务：Promise 的 .then() / catch() / finally() 回调 ，以及 process.nextTick()

实例

了解完什么是Event Loop之后来看一道题看看你能答对输出顺序吗？

xml 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
<script>
async function async1() {
  console.log('E'); 
  await async2();
  console.log('F');
}
async function async2() {
  console.log('G');
}
setTimeout(() => console.log('H'), 0);
async1(); 
new Promise((res) => {
  console.log('I'); 
  res();
}).then(() => console.log('J'));
</script>
</body>
</html>

答案： E G I F J H

分析：首先遇到计时器，将其放入宏任务队列中，然后调用async1(),进入async1()函数，输出E,await async2()会执行async2()函数输出G(注意async...await函数是异步函数，但async 到await 之前的部分仍是同步的包括await右边的部分，只有await后面的才是异步的),然后其.then部分进入微任务队列，执行new Promise()函数输出I,其后部分进入微任务队列，同步函数执行完开始执行微任务，先输出F 再输出J最后执行宏任务输出H

总结

Event Loop 运行流程

1. 先执行所有同步任务 。
2. 执行完同步任务后，如果调用栈为空，Event Loop 依次执行以下操作：

检查微任务队列 ，执行所有微任务，直到微任务队列清空。
如果微任务队列清空了，才会执行一个宏任务
执行完一个宏任务后，再次检查微任务队列，如果有新的微任务，优先执行所有微任务。
重复这个过程：微任务 → 宏任务 → 微任务 → 宏任务......