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得到网页中所有的div的id
Oct 19 Javascript
jQuery 学习第五课 Ajax 使用说明
May 17 Javascript
node.js中的fs.exists方法使用说明
Dec 17 Javascript
jQuery中通过ajax的get()函数读取页面的方法
Feb 29 Javascript
Vue-cli proxyTable 解决开发环境的跨域问题详解
May 18 Javascript
老生常谈Bootstrap媒体对象
Jul 06 Javascript
JS装饰器函数用法总结
Apr 21 Javascript
浅析Vue 和微信小程序的区别、比较
Aug 03 Javascript
javacript replace 正则取字符串中的值并替换【推荐】
Sep 13 Javascript
使用ESLint禁止项目导入特定模块的方法步骤
Mar 04 Javascript
VsCode与Node.js知识点详解
Sep 05 Javascript
微信小程序制作扭蛋机代码实例
Sep 24 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的curl开启问题探讨
2014/04/08 PHP
php实现的简单日志写入函数
2015/03/31 PHP
php微信公众号开发之二级菜单
2018/10/20 PHP
js中replace的用法总结
2013/12/27 Javascript
JavaScript中的style.cssText使用教程
2014/11/06 Javascript
ECMAScript 5中的属性描述符详解
2015/03/02 Javascript
前端性能优化及技巧
2016/05/06 Javascript
全面解析Bootstrap中nav、collapse的使用方法
2016/05/22 Javascript
AngularJs入门教程之环境搭建+创建应用示例
2016/11/01 Javascript
jQuery实现动态控制页面元素的方法分析
2017/12/20 jQuery
vue-router 源码实现前端路由的两种方式
2018/07/02 Javascript
浅谈vue 单文件探索
2018/09/05 Javascript
Vue中跨域及打包部署到nginx跨域设置方法
2019/08/26 Javascript
JS操作json对象key、value的常用方法分析
2019/10/29 Javascript
vue keep-alive列表页缓存 详情页返回上一页不刷新,定位到之前位置
2019/11/26 Javascript
基于VUE实现简单的学生信息管理系统
2021/01/13 Vue.js
jQuery实现鼠标拖动图片功能
2021/03/04 jQuery
使用Python编写提取日志中的中文的脚本的方法
2015/04/30 Python
Python制作简单的网页爬虫
2015/11/22 Python
python 开发的三种运行模式详细介绍
2017/01/18 Python
python字符串过滤性能比较5种方法
2017/06/22 Python
基于多进程中APScheduler重复运行的解决方法
2019/07/22 Python
pandas的to_datetime时间转换使用及学习心得
2019/08/11 Python
Python 分发包中添加额外文件的方法
2019/08/16 Python
Django发送邮件功能实例详解
2019/09/02 Python
解决python 读取 log日志的编码问题
2019/12/24 Python
详解pycharm连接不上mysql数据库的解决办法
2020/01/10 Python
Django多层嵌套ManyToMany字段ORM操作详解
2020/05/19 Python
python读取hdfs上的parquet文件方式
2020/06/06 Python
css3实现可滑动跳转的分页插件示例
2014/05/08 HTML / CSS
2014年计算机专业个人自我评价
2014/01/19 职场文书
广播体操比赛口号
2014/06/10 职场文书
科学育儿宣传标语
2014/10/08 职场文书
办公室务虚会发言材料
2014/10/20 职场文书
采购员岗位职责
2015/02/03 职场文书
工作感言一句话
2015/08/01 职场文书