为什么会有宏任务和微任务

宏任务和微任务的存在是为了解决异步编程中的一些问题。在 JavaScript 中，由于某些操作是异步的，如网络请求、定时器等，它们的执行时间是不确定的，这会导致代码执行的顺序不可预测，从而可能出现一些问题，比如回调地狱、闭包引用等。

为了解决这些问题，JavaScript 引入了宏任务和微任务的概念。宏任务可以看作是一个完整的执行单元，它包括了整个 JavaScript 的执行过程，如整个 script 代码、setTimeout 和 setInterval 等定时器、事件的回调函数等。微任务则是宏任务执行过程中的一个子任务，它通常是一些需要在当前宏任务执行结束前执行的任务，如 Promise 的回调函数、MutationObserver 的回调函数等。

通过将异步任务分为宏任务和微任务，JavaScript 引擎可以更好地控制任务的执行顺序，从而避免一些问题的发生。比如，微任务可以在当前宏任务执行结束前执行，从而避免了回调地狱的问题；MutationObserver 可以在 DOM 变化后立即执行，从而避免了闭包引用的问题。

相关问题

js 为什么要分宏任务和微任务

JavaScript中的宏任务和微任务是为了控制异步任务的执行顺序和优先级而提出的概念。

宏任务通常包括一些异步任务，如setTimeout，setInterval，I/O操作等。当宏任务被放入执行队列中时，它会等待JavaScript引擎的空闲时间，然后在主线程上执行。

微任务是一组需要在当前宏任务执行完毕后立即执行的任务。常见的微任务包括Promise和process.nextTick。微任务执行在当前宏任务执行结束后，当前宏任务的异步任务执行前，因此微任务可以在下一个宏任务之前执行完成。

通过将异步任务分为宏任务和微任务，可以确保异步任务按照正确的顺序执行，避免了可能的竞争条件和死锁问题。此外，微任务的优先级高于宏任务，因此它们可以在下一个宏任务之前立即执行，从而提高了应用程序的响应速度和用户体验。

宏任务和微任务

在 JavaScript 中，宏任务和微任务都是异步操作的执行单元。

宏任务包括：script（整体代码）、setTimeout、setInterval、I/O 操作、UI 渲染等。当执行完一个宏任务后，会清空所有微任务队列，然后执行下一个宏任务。

微任务包括：Promise.then、Promise.catch、Promise.finally、MutationObserver 等。当一个微任务队列中的所有任务都执行完毕后，会立即执行下一个宏任务。如果在执行微任务过程中又产生了新的微任务，则会加入到当前微任务队列的末尾，等待下一次执行。

举个例子：

console.log('start');

setTimeout(function () {
  console.log('setTimeout');
}, 0);

Promise.resolve()
  .then(function () {
    console.log('promise1');
  })
  .then(function () {
    console.log('promise2');
  });

console.log('end');

输出的结果为：

start
end
promise1
promise2
setTimeout

因为 setTimeout 是一个宏任务，所以会先执行整个 script，输出 start 和 end，然后将 setTimeout 加入到宏任务队列中。而 Promise.then 是一个微任务，所以会在当前宏任务执行完毕后立即执行，输出 promise1 和 promise2。最后执行宏任务队列中的 setTimeout，输出 setTimeout。