面试官：能说说你对宏任务和微任务的理解吗？

站长

2023年09月28日 22:34 · 阅读数 12

一、背景

js 是一种单线程语言，只有一条通道，那么在任务多的情况下，就会出现堵塞，这种情况下就产生了多线程，那么就产生了同步任务和异步任务。

同步任务： 在主线程上排队执行的任务，只有前一个任务执行完毕，才能执行后一个任务。是由 js 执行栈/回调栈执行的

异步任务： 不进入主线程、而进入任务队列的任务，当主线程中的任务运行完成了，才会从任务队列中取出异步任务，放入主线程中执行

二.宏任务和微任务

微任务和宏任务都是异步任务，它们都属于一个队列

宏任务：script、setTimeout、setInterval、postMessage、MessageChannel、及Node.js 环境中的setImmediate.

微任务：Promise.then、Object.observe、MutationObserver、及Node.js 环境中的process.nextTick.

宏任务

宏任务是由宿主环境发起的，比如浏览器、Node等，宏任务的异步代码有：

script（代码块）

setTimeout / setInterval 定时器

setImmediate 定时器

......等等

微任务

微任务是由JS引擎发起的，微任务的异步代码有：

process.nextTick (node)

Promise.then( )/catch( ) 。注意，Promise本身同步，只是它里面的then/catch的回调函数是异步的微任务

Async/Await

Object.observe

......等等

三、任务的执行顺序

有人说宏任务先于微任务执行，也有人说微任务先于宏任务执行

其实，由于整个 script 身就是一个大的宏任务，所以在执行任务时，肯定是执行script这个大的宏任务里面的代码，因此，我们也可以说是宏任务优先于微任务

但是如果我们忽略script这个大的宏任务，仅仅只讨论script里包含的任务代码块，那么任务的执行顺序就一定是微任务优先于宏任务

在这里，我们就先忽略script，执行顺序就为： 同步任务 ---> 微任务 ---> 宏任务

案例演示：下面代码的执行结果是什么？

console.log(1);
setTimeout(() => {
  console.log(2);
}, 0);

const p = new Promise((resolve, reject) => {
  console.log(3);
  resolve("success"); // 标记为成功
  console.log(4);
});

p.then((value) => {
  console.log(value);
});

console.log(5);

我们可以通过文章开头的理论解释，将上面代码分为同步任务、微任务、宏任务三块，

哪些代码属于同步任务，哪些代码属于微任务，哪些代码属于宏任务，如下图所示：

面试官：能说说你对宏任务和微任务的理解吗？

将我们分析好的代码，分开放在相应的队列里，可得到以下代码执行的流程图示：

面试官：能说说你对宏任务和微任务的理解吗？

面试官：能说说你对宏任务和微任务的理解吗？

面试官：能说说你对宏任务和微任务的理解吗？

所以这个案例，最终得到的执行结果就是： 1 3 4 5 “success” 2

四、详细讲解宏任务和微任务的区别

首先，宏任务和微任务的执行时机是不同的。

宏任务会在主线程执行完毕后被执行，而微任务会在主线程执行完毕之前立即执行。

其次，宏任务和微任务的优先级也是不同的。在 JavaScript 中，微任务的优先级比宏任务高，也就是说，如果微任务队列和宏任务队列中都有任务需要执行，微任务会先于宏任务执行。

另外，宏任务和微任务对于 JavaScript 事件循环的影响也是不同的。宏任务会触发事件循环，而微任务不会触发事件循环，而是在主线程上的同步任务执行完毕后立即执行。

此外，宏任务和微任务在实际应用中有着不同的用途。宏任务通常用于与浏览器渲染相关的任务，如 setTimeout 和 requestAnimationFrame，而微任务通常用于异步操作，如 Promise.then 和 async/await。

通过理解宏任务和微任务的区别，我们可以更好的优化代码的性能，例如避免在微任务中执行大量耗时的操作。

总之，宏任务和微任务是 Javascript 中非常重要的概念，对于更好的理解 JavaScript 的执行机制和优化代码的性能是非常有帮助的。

五、小试牛刀

请说一说以下代码的执行顺序和结果：

console.log(1);
setTimeout(() => {
  console.log(2);
  setTimeout(() => {
    console.log(3);
    setTimeout(() => console.log(4), 0);
    Promise.resolve().then(() => console.log(5));
  }, 0);
}, 0);
console.log(6);

解答：

首先，输出 1 和 6，之后，第一层 setTimeout 中的回调函数执行，输出 2。
之后，执行第二层 setTimeout 中的回调函数，输出 3。
然后微任务 Promise.resolve()执行并输出 5，
最后执行第二层 setTimeout 中的回调函数，输出 4。

在这个例子中，可以看到微任务和宏任务在嵌套的 setTimeout 中被调度了，这就使得事件循环变得更加复杂。具体的执行顺序如下：首先执行第一个 setTimeout 的回调函数，执行完之后把第二层 setTimeout 的回调函数和 Promise.resolve 放入微任务队列，紧接着执行第二层 setTimeout 的回调函数，执行完之后把第三层 setTimeout 的回调函数放入微任务队列，最后执行微任务队列中的任务，微任务 Promise.resolve 先于第三层 setTimeout 的回调函数执行。

六、总结

1.宏任务会在主线程执行完毕后被执行，而微任务会在主线程执行完毕之前立即执行。 2.宏任务会触发事件循环，而微任务不会触发事件循环，而是在主线程上执行完毕后立即执行。