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 相关文章推荐
javascript 实现父窗口引用弹出窗口的值的脚本
Aug 07 Javascript
Javascript 跨域访问解决方案
Feb 14 Javascript
关于javascript 回调函数中变量作用域的讨论
Sep 11 Javascript
jquery中使用ajax获取远程页面信息
Nov 13 Javascript
基于jquery封装的一个js分页
Nov 15 Javascript
js实现简单的购物车有图有代码
May 26 Javascript
运行Node.js的IIS扩展iisnode安装配置笔记
Mar 02 Javascript
JavaScript实现表格点击排序的方法
May 11 Javascript
使用CamanJS在Web页面上处理图像的技巧
Aug 18 Javascript
JavaScript使用键盘输入控制实现数字验证功能
Aug 19 Javascript
浅析vue数据绑定
Jan 17 Javascript
EasyUI在Panel上动态添加LinkButton按钮
Aug 11 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导入模块文件分享
2015/03/17 PHP
PHP学习笔记之session
2018/05/06 PHP
如何重写Laravel异常处理类详解
2020/12/20 PHP
Prototype Array对象 学习
2009/07/19 Javascript
Jquery Change与bind事件代码
2011/09/29 Javascript
jQuery 属性选择器element[herf*='value']使用示例
2013/10/20 Javascript
使用jQuery和PHP实现类似360功能开关效果
2014/02/12 Javascript
jQuery实现微信长按识别二维码功能
2016/08/26 Javascript
vue2.0+webpack环境的构造过程
2016/11/08 Javascript
AngularJS使用ng-app自动加载bootstrap框架问题分析
2017/01/04 Javascript
js实现下一页页码效果
2017/03/07 Javascript
解决Node.js使用MySQL出现connect ECONNREFUSED 127.0.0.1:3306的问题
2017/03/09 Javascript
写一个移动端惯性滑动&回弹Vue导航栏组件 ly-tab
2018/03/06 Javascript
angular中两种表单的区别(响应式和模板驱动表单)
2018/12/06 Javascript
JavaScript模板引擎原理与用法详解
2018/12/24 Javascript
js将日期格式转换为YYYY-MM-DD HH:MM:SS
2020/09/18 Javascript
解决vue-cli输入命令vue ui没效果的问题
2020/11/17 Javascript
Vue看了就会的8个小技巧
2021/01/21 Vue.js
[46:55]完美世界DOTA2联赛决赛 FTD vs Phoenix 第三场 11.08
2020/11/11 DOTA
零基础学Python(一)Python环境安装
2014/08/20 Python
python3简单实现微信爬虫
2015/04/09 Python
Python跨文件全局变量的实现方法示例
2017/12/10 Python
利用python如何处理nc数据详解
2018/05/23 Python
tensorflow指定CPU与GPU运算的方法实现
2020/04/21 Python
如何用python免费看美剧
2020/08/11 Python
selenium携带cookies模拟登陆CSDN的实现
2021/01/19 Python
浅谈HTML5新增及移除的元素
2016/06/27 HTML / CSS
Html5移动端适配IphoneX等机型的方法
2019/06/25 HTML / CSS
Melijoe美国官网:法国奢侈童装购物网站
2017/04/19 全球购物
巴西一家专门从事家居和装饰的连锁店:Camicado
2019/08/14 全球购物
婚礼主持结束词
2014/03/13 职场文书
初二学生评语大全
2014/12/26 职场文书
毕业生个人总结
2015/02/28 职场文书
讲文明倡议书
2015/04/29 职场文书
男方家长婚礼致辞
2015/07/27 职场文书
微信小程序中使用vant框架的具体步骤
2022/02/18 Javascript