JavaScript中宏任务和微任务的区别是什么-js教程-PHP中文网

JavaScript中宏任务和微任务的区别是什么

月夜之吻

发布： 2025-07-19 10:23:02

原创

488人浏览过

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

JavaScript中宏任务和微任务的区别是什么

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

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

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

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

立即学习“Java免费学习笔记（深入）”；

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

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

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

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

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

执行顺序大致如下：

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

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

Remove.bg

AI在线抠图软件，图片去除背景

102

查看详情

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

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

登录后复制

解释：

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

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

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

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

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

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

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

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

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

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