专栏首页橙光笔记微任务与宏任务

微任务与宏任务

众所周知,JavaScript是基于事件循环而运行的,微任务与宏任务是事件循环中重要概念。自node火起来后,这个知识点就成了面试官压轴大题,所以我们必须要会。

JavaScript的异步最开始的时候是基于一个个的回调函数,而事件循环中任务,说白了也就是一个个的函数,毕竟函数是JavaScript中的一等公民。那么什么是微任务,什么又是宏任务呢?其实是通过执行的时机来区分的:

微任务:在本次任务执行完后执行。 宏任务:在下一个任务循环的时候执行。

这里有一张经典的图片,供大家参考:

每次事件的循环的执行都是以宏任务开始的。如果本次宏任务执行完毕了,那么就会检索是否有微任务,如果有,那么就去执行微任务,如果微任务执行完或者没有微任务的话那么就会进入下次事件循环。

常见的宏任务:setTimeout、setInterval、setImmediate(Node特有)、requestAnimationFrame(浏览器特有)。 常见的宏任务:Promise中的then/catch/finally方法、process.nextTick(Node特有)。

这里需要注意一点是Promise的构造方法在new的时候会立即执行。 下面来看一个老掉牙的经典面试题吧:

console.log('1');

setTimeout(function() {
    console.log('2');
    process.nextTick(function() {
        console.log('3');
    })
    new Promise(function(resolve) {
        console.log('4');
        resolve();
    }).then(function() {
        console.log('5')
    })
});

process.nextTick(function() {
    console.log('6');
});

new Promise(function(resolve) {
    console.log('7');
    resolve();
}).then(function() {
    console.log('8')
});

setTimeout(function() {
    console.log('9');
    process.nextTick(function() {
        console.log('10');
    })
    new Promise(function(resolve) {
        console.log('11');
        resolve();
    }).then(function() {
        console.log('12')
    })
})

分别打印:1 7 6 8 2 4 3 5 9 11 10 12。如果和你的预期是一样的说明你已经掌握了,就没必要看下面的分解步骤了。

  1. 首先打印1。第3行遇到setTimeout加入到宏任务队列中,下次处理。第16行,遇到微任务process.nextTick,加入到微任务的队列中。第20行new Promise执行构造方法打印7,将then放在微任务队列中。第20行发现setTimeout,放入宏任务队列中。
  2. 本次任务执行完后,检测微任务,发现有2个,一个是第16行的process.nextTick,一个是23行的then,分别执行,打印6和8。
  3. 执行下一个宏任务,也就是第3行的setTimeout,分别打印2和4,发现有2个微任务,分别打印3和5。
  4. 执行下一个宏任务,也就是第27行的setTimeout,分别打印9和11,发现有2个微任务,分别打印10和12。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 使用new Function创建async方法

    new Function最后一个参数是函数体,前面的参数是变量名称,全部都是字符串的形式。也就是:

    kai666666
  • JavaScript易错点(长期更新)

    点评: new的时候,如果构造函数的原型是是object类型那么浏览器会添加o1.__proto__ = F.prototype否则会添加o1.__proto_...

    kai666666
  • Canvas系列(8):像素操作

    经常拍照的同学会使用图片处理软件,给自己的照片加上各种效果。图片处理软件也是软件,同样也是由代码写的,那么如何实现图片处理呢,这章我们就探讨一下这个问题。

    kai666666
  • 10分钟了解JS堆、栈以及事件循环的概念

    其实一开始对栈、堆的概念特别模糊,只知道好像跟内存有关,又好像事件循环也沾一点边。面试薄荷的时候,面试官正好也问到了这个问题,当时只能大方的承认不会。痛定思痛,...

    用户2356368
  • 20180708_ARTS_week02

    Add Two Numbers You are given two non-empty linked lists representing two non-ne...

    Bob.Chen
  • 十四、深入核心,详解事件循环机制

    JavaScript的学习零散而庞杂,很多时候我们学到了一些东西,但是却没办法感受到进步!甚至过了不久,就把学到的东西给忘了。为了解决自己的这个困扰,在学习的过...

    用户6901603
  • 全方位理解JavaScript的Event Loop

    下面我们一个一个的来了解 Event Loop 相关的知识点,最后再一步一步分析出本段代码最后的输出顺序。

    laixiangran
  • JavaScript之Event Loop

    先看段代码: console.log(1); setTimeout(function () { console.log(2); new Pr...

    laixiangran
  • 让我印象深刻的javascript面试题

    对于一个web前端来说,面试的时候,难免会遇到javascript的面试题。就我自己而言。有几道面试题,有些是我面试遇到的,有些是在网上看到的,但是都印象深刻。...

    守候i
  • JavaScript 事件循环机制

    javascript是一门单线程的非阻塞的脚本语言。单线程意味着javascript在执行代码的任何时候,都只有一个主线程来处理所有的任务。

    嘉明

扫码关注云+社区

领取腾讯云代金券