Event Loop学习

结合阮一峰大神和网上其他写event-loop文章再总结一下自己的对event-loop的理解


Event Loop定义

  • Event loop是一个程序结构,用于等待,发送消息和事件,简单地说就是在程序设置两个线程,一个负责程序本身运行,一个负责程序与其他进程的通信,可称为“event-loop”线程

  • 在浏览器和NodeJS都实现了各自的Event Loop

宏队列和微队列

队列采用先进先出方式

  1. 宏队列(macrotask) 一些异步任务的回调会进入宏队列,如:
  • setTimeout
  • setInterval
  • setImmediate (Node独有)
  • requestAnimationFrame (浏览器独有)
  • I/O
  • UI rendering (浏览器独有)
  1. 微队列(microtask) 一些异步任务的回调会进入微队列,如:
  • process.nextTick (Node独有)
  • Promise.then
  • Object.observe
  • MutationObserver
  1. 调用栈(补充) 用于存放全局Script代码

浏览器Event Loop执行方式

  1. 顺序执行全局Script代码,遇到同步语句则执行,遇到异步语句则把它丢到宏队列或微队列。

    如遇到console.log则正常执行; 遇到setTimeout则把他扔进宏队列; 遇到promise,则先正常执行promise里面语句,把后面的then回调函数扔进微队列

  2. 全局Script代码执行完后,调用栈为空
  3. 再从微队列取出位于队首代码或回调函数,放入调用栈中执行,此过程中如果产生新的微队列或宏队列函数则照常扔到队列末尾

    如执行promise.then()

  4. 重复取出微队列函数,直到微队列为空
  5. 再从宏队列取出一个函数放入调用栈执行
  6. 重复1~5直到宏队列为空

例子

console.log(1);

setTimeout(() => {
  console.log(2);
  Promise.resolve().then(() => {
    console.log(3)
  });
});//macrotask1

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

setTimeout(() => {
  console.log(6);
})//macrotask2

console.log(7);
  1. 执行console.log(1)输出1
  2. setTimeout扔进宏队列,将这个记作macrotask1,此时宏队列为{macrotask1}
  3. 同步执行promise内语句console.log(4)输出4,后面的then扔进微队列,此时的微队列{console.log(5)}
  4. 下一个setTimeout扔进宏队列,记作macrotask2,此时的宏队列{macrotask1,macrotask2}
  5. 执行console.log(7)输出7
  6. 从微队列取出队首console.log(5)执行,输出5,此时微队列为{}
  7. 由于微队列为空,于是从宏队列取出队首函数macrotask1,扔进调用栈执行,此时宏队列{macrotask2}
  8. 执行macrotask1,执行console.log(2)输出2,后面的Promise.resolve().then()扔进微队列,此时微队列{console.log(3)}
  9. macrotask1执行完(调用栈空),再去执行微队列{console.log(3)},输出3,此时微队列{}
  10. 微队列空,再从宏队列取出函数macrotask2,执行console.log(6)输出6
  11. 宏队列空,代码执行完毕
  12. 最终输出为1475236

参考文章

  1. segmentfault.com/a/119000001…
  2. www.ruanyifeng.com/blog/2013/1…
原文链接:juejin.im

上一篇:如何在 JavaScript 中使用新特性“顶层 await”
下一篇:vue项目封装table组件思路整理

相关推荐

  • 🔥 从最近流行的一幅 CSS 风景画中学习 2 个知识点

    最近 CodePen 流行的一张用纯 CSS 绘制的风景画令人印象深刻: (/public/upload/d250206ad61c150f0fbec8efcd474c2a) 天空的眩光,睡眠反...

    2 个月前
  • (vuejs学习)2、使用ElementUI(*)

    1.element安装 开发环境是win10,一到node官网下载node的.msi包(https://npm.taobao.org/mirrors/node/v10.16.0/nodev10.16....

    10 个月前
  • (vuejs学习)1、Vue初上手(*)

    参考《官方(https://cli.vuejs.org/zh/guide/installation.html)》官方: Node 版本要求: Vue CLI 需要 Node.js 8.9 或更高...

    10 个月前
  • 项目过程中的小学习

    1.将多个同类元素分行,每一行有两个或者多个元素,可用li标签实现此 效果如下: clipboard.png(https://img.javascriptcn.com/a1466689a56d4...

    2 年前
  • 面试题之Event Loop终极篇

    先上一道常见的笔试题 大家可以先配合下面这个图片思考一下输出顺序及这么运行的原因 图片描述(https://img.javascriptcn.com/104c69f0f75d4c2b7f366...

    1 年前
  • 零基础该如何学习前端开发?

    这种问题经常出现,我以前也学过不少类似的文章。但随着我做课程,讲课的时间日渐长久,我对于这个问题的理解和体会也在不断的变化着。 之前我对于这个问题,最直接的回复就是,零基础啊,那你就学呗,从ht...

    1 年前
  • 零基础学习前端开发不可不知的CSS原理

    从事Web前端开发的人都与CSS打交道很多,有的人也许不知道CSS是怎么去工作的,写出来的CSS浏览器是怎么样去解析的呢?学习前端开发必不可少一定要先了解CSS的原理的。

    1 年前
  • 防抖(debounce)和节流(throttle)的学习总结

    防抖(debounce) 用户与网页进行交互时,经常出现根据页面的状态、数据向服务器请求、发送数据的场景,比如:根据用户的输入数据进行实时校验,下拉请求数据等等,如果用户操作过于频繁,页面状态、数...

    1 年前
  • 防抖与节流(源码学习)

    最近自己撸了一个轮播图,在点击切换的时候,为了寻求更好的用户体验,引入了节流,在此记录对源码的学习过程 源码来源:underscore(https://github.com/jashkenas/und...

    2 年前
  • 钻牛角尖似的学习React.萌到发蠢的萌新

    嗯,,,实习期间一直用的vue,去年为了应付面试,(面试造火箭,工作拧螺丝。。。)但当时react看了一周,简历上都是写的,知道React.笑哭了要。。嗯。。。现在已经忘完了。

    2 个月前

官方社区

扫码加入 JavaScript 社区