宏任务与微任务

最新推荐文章于 2025-06-06 00:01:07 发布
最新推荐文章于 2025-06-06 00:01:07 发布
阅读量523 收藏
点赞数
文章标签： switch react react.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_58487208/article/details/121460571
版权
本文通过超现实的核桃比喻解释了JavaScript中的宏任务和微任务。宏任务如同核桃壳，包含着微任务，如核桃仁。宏任务包括script、setTimeout、setInterval等，由宿主发起；微任务如Promise、MutationObserver，由JS引擎发起，在每次宏任务执行完渲染前执行。理解这一执行机制对于优化JavaScript性能至关重要。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

可以用一个超现实的例子来形容:宏任务是一个核桃壳,那微任务就是这个核桃壳里的仁.为什么说这是超现实的例子呢?因为你吃完这些核桃仁可能会发现里面竟然还有一个或多个核桃,甚至循环往复.

常见的宏任务: 整个代码块(script), setTimeout, setInterval

为什么说这些是宏任务?因为它就像核桃壳一样,里面是必定有核桃仁(或者下一个核桃)的.

而微任务(也就是吃核桃仁)在什么时候执行呢?就是擦嘴巴(渲染)前执行.每个宏任务执行完后准备执行下一个宏任务前必定要渲染, 这个条理性是必然的, 就好像吃完东西必须擦嘴巴一样.

 相信看了上面的例子, 理解这张图已经是易如反掌.

如何区分宏任务与微任务?

宏任务是由宿主(Node,浏览器)发起的, 常见具体事件有:

1. script (可以理解为外层同步代码)
2. setTimeout/setInterval
3. UI rendering/UI事件
4. postMessage，MessageChannel
5. setImmediate，I/O（Node.js）

微任务是由js引擎发起的, 常见具体事件有:

1. Promise
2. MutaionObserver
3. Object.observe（已废弃；Proxy 对象替代）
4. process.nextTick（Node.js）

本文参考https://segmentfault.com/a/1190000020889508

感谢博主!

JavaScript 中的异步任务、同步任务、宏任务与微任务
所行皆坦途
09-14 1504
本文深入讲解 JavaScript 事件循环，通过复杂代码示例及面试题，剖析同步、异步任务及宏微任务执行顺序。
宏任务和微任务的详解
前端探险家的博客
06-10 5965
微任务可以在实时性和效率之间做一个有效的权衡。 从目前的情况来看，微任务已经被广泛地应用，基于微任务的技术有 MutationObserver、Promise 以及以 Promise 为基础开发出来的很多其他的技术。所以微任务的重要性也与日俱增，了解其底层的工作原理对于你读懂别人的代码，以及写出更高效、更具现代的代码有着决定性的作用。 有微任务，也就有宏任务，那这二者到底有什么区别？它们又是如何相互取长补短的？ 宏任务 前面我们已经介绍过了，页面中的大部分任务都是在主线程上执行的，这些任务包括了： 渲染
JavaScript关于宏任务与微任务
YanHSama的博客
08-13 1378
js事件循环、宏任务和微任务理解
宏任务与微任务面试题
江理彭于晏的博客
09-03 3514
宏任务与微任务面试题 对于宏任务与微任务的执行顺序问题一直都是前端面试一到过不去的坎，这东西多看是没用的，多做就是了，刷了10来到面试题，立马顿悟。 1 async function async1 () { console.log('async1 start'); await async2(); console.log('async1 end') console.log('async1 end 2') } async functi
宏任务与微任务的理解
weixin_47981807的博客
01-15 8572
宏任务与微任务的理解 宏任务一般是：包括整体代码script、settimeout、setInterval、i/o、ui render 微任务：promise、object.observe、MutationObserver 两者的区别 宏任务 宏任务所处的队列就是宏任务队列 宏任务队列可以有多个 当宏任务队列中的任务全部执行完以后就会查看是否有微任务队列 如果有就先执行微任务队列中的所有任务，如果没有就查看是否有宏任务队列 微任务 微任务所处的队列就是微任务队列 只有一个微任务队列 在上一个宏任.
js宏任务与微任务详解
DZQ1223的博客
06-15 1052
（1）js是单线程的，但是分同步异步（2）微任务和宏任务皆为异步任务，它们都属于一个队列（3）宏任务一般是：script、setTimeout、setInterval、postMessage、MessageChannel、setImmediate(Node.js 环境)（4）微任务：Promise.then、Object.observe、MutationObserver、process.nextTick(Node.js 环境)
JS事件循环、宏任务与微任务
为技术而生
04-29 1168
为了更好地理解JavaScript的执行模型，我们需要深入探讨事件循环、宏任务（MacroTask）和微任务（MicroTask）之间的关系和运作方式。宏任务在每个事件循环开始时被执行，而微任务则在执行完一个宏任务后立即执行。：执行宏任务的过程中，如果遇到异步任务（如setTimeout、Promise等），这些任务会被放入对应的队列中等待执行。：执行完一个宏任务后，事件循环会回到第1步，继续检查微任务队列并执行微任务。：执行完微任务后，事件循环会取出宏任务队列中的一个宏任务来执行。
JavaScript 事件循环、宏任务与微任务详解与进阶解析
我是 二川兄，对Web开发、GIS开发、3D模型、机器学习、面试技巧等方面都有一些涉猎~ 欢迎您加入技术交流圈！你可以在我的文章末尾找到我~
05-12 2303
JavaScript 的单线程特性决定了其异步编程模型的核心——事件循环（Event Loop）。理解事件循环、宏任务（MacroTask）和微任务（MicroTask）的机制，是掌握前端异步编程的关键。事件循环通过将异步任务放入任务队列，避免主线程阻塞，实现“非阻塞”效果。宏任务由宿主环境提供，如 setTimeout 和 I/O 操作，而微任务在当前宏任务执行完毕后执行，如 Promise.then 和 MutationObserver。执行顺序为同步代码 → 微任务 → 渲染 → 宏任务。合理使用异步
探究宏任务与微任务
weixin_42447364的博客
07-14 387
宏任务 微任务 执行顺序
宏任务与微任务：深入理解 JavaScript 的异步任务机制
梦想成为公务员
02-06 1176
宏任务和微任务是 JavaScript 异步编程的核心概念，理解它们的区别和执行顺序对于编写高效的异步代码至关重要。
JavaScript 任务队列详解：Event Loop、宏任务与微任务
一萧烟雨任平生
02-17 1435
Event Loop 执行顺序执行同步代码（主线程上的任务）。执行所有微任务（Microtask Queue）。执行一个宏任务（Macrotask Queue）。回到步骤 2，执行所有新的微任务。继续执行宏任务队列中的下一个任务。优先级对比微任务 > 宏任务（微任务会在每个宏任务前全部执行完）。多个微任务会按照添加顺序执行。多个宏任务也是按照添加顺序执行。掌握事件循环（Event Loop）
【ajax核心05】宏任务与微任务
大前端开发工程师、互联网方向创业者
06-23 855
宏任务与微任务分类、JS代码的执行流程、对应的经典面试题案例整理
12分钟讲解主流React库
techdashen的博客
06-02 785
你可以使用它搭建漂亮且实用的 UI 组件，这些组件使用 Tailwind CSS 样式，并基于 Radix UI 构建，因此高度可自定义。它的工作原理是：首次加载页面时，先显示本地缓存的数据（即使有点旧），确保加载迅速，同时请求服务器上的新数据，一旦新数据返回，就更新缓存并重新渲染页面，整个过程用户无感。你可以用它进行分页和无限滚动，通过处理数据的获取和重新获取。（由蚂蚁集团开发）是一个企业级 React UI 组件库，包含按钮、日历、树形结构、图表等组件，支持 50 多种语言，是构建企业应用的理想选择。
React---day9
2403_88913721的博客
06-05 408
今天主要学习了react里面的style写法中的styled-components、axios封装、react-transition-group中的CSSTransition，我发现我用的19一般都会有很大的问题，版本不兼容之类的，都要把19的版本修改为18，好头疼！！！
React Hooks 基础指南
越陌度阡
06-05 311
摘要：本文介绍了React 16.8引入的6个常用Hooks：1.useState用于函数组件状态管理；2.useEffect处理副作用操作；3.useContext简化上下文访问；4.useReducer管理复杂状态逻辑；5.useRef访问DOM或存储可变值；6.useMemo/useCallback优化性能。这些Hook使函数组件能够使用React特性，提供更简洁的开发方式。掌握这些基础Hook是高效开发React应用的关键。
React hook之userReducer
qq_39460057的博客
06-05 241
是一个用于管理复杂状态逻辑的 Hook，它类似于 Redux 中的 reducer 模式，但更轻量且适用于组件内部或结合 Context API 实现全局状态管理。如果逻辑复杂，可以按功能拆分成多个 reducer，再用。外处理异步逻辑（如 API 请求），完成后调用。尽量扁平化状态结构，便于更新。在 React 中，
React 样式方案与状态方案初探
最新发布
越陌度阡
06-06 308
本文介绍了React应用开发中主流的样式和状态管理方案。样式方面包括内联样式、CSS模块、Styled Components、Emotion和TailwindCSS，分别适用于不同复杂度的样式需求。状态管理方面涵盖React内置的useState/useReducer和Context API，以及Redux、MobX等第三方库，可根据应用规模选择合适方案。这些技术组合为开发者提供了灵活的选择空间，需要根据项目特性和团队偏好进行权衡。
什么是宏任务与微任务
05-30
### 宏任务与微任务的概念及区别 在 JavaScript 中，宏任务（Macrotask）和微任务（Microtask）是事件循环（Event Loop）机制中的两个核心概念。它们的定义、执行顺序以及应用场景存在显著差异。 #### 宏任务 宏...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值