JS中微任务和宏任务的区别

在 JavaScript 中,微任务(Microtask)和宏任务(Macrotask)是用来管理异步代码执行顺序的概念,它们之间有一些关键的区别:

  1. 宏任务(Macrotask)

    • 宏任务是由浏览器提供的任务源,常见的宏任务包括:script(整体代码)、setTimeout、setInterval、I/O、UI rendering 等。
    • 宏任务会进入到宏任务队列中,当执行栈为空时,事件循环会从宏任务队列中选择一个任务来执行。
    • 每个宏任务之间会存在一个时间间隔,也就是说,宏任务之间会互相等待,直到前一个宏任务执行完毕。
  2. 微任务(Microtask)

    • 微任务是在当前任务执行完毕后立即执行的任务,它可以看作是在当前任务的末尾添加的任务,以确保在下一个事件循环之前执行。
    • 常见的微任务包括:Promise 的 then 方法、MutationObserver 等。
    • 微任务会在当前任务执行结束后立即执行,而不需要等待下一个宏任务。

关键区别总结:

  • 调度时机不同:宏任务是在主线程上执行的任务,而微任务是在宏任务执行完毕之后立即执行的。
  • 执行顺序不同:微任务比宏任务优先级更高,当宏任务执行完毕后,会首先执行微任务队列中的任务,然后再执行下一个宏任务。
  • 来源不同:宏任务来自于浏览器提供的任务源,而微任务是由一些特定的API(比如 Promise)触发的。

举个例子:

javascript 复制代码
console.log('Start');

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

Promise.resolve().then(() => {
  console.log('Promise');
});

console.log('End');

以上代码中,主线程首先执行同步代码,输出 'Start' 和 'End'。然后,它遇到了一个宏任务 setTimeout 和一个微任务 Promise。根据事件循环的执行顺序,微任务优先级高于宏任务,所以微任务 Promise 首先执行,输出 'Promise'。接着,宏任务 setTimeout 执行,输出 'setTimeout'。

综上所述,微任务和宏任务在 JavaScript 中用于管理异步代码的执行顺序,它们之间的区别主要体现在调度时机、执行顺序和来源等方面。

相关推荐
拉不动的猪2 分钟前
前端自做埋点,我们应该要注意的几个问题
前端·javascript·面试
尤物程序猿16 分钟前
【2025面试Java常问八股之redis】zset数据结构的实现,跳表和B+树的对比
数据结构·redis·面试
烛阴37 分钟前
Node.js中必备的中间件大全:提升性能、安全与开发效率的秘密武器
javascript·后端·express
小杨升级打怪中39 分钟前
前端面经-JS篇(三)--事件、性能优化、防抖与节流
前端·javascript·xss
牛马baby1 小时前
Java高频面试之并发编程-07
java·开发语言·面试
鱼樱前端2 小时前
前端必知必会:JavaScript 对象与数组克隆的 7 种姿势,从浅入深一网打尽!
前端·javascript
yzhSWJ2 小时前
Spring Boot中自定义404异常处理问题学习笔记
java·javascript
DKPT3 小时前
常见正则表达式整理与Java使用正则表达式的例子
java·笔记·学习·面试·正则表达式