能说说你对宏任务 和 微任务 的理解吗

#一、背景

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.宏任务会触发事件循环，而微任务不会触发事件循环，而是在主线程上执行完毕后立即执行。