微任务在宏任务结束后、渲染前执行，优先级高于宏任务，用于尽快处理Promise回调、MutationObserver等异步操作，确保逻辑在视觉更新前完成，提升性能与用户体验。
微任务，简单说，就是在当前宏任务执行结束后，下一个宏任务执行前，会被清空的任务队列。 这理解起来可能有点绕，但核心就是它比宏任务“更着急”执行。
微任务的执行时机非常关键，它直接影响到 JavaScript 事件循环的运作方式，进而影响到程序的性能和行为。
微任务是理解异步编程和优化 JavaScript 应用的关键。
微任务队列何时被清空？
微任务队列的清空时机，或者说执行时机，发生在以下几个关键节点：
每个宏任务执行完毕后： 这是最核心的一点。当一个宏任务（例如：script 脚本的首次执行、setTimeout、setInterval、I/O、UI 渲染等）执行完成后，JavaScript 引擎会检查微任务队列是否为空。
在渲染之前： 在浏览器准备更新页面渲染之前，会先清空微任务队列。这意味着微任务的更新会尽可能在用户看到变化之前完成。
事件循环的每个阶段之间： 事件循环的每个阶段（例如：定时器阶段、I/O 阶段、空闲阶段等）完成后，都会检查并执行微任务队列。
Promise 的
resolve
和
reject
回调： 当 Promise 对象的状态从 pending 变为 resolved 或 rejected 时，相应的
then
或
catch
回调函数会被添加到微任务队列中。
MutationObserver 的回调： 当 DOM 发生变化，并且 MutationObserver 观察到这些变化时，其回调函数会被添加到微任务队列中。
这几点理解起来，可能需要结合一些实际的例子。 比如，你有一个点击事件，点击后，先修改了 DOM，然后执行了一个 Promise。 那么，Promise 的
then
回调会在 DOM 更新渲染之前执行，确保你的逻辑在视觉变化之前完成。
为什么微任务比宏任务“更着急”？
这其实涉及到 JavaScript 事件循环的机制。 JavaScript 是单线程的，这意味着它一次只能执行一个任务。 为了处理异步操作，JavaScript 使用了事件循环。
事件循环大致如下运作：
从宏任务队列中取出一个宏任务执行。执行这个宏任务。检查微任务队列，如果有微任务，则依次执行，直到微任务队列为空。更新渲染。重复以上步骤。
微任务的优先级高于宏任务，这是因为微任务的设计初衷就是为了处理那些需要尽快执行的任务，例如 Promise 的回调、DOM 变化后的处理等。 如果这些任务被放入宏任务队列，那么它们可能需要等待更长的时间才能执行，这会导致性能问题和用户体验下降。
举个例子，假设你有一个动画，需要在 DOM 发生变化后立即更新。 如果你使用宏任务来处理 DOM 变化后的更新，那么动画可能会出现卡顿，因为宏任务的执行可能会被其他任务延迟。 但是，如果你使用微任务来处理 DOM 变化后的更新，那么动画会更加流畅，因为微任务会在 DOM 变化后立即执行。
Promise 是如何与微任务关联的？
Promise 的
then
和
catch
回调函数会被添加到微任务队列中。 这意味着当 Promise 对象的状态发生变化时，相应的回调函数会尽快执行。
const promise = new Promise((resolve, reject) => { resolve('Promise resolved');});promise.then((value) => { console.log(value); // 这行代码会在当前宏任务结束后，下一个宏任务开始前执行});console.log('同步代码'); // 这行代码会先于 Promise 的 then 回调执行
在这个例子中，
console.log('同步代码')
会先于
console.log(value)
执行。 这是因为
console.log('同步代码')
是同步代码，而
promise.then
的回调函数会被添加到微任务队列中，等待当前宏任务执行结束后再执行。
MutationObserver 与微任务有什么关系？
MutationObserver 用于监听 DOM 的变化。 当 DOM 发生变化时，MutationObserver 的回调函数会被添加到微任务队列中。
const observer = new MutationObserver((mutations) => { mutations.forEach((mutation) => { console.log('DOM 发生变化了'); // 这行代码会在 DOM 变化后，当前宏任务结束后，下一个宏任务开始前执行 });});observer.observe(document.body, { attributes: true, childList: true, subtree: true,});document.body.appendChild(document.createElement('div'));console.log('同步代码'); // 这行代码会先于 MutationObserver 的回调执行
在这个例子中，
console.log('同步代码')
会先于
console.log('DOM 发生变化了')
执行。 这是因为
console.log('同步代码')
是同步代码，而 MutationObserver 的回调函数会被添加到微任务队列中，等待当前宏任务执行结束后再执行。
如何避免微任务带来的性能问题？
虽然微任务可以提高程序的性能，但是过多的微任务也会导致性能问题。 如果微任务队列过长，那么执行微任务队列的时间就会变长，这会导致页面卡顿。
以下是一些避免微任务带来性能问题的建议：
避免在微任务中执行耗时操作： 微任务应该尽可能快地执行完成。 如果需要在微任务中执行耗时操作，可以考虑将这些操作放入宏任务中执行。
避免创建过多的微任务： 尽量减少微任务的数量。 可以通过合并多个微任务来减少微任务的数量。
使用 requestAnimationFrame： 如果需要在 DOM 更新后执行一些操作，可以考虑使用
requestAnimationFrame
。
requestAnimationFrame
会在浏览器准备更新页面渲染之前执行回调函数，这可以避免页面卡顿。
理解微任务和宏任务的区别，以及它们在事件循环中的执行顺序，对于编写高性能的 JavaScript 代码至关重要。 掌握这些知识，可以帮助你更好地理解异步编程，并编写出更加流畅、响应更快的 Web 应用。
以上就是什么是微任务？微任务的执行时机的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1516491.html
微信扫一扫 
支付宝扫一扫 
