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 相关文章推荐
js保存当前路径(cookies记录)
Dec 14 Javascript
关于jQuery object and DOM element
Apr 15 Javascript
js中Math之random,round,ceil,floor的用法总结
Dec 26 Javascript
js中split函数的使用方法说明
Dec 26 Javascript
JavaScript获取网页表单提交方式的方法
Apr 02 Javascript
关于数据与后端进行交流匹配(点亮星星)
Aug 03 Javascript
JS数组返回去重后数据的方法解析
Jan 03 Javascript
原生javascript上传图片带进度条【实例分享】
Apr 06 Javascript
d3.js实现自定义多y轴折线图的示例代码
May 30 Javascript
vue实现点击关注后及时更新列表功能
Jun 26 Javascript
vue.js添加一些触摸事件以及安装fastclick的实例
Aug 28 Javascript
vue+echarts实现动态折线图的方法与注意
Sep 01 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脚本的10个技巧(6)
2006/10/09 PHP
php FPDF类库应用实现代码
2009/03/20 PHP
PHP初学者常见问题集合 修正版(21问答)
2010/03/23 PHP
PHP实现的简单日历类
2014/11/29 PHP
PHP按指定键值对二维数组进行排序的方法
2015/12/22 PHP
Yii2.0 RESTful API 基础配置教程详解
2018/12/26 PHP
javascript 的Document属性和方法集合
2010/01/25 Javascript
jQuery 操作下拉列表框实现代码
2010/02/22 Javascript
基于jquery库的tab新形式使用
2012/11/16 Javascript
chrome调试javascript详解
2015/10/21 Javascript
JS图片压缩(pc端和移动端都适用)
2017/01/12 Javascript
Vue2.0中集成UEditor富文本编辑器的方法
2018/03/03 Javascript
Angular5集成eventbus的示例代码
2018/07/19 Javascript
如何阻止移动端浏览器点击图片浏览
2020/08/29 Javascript
python中sets模块的用法实例
2014/09/30 Python
详解Python 数据库 (sqlite3)应用
2016/12/07 Python
pandas带有重复索引操作方法
2018/06/08 Python
Python Tkinter模块实现时钟功能应用示例
2018/07/23 Python
python实现简单的文字识别
2018/11/27 Python
使用PyQt4 设置TextEdit背景的方法
2019/06/14 Python
python 画二维、三维点之间的线段实现方法
2019/07/07 Python
Python 将 QQ 好友头像生成祝福语的实现代码
2020/05/03 Python
Django中日期时间型字段进行年月日时分秒分组统计
2020/11/27 Python
python 基于selenium实现鼠标拖拽功能
2020/12/24 Python
Python实现简单的2048小游戏
2021/03/01 Python
Web前端绘制0.5像素的几种方法
2017/08/11 HTML / CSS
一些PHP的面试题
2015/05/06 面试题
网络工程师面试(三木通信技术有限公司)
2013/06/05 面试题
九年级科学教学反思
2014/01/29 职场文书
大二自我鉴定
2014/01/31 职场文书
会计学毕业生求职信
2014/06/25 职场文书
售后客服个人自我评价
2014/09/14 职场文书
工作总结与自我评价
2014/09/18 职场文书
召开会议通知范文
2015/04/15 职场文书
大学生奶茶店创业计划书
2019/06/25 职场文书
python神经网络编程之手写数字识别
2021/05/08 Python