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进行跨域请求
Jan 25 Javascript
jquery使用ajax实现微信自动回复插件
Apr 28 Javascript
JavaScript运算符小结
Jun 03 Javascript
JavaScript闭包实例详解
Jun 03 Javascript
bootstrap table动态加载数据示例代码
Mar 25 Javascript
javascript实现下雨效果
Mar 27 Javascript
JS简单实现数组去重的方法示例
Mar 27 Javascript
node.js实现的装饰者模式示例
Sep 06 Javascript
解决Vue 浏览器后退无法触发beforeRouteLeave的问题
Dec 24 Javascript
Nuxt配合Node在实际生产中的应用详解
Aug 07 Javascript
JS原型与继承操作示例
May 09 Javascript
轻松解决JavaScript定时器越走越快的问题
May 13 Javascript
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
PHP遍历数组的几种方法
2012/03/22 PHP
php通过分类列表产生分类树数组的方法
2015/04/20 PHP
php通过exif_read_data函数获取图片的exif信息
2015/05/21 PHP
如何使用Gitblog和Markdown建自己的博客
2015/07/31 PHP
php从身份证获取性别和出生年月
2017/02/09 PHP
PHP使用第三方即时获取物流动态实例详解
2017/04/27 PHP
PHP连接MySQL数据库并以json格式输出
2018/05/21 PHP
Laravel 5.2 文档 数据库 ―― 起步介绍
2019/10/21 PHP
JavaScript匿名函数与委托使用示例
2014/07/22 Javascript
运用jQuery定时器的原理实现banner图片切换
2014/10/22 Javascript
jQuery绑定事件的四种方式介绍
2016/10/31 Javascript
详解JS几种变量交换方式以及性能分析对比
2016/11/25 Javascript
JQuery ZTree使用方法详解
2017/01/07 Javascript
使用vue + less 实现简单换肤功能的示例
2018/02/21 Javascript
安装Node.js并启动本地服务的操作教程
2018/05/12 Javascript
关于AOP在JS中的实现与应用详解
2019/05/06 Javascript
js实现点击上传图片并设为模糊背景
2020/08/02 Javascript
Python sys.path详细介绍
2013/10/17 Python
Django中传递参数到URLconf的视图函数中的方法
2015/07/18 Python
python绘制条形图方法代码详解
2017/12/19 Python
python实现决策树
2017/12/21 Python
用python脚本24小时刷浏览器的访问量方法
2018/12/07 Python
对python中的argv和argc使用详解
2018/12/15 Python
python保存字典和读取字典的实例代码
2019/07/07 Python
python卸载后再次安装遇到的问题解决
2019/07/10 Python
python中property和setter装饰器用法
2019/12/19 Python
CSS3美化表单控件全集
2016/06/29 HTML / CSS
《美丽的黄昏》教学反思
2014/02/28 职场文书
小学捐书活动总结
2014/07/05 职场文书
goland设置颜色和字体的操作
2021/05/05 Golang
python使用PySimpleGUI设置进度条及控件使用
2021/06/10 Python
JS创建或填充任意长度数组的小技巧汇总
2021/10/24 Javascript
SpringBoot连接MySQL获取数据写后端接口的操作方法
2021/11/02 MySQL
Win10 heic文件怎么打开 ? Win10 heic文件打开教程
2022/04/06 数码科技
MySQL 原理与优化之Limit 查询优化
2022/08/14 MySQL
详解Golang如何实现支持随机删除元素的堆
2022/09/23 Python