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控制表格隔行变色
Jun 26 Javascript
基于Jquery的$.cookie()实现跨越页面tabs导航实现代码
Mar 03 Javascript
判断对象是否Window的实现代码
Jan 10 Javascript
javascript中html字符串转化为jquery dom对象的方法
Aug 27 Javascript
为什么JavaScript没有块级作用域
May 22 Javascript
JS表单验证方法实例小结【电话、身份证号、Email、中文、特殊字符、身份证号等】
Feb 14 Javascript
一个Js文件函数中调用另一个Js文件函数的方法演示
Aug 14 Javascript
JavaScript与Java正则表达式写法的区别介绍
Aug 15 Javascript
vue通过路由实现页面刷新的方法
Jan 25 Javascript
jQuery选择器之基本过滤选择器用法实例分析
Feb 19 jQuery
js+html实现点名系统功能
Nov 05 Javascript
vue实现图片按比例缩放问题操作
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解析url的三个示例
2014/01/20 PHP
PHP中通过trigger_error触发PHP错误示例
2015/06/23 PHP
使用PHP接受文件并获得其后缀名的方法
2015/08/05 PHP
简述php环境搭建与配置
2016/12/05 PHP
解析PHP之提取多维数组指定列的方法
2017/01/03 PHP
PHP代码重构方法漫谈
2018/04/17 PHP
laravel 如何实现引入自己的函数或类库
2019/10/15 PHP
javascript 火狐(firefox)不显示本地图片问题解决
2008/07/05 Javascript
Prototype ObjectRange对象学习
2009/07/19 Javascript
JS定时器实例详细分析
2013/10/11 Javascript
基于jquery实现的树形菜单效果代码
2015/09/06 Javascript
JavaScrip调试技巧之断点调试
2015/10/22 Javascript
浅析Bootstrap验证控件的使用
2016/06/23 Javascript
javascript insertAfter()定义与用法示例
2016/07/25 Javascript
jQuery Password Validation密码验证
2016/12/30 Javascript
jquery仿京东商品放大浏览页面
2017/06/06 jQuery
JS实现评价的星星功能
2017/08/20 Javascript
Angularjs中数据绑定的实例详解
2017/08/25 Javascript
JS实现倒计时图文效果
2018/11/17 Javascript
在Python的Django框架中生成CSV文件的方法
2015/07/22 Python
django rest framework 数据的查找、过滤、排序的示例
2018/06/25 Python
Python之循环结构
2019/01/15 Python
Python 使用folium绘制leaflet地图的实现方法
2019/07/05 Python
使用python实现回文数的四种方法小结
2019/11/24 Python
Python pandas库中的isnull()详解
2019/12/26 Python
python第三方库学习笔记
2020/02/07 Python
Python如何自动获取目标网站最新通知
2020/06/18 Python
2021年值得向Python开发者推荐的VS Code扩展插件
2021/01/25 Python
Deichmann英国:德国鞋类零售商
2021/01/30 全球购物
数控技术应用个人求职信范文
2014/02/03 职场文书
食品采购员岗位职责
2014/04/14 职场文书
女性健康讲座主持词
2015/07/04 职场文书
2016年“抗战胜利纪念日”71周年校园广播稿
2015/12/18 职场文书
MySQL删除和插入数据很慢的问题解决
2021/06/03 MySQL
MySQL普通表如何转换成分区表
2022/05/30 MySQL
MySQL中LAG()函数和LEAD()函数的使用
2022/08/14 MySQL