JS异步宏队列微队列原理详解


Posted in Javascript onSeptember 09, 2020

先看一张我绘制的原理图

JS异步宏队列微队列原理详解

原理图

setImmediate 也是宏任务,在 Node 环境下,微任务还有 process.nextTick

JS 中用来存储待执行回调函数的队列包含 2 个不同特定的列队

  • 宏列队:用来保存待执行的宏任务(回调),比如:定时器回调、DOM 事件回调、ajax 回调微
  • 列队:用来保存待执行的微任务(回调),比如:promise的回调、MutationObserver 的回调

JS 执行时会区别这 2 个队列

  • JS 引擎首先必须先执行所有的初始化同步任务代码
  • 每次准备取出第一个宏任务执行前, 都要将所有的微任务一个一个取出来执行,也就是优先级比宏任务高,且与微任务所处的代码位置无关

下面这个例子可以看出 Promise 要先于 setTimeout 执行

setTimeout(() => { // 立即放入宏队列
  console.log('settimeout callback1()');
}, 0);
setTimeout(() => { // 立即放入宏队列
  console.log('settimeout callback2()');
}, 0);


Promise.resolve(1).then(value => { // 立即放入微队列
  console.log('Promise onResolved1()', value);
})
Promise.resolve(2).then(value => { // 立即放入微队列
  console.log('Promise onResolved2()', value);
})

// Promise onResolved1() 1
// Promise onResolved2() 2
// settimeout callback1()
// settimeout callback2()

全文完。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery live
May 15 Javascript
Bootstrap实现默认导航栏效果
Sep 21 Javascript
Bootstrap入门书籍之(四)菜单、按钮及导航
Feb 17 Javascript
Vuejs第七篇之Vuejs过渡动画案例全面解析
Sep 05 Javascript
详解AngularJs路由之Ui-router-resolve(预加载)
Jun 13 Javascript
vue实现前进刷新后退不刷新效果
Jan 26 Javascript
详解Vue单元测试Karma+Mocha学习笔记
Jan 31 Javascript
vue-cli 使用axios的操作方法及整合axios的多种方法
Sep 12 Javascript
vue实现设置载入动画和初始化页面动画效果
Oct 28 Javascript
Ant Design Vue 添加区分中英文的长度校验功能
Jan 21 Javascript
vue封装自定义指令之动态显示title操作(溢出显示,不溢出不显示)
Nov 12 Javascript
JS+JQuery实现无缝连接轮播图
Dec 30 jQuery
vue 项目软键盘回车触发搜索事件
Sep 09 #Javascript
基于原生JS封装的Modal对话框插件的示例代码
Sep 09 #Javascript
vue监听浏览器原生返回按钮,进行路由转跳操作
Sep 09 #Javascript
JS实现斐波那契数列的五种方式(小结)
Sep 09 #Javascript
JavaScript代码简化技巧实例解析
Sep 09 #Javascript
vue 手机物理监听键+退出提示代码
Sep 09 #Javascript
关于angular引入ng-zorro的问题浅析
Sep 09 #Javascript
You might like
咖啡风味 世界咖啡主要分布分布 咖啡的生长要求
2021/03/06 新手入门
php 生成Tab键或逗号分隔的CSV
2016/09/24 PHP
php获取flash尺寸详细数据的方法
2016/11/12 PHP
thinkphp3.2实现在线留言提交验证码功能
2017/07/19 PHP
javascript EXCEL 操作类代码
2009/07/30 Javascript
js 获取后台的字段 改变 checkbox的被选中的状态 代码
2013/06/05 Javascript
JavaScript执行顺序详细介绍
2013/12/04 Javascript
JavaScript实现鼠标点击后层展开效果的方法
2015/05/13 Javascript
快速学习jQuery插件 jquery.validate.js表单验证插件使用方法
2015/12/01 Javascript
JQuery datepicker 用法详解
2015/12/25 Javascript
jquery利用json实现页面之间传值的实例解析
2016/12/12 Javascript
分享bootstrap学习笔记心得(组件及其属性)
2017/01/11 Javascript
详谈js中数组(array)和对象(object)的区别
2017/02/27 Javascript
jQuery扩展方法实现Form表单与Json互相转换的实例代码
2018/09/05 jQuery
JavaScript实现多张图片放大镜效果示例【不限定图片尺寸,rem单位】
2019/05/14 Javascript
vue两组件间值传递 $router.push实现方法
2019/05/15 Javascript
[48:24]完美世界DOTA2联赛PWL S3 Forest vs INK ICE 第一场 12.09
2020/12/12 DOTA
python字典基本操作实例分析
2015/07/11 Python
Python用模块pytz来转换时区
2016/08/19 Python
python django使用haystack:全文检索的框架(实例讲解)
2017/09/27 Python
jupyter notebook引用from pyecharts.charts import Bar运行报错
2020/04/23 Python
Scrapy基于selenium结合爬取淘宝的实例讲解
2018/06/13 Python
Django框架的中的setting.py文件说明详解
2018/10/15 Python
python 实现提取某个索引中某个时间段的数据方法
2019/02/01 Python
python抖音表白程序源代码
2019/04/07 Python
Django ModelForm操作及验证方式
2020/03/30 Python
Python如何使用队列方式实现多线程爬虫
2020/05/12 Python
"引用"与指针的区别是什么
2016/09/07 面试题
银行门卫岗位职责
2013/12/29 职场文书
大学四年职业生涯规划书范文
2014/01/02 职场文书
党的群众路线教育实践活动个人自我剖析材料
2014/10/07 职场文书
信息简报范文
2015/07/21 职场文书
师德培训心得体会2016
2016/01/09 职场文书
《七月的天山》教学反思
2016/02/19 职场文书
vue实现Toast组件轻提示
2022/04/10 Vue.js
spring boot实现文件上传
2022/08/14 Java/Android