Javascript中Microtask和Macrotask鲜为人知的知识点


Posted in Javascript onApril 02, 2022

首先我们来看一道题目,如下javascript代码,执行后会在控制台打印出什么内容?

async function async1() {
   console.log('async1 start');
   await async2();
   console.log('async1 end');
 }
 async function async2() {
   console.log('async2 start');
   return new Promise((resolve, reject) => {
     resolve();
     console.log('async2 promise');
   })
 }
 console.log('script start');
 setTimeout(function() {
   console.log('setTimeout');
 }, 0);  
 async1();
 new Promise(function(resolve) {
   console.log('promise1');
   resolve();
 }).then(function() {
   console.log('promise2');
 }).then(function() {
   console.log('promise3');
 });
 console.log('script end')

说实话,真正能在面试中把这道题目答对的前端工程师凤毛麟角。我们先来瞧一下答案吧。把以上代码存到test.js文件中,并用node执行一下,结果如下:

Javascript中Microtask和Macrotask鲜为人知的知识点

如果把以上代码贴到一个网页中的script标签里面,然后打开这个网页,再打开控制台,可以看到如下输出(Chrome 64位 63.0.3239.84):

Javascript中Microtask和Macrotask鲜为人知的知识点

结果和node打印的一模一样。那么为什么是这个顺序呢?

我们都知道js的单线程特性(html5的web worker不算在内~)以及良好的异步支持。在单线程的前提下,异步任务到底什么时候开始执行,其实是有两个队列来进行管理,即Macrotask和Microtask(只有一个字母的差距,不要认错……)。在当前正在执行的线程中,如果碰到属于Macrotask的异步任务,则放入Macrotask队列;碰到Microtask的异步任务则放入Microtask队列。注意这里只是把任务放入队列,并不会执行它。等到当前主线程任务执行完毕之后,会依次从Microtask队列中取出任务执行,在执行期间当然还是遵循碰到异步任务放入相应队列的原则。等到Microtask任务全部执行过了,此时再从Macrotask队列中取出一个任务执行。

属于Macrotask的任务有:

setTimeout,setInteveral,script标签,I/O,UI渲染

属于Microtask的任务有:

Promise,async/await,process.nextTick,Object.observe,MutationObserver

(事实上,即使同样是Microtask,内部也是有优先级的差别的,例如NodeJS的实现上,process.nextTick比Promise要先执行。相关问题可以瞧瞧这个连接:https://jakearchibald.com/2015/tasks-microtasks-queues-and-schedules/ 。反正我瞧到一半就放弃了,好在async/await和Promise没有优先级差别)

然后我们来分析一下本题中的执行顺序:

【1】第15行执行,打印出script start

【2】第16至18行,把回调任务放入Macrotask (目前Macrotask:第16行setTimeout,Microtask:空)

【3】第20行,执行async1函数,先打印出第2行的async1 start

【4】第3行的async2先执行,打印出第8行的async2 start

【5】第9行至第12行遇到Promise,先打印出第11行的async2 promise(注意不管你resolve写在new Promise的函数什么位置,都跟写到最后一句一样!)

【6】第3行的async2返回了Promise,并且async2前面有await修饰,因此后面第4行的任务被放到Microtask(目前Macrotask:第16行setTimeout,Microtask:第4行)

【7】第22至25行,打印出promise1,并把第26行放入Microtask,注意第28行还没执行到,所以这行什么都不做(目前Macrotask:第16行setTimeout,Microtask:第4行,第26行)

【8】第30行打印script end(目前Macrotask:第16行setTimeout,Microtask:第4行,第26行)

【9】脚本主线程执行结束,现在拿出来一个Microtask,即第4行,打印async1 end(目前Macrotask:第16行setTimeout,Microtask:第26行)

【10】再拿出来一个Microtask,即第26行,打印promise2,此时由于第26行后面跟着then,所以把第28行插入Microtask(目前Macrotask:第16行setTimeout,Microtask:第28行)

【11】再拿出来一个Microtask,即第28行,打印promise3(目前Macrotask:第16行的setTimeout,Microtask:空)

【12】Microtask没有了,执行下一个Macrotask,即第16行的setTimeout,打印setTimeout,结束

需要注意的是,以下两种写法,效果是一模一样的(resolve的位置无所谓):

写法1:
new Promise((resolve, reject) => {
  console.log('1111');
  resolve();
  console.log('2222');
});
 
写法2:
new Promise((resolve, reject) => {
  console.log('1111');
  console.log('2222');
  resolve();
});

另外,对于Promise的链式调用,如new Promise(....).then(...).then(...)....,一次只放第一个then的内容进入Microtask,等第一个then执行的时候,会把第二个then放入Microtask,而不是一次把两个then都放进去。

以上就是Javascript中Microtask和Macrotask鲜为人知的知识点的详细内容,更多关于Javascript中Microtask和Macrotask的资料请关注三水点靠木其它相关文章!

Javascript 相关文章推荐
比较全的JS checkbox全选、取消全选、删除功能代码
Dec 19 Javascript
jQuery asp.net 用json格式返回自定义对象
Apr 07 Javascript
加速IE的Javascript document输出的方法
Dec 02 Javascript
Jquery的基本对象转换和文档加载用法实例
Feb 25 Javascript
Javascript小技能总结(推荐)
Jun 02 Javascript
微信小程序 POST请求的实例详解
Sep 29 Javascript
AngularJS自定义过滤器用法经典实例总结
May 17 Javascript
jquery实现动态改变css样式的方法分析
May 27 jQuery
使用typescript构建Vue应用的实现
Aug 26 Javascript
浅析Vue 中的 render 函数
Feb 28 Javascript
微信小程序去除左上角返回键的实现方法
Mar 06 Javascript
微信小程序中wxs文件的一些妙用分享
Feb 18 Javascript
vue中div禁止点击事件的实现
Apr 02 #Vue.js
Vue组件更新数据v-model不生效的解决
Apr 02 #Vue.js
Vue+TypeScript中处理computed方式
Apr 02 #Vue.js
Vue+Flask实现图片传输功能
Apr 01 #Vue.js
在vue中import()语法不能传入变量的问题及解决
Apr 01 #Vue.js
Vue中使用import进行路由懒加载的原理分析
Apr 01 #Vue.js
angular异步验证器防抖实例详解
You might like
php 获取可变函数参数的函数
2009/08/26 PHP
PHP中的随机性 你觉得自己幸运吗?
2016/01/22 PHP
Laravel中基于Artisan View扩展包创建及删除应用视图文件的方法
2016/10/08 PHP
PHP实现笛卡尔积算法的实例讲解
2019/12/22 PHP
Jquery Ajax学习实例 向页面发出请求,返回XML格式数据
2010/03/14 Javascript
Jquery实现仿京东商城省市联动菜单
2015/11/19 Javascript
基于jquery实现日历签到功能
2020/09/11 Javascript
基于Jquery和CSS3制作数字时钟附源码下载(CSS3篇)
2015/11/24 Javascript
jQuery点击改变class并toggle及toggleClass()方法定义用法
2015/12/11 Javascript
浅谈js中的引用和复制(传值和传址)
2016/09/18 Javascript
脚本div实现拖放功能(两种)
2017/02/13 Javascript
js 事件的传播机制(实例讲解)
2017/07/20 Javascript
layui 表格的属性的显示转换方法
2018/08/14 Javascript
jQuery Ajax实现Select多级关联动态绑定数据的实例代码
2018/10/26 jQuery
Python操作json数据的一个简单例子
2014/04/17 Python
详解python 3.6 安装json 模块(simplejson)
2019/04/02 Python
Python实现的删除重复文件或图片功能示例【去重】
2019/04/23 Python
Python实现队列的方法示例小结【数组,链表】
2020/02/22 Python
Python selenium爬取微博数据代码实例
2020/05/22 Python
python实现自动清理重复文件
2020/08/24 Python
Python爬取梨视频的示例
2021/01/29 Python
利用CSS3 动画 绘画 圆形动态时钟
2018/03/20 HTML / CSS
web页面录屏实现
2019/02/12 HTML / CSS
使用HTML5 Canvas API绘制弧线的教程
2016/03/22 HTML / CSS
西班牙最大的在线滑板和街头服饰商店:Fillow.net
2019/04/15 全球购物
JBL加拿大官方商店:扬声器、耳机等
2020/10/23 全球购物
英国珠宝网站Argento: PANDORA、Olivia Burton和Nomination等
2020/05/08 全球购物
委托与事件是什么关系?为什么要使用委托
2014/04/18 面试题
父亲的菜园教学反思
2014/02/13 职场文书
房地产活动策划方案
2014/05/14 职场文书
班级读书活动总结
2014/06/30 职场文书
汽车转让协议书
2015/01/29 职场文书
事业单位聘任报告
2015/03/02 职场文书
钱学森电影观后感
2015/06/04 职场文书
入党转正申请自我鉴定
2019/06/25 职场文书
JS数组去重详情
2021/11/07 Javascript