理解JavaScript中的微任务与宏任务_javascript事件循环

微任务在宏任务后立即执行且优先级高,如promise回调;宏任务包括setTimeout、I/O等。事件循环先执行同步代码,再处理微任务队列,最后进入下一宏任务。例如,console.log(‘1’)、Promise.then输出’3’、setTimeout输出’2’的顺序为1→4→3→2,因微任务在当前宏任务结束后立即执行。

理解JavaScript中的微任务与宏任务_javascript事件循环

JavaScript中,理解微任务(microtask)与宏任务(macrotask)是掌握事件循环(Event Loop)机制的关键。由于JavaScript是单线程语言,它通过事件循环来协调代码的执行顺序,尤其是在处理异步操作时。微任务和宏任务正是这个机制中的两个核心概念。

什么是宏任务和微任务?

JavaScript中的任务被分为两大类:宏任务和微任务。它们的主要区别在于执行时机和优先级。

宏任务包括:

  • 整体的script代码块
  • setTimeout回调
  • setInterval回调
  • I/O操作
  • ui渲染

微任务包括:

立即学习Java免费学习笔记(深入)”;

  • Promise.then/catch/finally回调
  • MutationObserver回调
  • queueMicrotask()
  • process.nextTick(node.js环境)

每次事件循环开始时,会先执行一个宏任务,完成后立即清空当前所有的微任务队列,然后再进入下一个宏任务。

事件循环的执行流程

事件循环的基本流程如下:

  1. 执行同步代码(属于初始宏任务)
  2. 遇到异步任务时,将其放入对应的宏任务或微任务队列
  3. 当前宏任务执行完毕后,检查微任务队列
  4. 执行所有当前可用的微任务(按入队顺序)
  5. 执行完所有微任务后,进行一次UI渲染(如果需要)
  6. 从宏任务队列中取出下一个任务,重复上述过程

关键点在于:每个宏任务执行完后,都会“清空”当前所有的微任务。

实际例子说明执行顺序

看下面这段代码:

理解JavaScript中的微任务与宏任务_javascript事件循环

腾讯小微

基于微信AI智能对话系统打造的智能语音助手解决方案

理解JavaScript中的微任务与宏任务_javascript事件循环26

查看详情 理解JavaScript中的微任务与宏任务_javascript事件循环

console.log(‘1’); setTimeout(() => { console.log(‘2’); }, 0); Promise.resolve().then(() => { console.log(‘3’); }); console.log(‘4’);

输出顺序是:1 → 4 → 3 → 2

解释:

  • ‘1’ 和 ‘4’ 是同步代码,直接输出
  • setTimeout 回调是宏任务,进入宏任务队列
  • Promise.then 是微任务,进入微任务队列
  • 当前宏任务(主脚本)执行完后,立即执行微任务(输出’3’)
  • 然后才轮到下一个宏任务 setTimeout(输出’2’)

微任务的高优先级特性

微任务的一个重要特点是:它们在每个宏任务之后立即执行,且具有高优先级。这意味着:

  • 即使在微任务中又添加了新的微任务,也会被继续执行,直到队列为空
  • 这可能导致“微任务饥饿”,即宏任务迟迟得不到执行
  • 因此避免在微任务中无限递归添加微任务

例如使用 queueMicrotask 的递归调用:

let count = 0; function recursiveMicrotask() { if (count

输出为:end → microtask 1 → microtask 2 → microtask 3

说明所有微任务都在下一个宏任务前完成。

基本上就这些。掌握微任务与宏任务的执行规则,能帮助你更好理解异步代码的实际运行顺序,避免在开发中出现意料之外的行为。不复杂但容易忽略。

以上就是理解JavaScript中的微任务与宏任务_

暂无评论

发送评论 编辑评论


				
上一篇
下一篇
text=ZqhQzanResources