JavaScript中的宏任务和微任务机制是什么
更新时间：2023-10-08
前言：
JavaScript 是一种单线程执行的语言，它只能一次执行一个任务。然而，现实中我们经常需要处理一些需要耗时的操作，比如异步请求、定时器回调等，这些操作如果都在一个任务中执行，会导致UI的响应出现延迟或阻塞。为了避免这种情况，JavaScript 引入了宏任务（Macro Task）和微任务（Micro Task）机制。
宏任务和微任务机制：
宏任务是指由浏览器发起的任务，比如 setTimeout、setInterval 等定时器任务、I/O 任务、UI 交互事件、Script 标签任务等。简单来说，它们是由浏览器自动创建、调度和执行的任务。宏任务会进入到一个任务队列（Task Queue）中，当主线程空闲时，才会从这个队列中依次取出任务执行。
微任务是在宏任务执行过程中产生的任务，比如 Promise 的处理任务、MutationObserver 的回调任务等。它们是由 JavaScript 引擎自身触发、处理和执行的。与宏任务不同的是，微任务不需要进入到任务队列中，而是直接进入到当前执行栈的末尾，等待主线程空闲后立即执行。
任务执行机制：
当 JavaScript 引擎遇到宏任务时，会立即执行该任务，执行过程中如果遇到微任务，会将所有的微任务放入一个微任务队列（Microtask Queue）中，等宏任务执行完成后立即执行微任务队列中的所有微任务。重复这个循环的过程，直到任务队列和微任务队列中都为空。
下面是一个示例来说明宏任务和微任务的执行顺序：
console.log('主线程开始');
setTimeout(function() {
console.log('第一个宏任务');
Promise.resolve().then(function() {
console.log('第一个微任务');
});
Promise.resolve().then(function() {
console.log('第二个微任务');
});
}, 0);
console.log('主线程结束');
在上面的例子中，我们在主线程中创建了一个定时器任务，该任务会在下一个宏任务中被执行，然后在宏任务内部，我们分别创建了两个微任务。当主线程执行完毕后，首先会执行宏任务，也就是定时器任务，输出 '第一个宏任务'，然后将两个微任务添加到微任务队列中。接着，主线程执行完立即执行微任务队列中的微任务，依次输出 '第一个微任务' 和 '第二个微任务'。
总结：
通过引入宏任务和微任务机制，JavaScript 可以更加灵活地处理异步操作，提高程序的执行效率。当遇到耗时的操作时，将其放入宏任务队列中，以保证及时响应其他任务，而微任务则用于在宏任务执行完成后立即执行一些关键的操作，以提高响应速度。理解宏任务和微任务机制的执行顺序，有助于我们更好地管理和调度任务，确保程序的正确运行。 
