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 中用于管理异步代码的执行顺序,它们之间的区别主要体现在调度时机、执行顺序和来源等方面。

相关推荐
-代号95278 分钟前
【JavaScript】十三、事件监听与事件类型
开发语言·javascript·ecmascript
uhakadotcom35 分钟前
AWS Lightsail 简介与实践
后端·面试·github
阳树阳树1 小时前
signal-新的状态管理模式
前端·javascript
程序员鱼皮2 小时前
2025最新 Java 面经:美团后端面试真实复盘,附答案模板,速速收藏!
java·后端·面试
uhakadotcom2 小时前
OpenAI 的 PaperBench:AI 研究复现基准测试工具
算法·面试·github
__不想说话__3 小时前
面试官问我React组件和state的关系,我指了指路口的红绿灯…
前端·javascript·react.js
顾林海3 小时前
深度解析ArrayList工作原理
android·java·面试
北京_宏哥3 小时前
🔥《爆肝整理》保姆级系列教程-玩转Charles抓包神器教程(15)-Charles如何配置反向代理
前端·面试·charles
雷渊3 小时前
spring-IoC容器启动流程源码分析
java·后端·面试
Process3 小时前
前端图片技术深度解析:格式选择、渲染原理与性能优化
前端·面试·性能优化