【web前端面试必问3】什么叫宏任务？什么叫微任务？

本文的目的就是要保证你彻底弄懂javascript的执行机制，如果读完本文还不懂，可以揍我。

如果看懂了，请点击收藏，方便下次再来看，等你完全明白了在取消收藏。

javascript是一门单线程语言，所以javascript是按语句的执行顺序执行的。

你说执行就执行吧，还非要搞个专有名词，叫什么同步任务，异步任务。

同步任务：就是先执行得大任务。比如画画，先画轮廓。这里得同步任务就是轮廓先画。服务器渲染时候先渲染整个页面得轮廓。如果某个局部比如图片加载过多复杂就暂时不加载，先跳过去。

异步任务：就是后执行得小任务。比如画画得局部细节。这里就是刚才跳过去得图片等负载得加载内容。

 

 这样说不就理解了吗，还非要搞个转有名词啥同步异步，真是够麻烦得...........

 好了理解了，同步任务和异步任务后，那么再看一下js代码执行得逻辑。

首先我们知道js代码是一行一行执行的对吧，那么我们来看一下下面的这个代码控制台输出结果的顺序

var a = 1
console.log(a)
var b = 2
console.log(b)

这个谁都知道呀，js代码是一行一行执行的，肯定是先输出1,然后是2

那么恭喜你答对了。你肯定觉得你理解了是吧，好，接下来我们来看下面这个代码

那么这个对应控制台输出的结果顺序是啥呢？

有人说这不小意思嘛，刚才已经说了js的代码逻辑是一行一行执行，所以这个控制台结果是

//setTimeout
//promise
//then
//console

那么我就恭喜你..........................................................................答错了！

不是一行一行执行的吗？为什么会错？哈哈骚年不要急，继续看下去

没错js逻辑代码的确是一行一行执行的，接下来如果直接讲可能会听不懂。我们举个例子

 js在执行代码的时候先得顺序是

先执行 A

再执行B

再执行C

然后这个 ABC就被称为是所谓得宏任务。

当然，如果ABC中出现比如：setTimeout() 函数要放到一个地方，等会在执行。这个地方叫下一个循环的 MacroTask Queue 宏任务队列 。

那么现在你懂了吧？

那么我们来测试一下看你掌握的情况

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')
    })
})

如果单一的只有一个宏任务：宏任务执行完>执行这轮微任务

如果有连个宏任务是并排的关系,则先执行完完整的任务----即执行完这个任务的宏、微任务，然后再去执行并排关系的另一个完整的宏任务。

如果你能看懂我的这张图的内容，那么我就可以告诉你，你完全懂得了宏任务和微任务了。