js异步之宏任务（marcroTask）和微任务（microTask）

最新推荐文章于 2025-11-30 09:20:25 发布
原创 最新推荐文章于 2025-11-30 09:20:25 发布 · 108 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#javascript #html #html5

本文深入剖析JavaScript中的宏任务（如setTimeout、setInterval和DOM事件）与微任务（如Promise和async/await），讲解它们的执行顺序、区别以及在解决同步异步问题中的作用。了解event loop机制，有助于提升对单线程环境下高效编程的理解。

什么是宏任务和微任务

宏任务包括：setTimeout setInterval Ajax DOM事件
微任务：Promise async/await
微任务比宏任务的执行时间要早

 

异步和单线程是相辅相成的，js是一门单线程脚本语言，所以需要异步来辅助

异步和同步的区别:

  • 异步不会阻塞程序的执行，
  • 同步会阻塞程序的执行，

前端使用异步的场景：

  1. 定时任务：setTimeout，setInverval
  2. 网络请求：ajax请求，动态<img>加载
  3. 事件绑定

 

同步异步问题
首先，你要知道javascript是单线程语言。js任务需要排队顺序执行，如果一个任务耗时过长，后边一个任务也的等着，但是，假如我们需要浏览新闻，但新闻包含的超清图片加载很慢，总不能网页一直卡着直到图片完全出来，所以将任务设计成了两类：

同步任务
异步任务
 

任务列队和event loop（事件循环） 

 单线程就意味着，所有的任务都要排队，前一个结束，才会执行后面的任务。如果列队是因为计算量大，CPU忙不过来，倒也算了。但是更多的时候，CPU是闲置的，因为IO设备处理得很慢，例如
ajax读取网络数据。js设计者便想到，主线程完全可以不管IO设备，将其挂起，然后执行后面的任务。等后面的任务结束掉，在反过头来处理挂起的任务。
 

只要主线程空了，就会读取任务列队，这就是js的运行机制，也被称为 event loop（事件循环） 

三、执行顺序 

1.主线程上宏任务、微任务执行顺序 

2.宏任务中包含微任务 

xingyunwei1
关注
一分钟理解JavaScript宏任务和微任务
weixin_44739881的博客
10-17 1458
JavaScript是单线程的。所以有了同步异步的概念，想必不用说了，异步如常见的setTimeout、Promise。这两个东西却有本质上的区别。setTimeout是宏任务，Promise是微任务。 同为宏任务的有setInterval等，同为微任务的有Node的process.nextTick等。见下图。相比于宏任务，微任务的开销会小一点。 JS代码执行的顺序是，按着主线程执行代码，当遇到一...
【js异步之宏任务（marcroTask）和微任务（microTask）】
Lnbd_的博客
02-28 470
js异步之宏任务（marcroTask）和微任务（microTask）
ajax宏任务,js异步之宏任务（marcroTask）和微任务（microTask）
weixin_31460419的博客
08-05 404
先看一到面试题写出console.log的输出顺序console.log(100);setTimeout(()=>{console.log(200);})setTimeout(()=>{console.log(201);})Promise.resolve().then(()=>{console.log(300);})console.log(400);// 100 400 300 ...
js异步之宏任务（marcroTask）和微任务（microTask）、同步和异步
亚洲的博客
01-20 556
什么是宏任务和微任务 宏任务包括：setTimeout setInterval Ajax DOM事件 微任务：Promise async/await 微任务比宏任务的执行时间要早 异步和单线程 异步和单线程是相辅相成的，js是一门单线程脚本语言，所以需要异步来辅助 异步和同步的区别： 异步不会阻塞程序的执行 同步会阻塞程序的执行 前端使用异步的场景 定时任务：setTimeout，setInverval 网络请求：ajax请求，动态<img>标签 事件绑定 异步阻塞事例 //aja
js的异步与宏任务(marcroTask)和微任务(microTask)
好好学习，天天向上！
01-19 182
咱们先看道面试题 让写出console.log的打印顺序 console.log(100); setTimeout(()=>{ console.log(200); }) setTimeout(()=>{ console.log(201); }) Promise.resolve().then(()=>{ console.log(300); }) console.log(400); // 100 400 300 200 201 // 为什么300比200先打印
经久不衰的话题:Js的宏任务(marcroTask)和微任务(microTask)
qq_37021136的博客
04-02 1348
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档 文章目录前言一、什么是宏任务和微任务?1. 宏任务2. 微任务 前言 最近工作量比较少,闲暇时间看相关技术博客,一篇关于JS语言设计跟任务机制的博客读起来让我受益匪浅。温故而知新，决定本月博客主题为宏任务(marcroTask)和微任务(microTask) 一、什么是宏任务和微任务? 首先让我们看一下JS的编译模式相关解释: 注意其中的一句话如果一条运行不了,那么下面的语言也无法运行,显而易见说明JS为单线程语言 但是随着计算机性.
js垃圾回收和内存泄露、js异步之宏任务和微任务
lnnb123456的博客
09-16 225
js垃圾回收 标记清除 js中最常用的垃圾回收方式就是标记清除。当变量进入环境时，例如，在函数中声明一个变量，就将这个变量标记为“进入环境”。从逻辑上讲，永远不能释放进入环境的变量所占用的内存，因为只要执行流进入相应的环境，就可能会用到它们。而当变量离开环境时，则将其标记为“离开环境”。 引用计数 引用计数的含义是跟踪记录每个值被引用的次数。当声明了一个变量并将一个引用类型值赋给该变量时，则这个值的引用是次数就1。如果同一个值又被赋给另一个变量，则该值的引用次数加 ...
js事件循环机制(event loop) 同步任务 异步任务 宏任务 微任务 任务队列与调用栈
qq_33546823的博客
09-29 1592
JavaScript 是单线程的，处理耗时任务时会阻塞程序执行。为解决这一问题，引入了异步任务机制。同步任务由 JavaScript 引擎直接处理，而异步任务则由宿主环境（如 Node.js、浏览器等多线程环境）执行。同步任务会立即加入执行栈并等待结果，而异步任务则在适当时机（例如定时器结束或点击事件发生时）被放入任务队列。当执行栈中的任务完成后，事件循环会检查任务队列中是否有待处理的任务，并将其逐一加入执行栈，循环往复，这便构成了事件循环机制。
JavaScript宏任务(macrotask)和 微任务(microtask) 执行顺序
热门推荐
^_^
06-14 1万+
一、JavaScript单线程 JavaScript是单线程指的是同一时间只能干一件事情，只有前面的事情执行完，才能执行后面的事情。导致遇到耗时的任务时后面的代码无法执行。 在此之前啊 我们必须了解同步和异步 1. 同步任务（synchronous） console.log(123); console.log(456); for (let i = 1; i <= 5; i++) { console.log(i); } 顾名思义 得到的一定是..
浅析前端JS的同步和异步任务(宏任务+微任务)+具体宏微任务对应操作+经典面试输出题
m0_56986233的博客
03-01 1952
浅析前端JS的同步和异步任务(宏任务+微任务)+具体宏微任务对应操作+经典面试输出题
前端在移动端中的页面切换
2509_93939582的博客
11-28 467
记得加硬件加速，用transform和opacity属性，别动不动改布局属性（比如width或height），那样容易引发重排重绘，卡成幻灯片。不过，SPA也不是万能药，它初次加载可能慢点，得靠代码分割和懒加载来优化——比如把不常用的模块拆开，等用户需要时再加载，这样既省资源又提速。还有，别忘了图片和视频的懒加载：页面切换时，先加载核心内容，图片等可视区域再加载，这样首屏能秒开。另外，内存管理也得注意，SPA容易内存泄漏，切换页面时记得清理事件监听器和定时器，不然用久了手机会变卡。
Electron 与 OpenHarmony 的实战入门：手把手打造一个安全的简易记事本应用
已掌握java全栈，简单的java项目逻辑。目前正在学习鸿蒙开发，有兴趣的小伙伴可以一起学习！！！
11-27 915
这个“简易记事本”虽只有几十行代码，却完整体现了 现代桌面应用的安全架构思想。它不仅是 Electron 的最佳入门实践，更是通往 OpenHarmony 全场景开发的桥梁。
Rust在Web中的前端框架
2509_93947499的博客
11-26 357
Yew用了虚拟DOM来优化渲染，组件状态管理也简单，举个例子，你写个计数器组件，代码结构清晰，还能用Rust的强类型系统避免运行时错误。Seed不用虚拟DOM，直接操作DOM，性能可能更好，但代码写起来得小心点，别把浏览器搞崩了。想想看，用户点个按钮，背后可能触发一堆异步操作，要是用JavaScript，一不小心就内存泄漏或者变量污染，调试起来头大。另外，Rust的性能接近C++，编译成WASM后，在浏览器里执行效率高，能处理复杂计算或者图形渲染，比如游戏或者数据可视化应用，加载速度嗖嗖的。
vue3 md文件预览和下载
zzzz121380的博客
11-26 388
本文介绍了两种在Vue3中预览Markdown文件的方法：使用md-editor-v3插件和@kangc/v-md-editor@next插件，并提供了MD内容下载为MD和PDF文件的实现方案。md-editor-v3方法简单易用，@kangc/v-md-editor支持更多主题选项。MD文件下载可通过Blob对象或downloadjs实现，PDF转换则利用html2pdf.js库将预览内容转为PDF。文章还指出markdown-it插件在表格样式上的不足，不推荐使用。两种方法都提供了完整的代码示例，包括依
js考古之seajs.use、layui.use是啥 以及来源？
weixin_52236586的博客
11-29 406
Seajs是先行者，在浏览器原生不支持模块化的黑暗年代，发明了 seajs.use 来实现按需加载。Layui是实用主义者，它借用了这种模块化思想，用 layui.use 把 UI 组件管理得井井有条，成为了 jQuery 时代的绝唱。是终结者，它作为官方标准，吸收了前辈们的经验，配合现代打包工具，提供了最强悍的性能和开发体验。当你下次再看到 seajs.use 或 layui.use 时，请对它们保持敬意。因为正是这些“老古董”，为今天现代前端的摩天大楼，铺下了第一块基石。
前端路由管理
2509_93941777的博客
11-28 374
这种机制在单页应用（SPA）中特别常见，比如Vue.js或React项目里，用户点击链接时，URL会变，但页面不会整体刷新。这样一来，应用可以更流畅，减少等待时间。记得有一次，我在一个电商项目里用Vue Router做商品详情页的路由，通过动态路由参数传递商品ID，配合axios异步加载数据，页面切换又快又顺。通过动态import()语法，可以把路由组件拆分成独立的chunk，用户访问时才加载，大大提升首屏速度。还有404页面的处理，最好设置一个通配符路由，捕获所有未匹配的路径，避免用户看到空白页。
养老保险|智慧养老|基于springboot+vue养老保险系统设计与实现(源码+数据库+文档)
最新发布
伟庭的博客
11-30 524
【摘要】本文介绍了一个基于SpringBoot+Vue的智慧社区养老系统开发项目。针对传统社区养老管理效率低下的问题，系统实现了公告管理、健康档案、养老政策等核心功能模块。采用Java技术栈开发，包含项目管理、养老政策管理、公告管理等后台管理界面，并展示了实体ER图与核心代码片段。系统旨在提升社区养老服务的信息化水平，为老年人提供便捷的健康管理服务。项目适合作为计算机专业毕业设计选题，文末提供了源码获取方式。
js 宏任务和微任务
10-15
宏任务和微任务是 JavaScript 异步执行机制的核心组成部分，它们的调度顺序直接影响代码的执行结果和性能优化[^1]。 ### 事件循环机制 事件循环通过将异步任务放入任务队列，避免主线程阻塞，实现“非阻塞”效果。其核心机制如下： - 执行栈（Call Stack）：同步代码按顺序执行，形成调用栈。 - 任务队列（Task Queue）：异步任务完成后，回调函数进入任务队列。 - 事件循环：主线程执行栈清空后，从任务队列中取出任务执行[^3]。 ### 宏任务（MacroTask） - **定义**：由宿主环境（浏览器/Node.js）提供的异步任务，每次执行一个宏任务。 - **常见宏任务**： - `setTimeout` / `setInterval` - I/O 操作（如文件读写） - UI 渲染 - 事件监听（如 click） - `setImmediate`（Node.js 特有） - `script`（整体代码）[^3] ### 微任务（MicroTask） - **定义**：在当前宏任务执行完毕后、下一个宏任务执行前执行的异步任务。 - **常见微任务**： - `Promise.then` / `catch` / `finally` - `MutationObserver`（监听 DOM 变化） - `queueMicrotask`（现代浏览器原生 API） - `process.nextTick`（Node.js 特有，优先级最高）[^3] ### 执行顺序规则 1. 执行同步代码（宏任务）。 2. 执行所有微任务。 3. 渲染页面（浏览器环境）。 4. 执行下一个宏任务。 5. 重复上述步骤[^3]。 ### 案例解析 ```javascript console.log("Start"); setTimeout(() => { console.log("setTimeout"); }, 0); Promise.resolve().then(() => { console.log("Promise 1"); }).then(() => { console.log("Promise 2"); }); console.log("End"); ``` 上述代码执行过程如下： 1. 执行同步代码，输出 `Start` 和 `End`。 2. `setTimeout` 是宏任务，放入宏任务队列。 3. `Promise.resolve().then` 是微任务，放入微任务队列。 4. 同步代码执行完毕，执行微任务队列中的任务，输出 `Promise 1` 和 `Promise 2`。 5. 微任务队列清空后，执行下一个宏任务，输出 `setTimeout`。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值