宏任务与微任务区别全解析

一分耕耘，一分收获！既然打开了这篇文章《宏任务与微任务区别详解》，就坚持看下去吧！文中内容包含等等知识点...希望你能在阅读本文后，能真真实实学到知识或者帮你解决心中的疑惑，也欢迎大佬或者新人朋友们多留言评论，多给建议！谢谢！

宏任务和微任务的区别在于执行时机和优先级，微任务优先级更高，会在当前宏任务结束后立即执行所有微任务，再执行下一个宏任务。宏任务包括script、setTimeout、setInterval等，微任务包括Promise.then/catch/finally、queueMicrotask、MutationObserver等。执行顺序为：先执行一个宏任务，再执行所有微任务，最后更新渲染，循环往复。例如，同步代码执行后，先输出script start和script end，接着执行Promise.then的微任务输出promise1和promise2，最后执行setTimeout的宏任务输出setTimeout。应用场景包括优化用户体验、处理异步操作、控制执行顺序。浏览器在执行完宏任务和微任务后才会渲染页面，因此过多微任务可能导致卡顿。避免问题的方法包括避免长时间微任务、合理使用setTimeout/setInterval、使用requestAnimationFrame优化动画。

JavaScript中宏任务和微任务的区别在于它们的执行时机和优先级。简单来说，微任务比宏任务“更着急”，会在当前宏任务执行完毕后立即执行，而下一个宏任务则需要等到下一次事件循环。

JavaScript 的事件循环机制是理解宏任务和微任务的关键。

宏任务和微任务分别有哪些？

宏任务（Macro Task）主要包括：

• script (整体代码)
• setTimeout
• setInterval
• setImmediate (Node.js)
• I/O
• UI rendering

微任务（Micro Task）主要包括：

• Promise.then/catch/finally
• queueMicrotask
• MutationObserver
• process.nextTick (Node.js)

理解这些任务类型有助于我们预测代码的执行顺序。例如，一个Promise.then回调会作为一个微任务被添加到微任务队列中，而不是立即执行。

宏任务和微任务的执行顺序是怎样的？

执行顺序大致如下：

1. 执行一个宏任务（通常是 script 整体代码）。
2. 检查是否存在微任务队列。
3. 如果存在微任务队列，则依次执行队列中的所有微任务，直到队列为空。
4. 浏览器更新渲染。
5. 重复以上步骤，执行下一个宏任务。

这个过程不断循环，构成了 JavaScript 的事件循环。想象一下，你在处理一个紧急的电话（微任务），必须在接听下一个电话（宏任务）之前处理完。

如何用代码示例说明宏任务和微任务的区别？

console.log('script start');

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

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

console.log('script end');

这段代码的输出顺序是：

script start
script end
promise1
promise2
setTimeout

解释：

1. script start和script end首先被打印，因为它们是同步代码。
2. Promise.resolve().then的回调被添加到微任务队列。
3. setTimeout的回调被添加到宏任务队列。
4. 在当前宏任务（script 整体代码）执行完毕后，开始执行微任务队列，因此promise1和promise2在setTimeout之前被打印。
5. 然后，浏览器开始执行下一个宏任务，即setTimeout的回调。

注意，如果promise链很长，比如有100个.then()，它们会被依次添加到微任务队列，并且在下一个宏任务开始前全部执行完毕。

宏任务和微任务在实际开发中有哪些应用场景？

• 优化用户体验： 可以使用微任务来执行一些需要在页面更新前完成的操作，比如更新 DOM 后的数据同步，从而避免页面闪烁。
• 处理异步操作： Promise 和 async/await 广泛应用于处理异步操作，它们都基于微任务实现。
• 控制任务执行顺序： 了解宏任务和微任务的执行顺序可以帮助我们更好地控制代码的执行顺序，避免出现意外的结果。

想象一下，你需要先保存用户输入的数据，再更新 UI 显示保存成功的提示。 使用微任务，你可以确保数据在 UI 更新之前完成保存，从而提供更好的用户体验。

宏任务和微任务与浏览器渲染的关系是什么？

浏览器会在每个宏任务执行完毕后，检查微任务队列并执行所有微任务，然后才会进行页面渲染。这意味着，微任务可以用来在页面更新前执行一些必要的操作，例如更新数据或修改 DOM。

如果微任务队列中任务过多，可能会导致页面卡顿，因为浏览器需要在渲染之前执行完所有微任务。因此，在实际开发中，需要合理控制微任务的数量，避免过度使用。

如何避免宏任务和微任务带来的问题？

• 避免长时间运行的微任务： 长时间运行的微任务会阻塞事件循环，导致页面卡顿。
• 合理使用setTimeout和setInterval： setTimeout和setInterval的回调函数会被添加到宏任务队列，因此它们的执行时机可能会受到其他任务的影响。
• 使用requestAnimationFrame优化动画： requestAnimationFrame会在浏览器下一次重绘之前执行，可以用来创建流畅的动画效果。

理解宏任务和微任务的区别，可以帮助我们编写更高效、更稳定的 JavaScript 代码。 就像了解交通规则一样，可以帮助我们安全地驾驶，避免发生交通事故。

到这里，我们也就讲完了《宏任务与微任务区别全解析》的内容了。个人认为，基础知识的学习和巩固，是为了更好的将其运用到项目中，欢迎关注golang学习网公众号，带你了解更多关于事件循环,执行顺序,宏任务,微任务的知识点！