Event Loop事件循环机制,那是什么事件?又是怎么循环呢?

介绍

为什么需要Event Loop?

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

Event Loop的核心组成

组成:

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

那什么属于宏任务,什么又属于微任务呢?

宏任务:setTimeoutsetIntervalsetImmediate、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 依次执行以下操作:

  1. 检查微任务队列执行所有微任务,直到微任务队列清空。

  2. 如果微任务队列清空了,才会执行一个宏任务

  3. 执行完一个宏任务后,再次检查微任务队列,如果有新的微任务,优先执行所有微任务。

  4. 重复这个过程:微任务 → 宏任务 → 微任务 → 宏任务......

相关推荐
passer9811 分钟前
列表项切换时同步到可视区域
前端
FogLetter3 分钟前
移动端适配的终极奥义:从lib-flexible到postcss-pxtorem的全方位指南
前端·postcss
易元4 分钟前
设计模式-访问者模式
前端·后端·设计模式
兵临天下api4 分钟前
Elasticsearch 查询性能优化:从 3 秒到 300ms 的 6 个核心参数调优指南
前端
整点可乐5 分钟前
cesium实现鹰眼图
javascript·cesium
艾小码6 分钟前
Web存储指南:彻底掌握localStorage与sessionStorage
javascript
子林super12 分钟前
y1新建cluster集群redis
前端
BUG创建者19 分钟前
openlayer根据不同的状态显示不同的图层颜色
android·java·javascript
Pedantic32 分钟前
swift 日期与时间的三个结构体
前端
南方kenny32 分钟前
Mock.js:前端开发的假数据神器
前端·javascript