JavaScript的同步任务，异步任务，宏任务和微任务

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

#javascript #前端 #html

本文深入探讨了浏览器中的多线程模型，重点讲解了JavaScript的单线程执行环境以及事件循环（Macrotask与Microtask）的工作原理。同时，解释了GUI渲染线程与JS引擎线程之间的互斥关系，以及事件触发线程如何协同处理任务队列。理解这些概念对于优化JavaScript性能和避免阻塞UI至关重要。

Macro task：setTimeout，setTimeInterval

Micro Task： promise ，process.nextTick

事件队列 

各种线程

浏览器是多线程的，js是单线程的，浏览器至少包含三个常驻线程：

js引擎线程：基于事件驱动单线程执行

GUI渲染线程：负责渲染浏览器界面。但是js引擎线程和GUI渲染线程是互斥的，当js引擎线程进行时，GUI渲染线程会暂停，直到js引擎线程结束才继续，这也就是js阻塞

事件触发线程：当事件被触发后，会把事件添加到任务队列的最尾端，等待js引擎处理执行
 

javascript 同步任务、异步任务，单线程、多线程，执行栈、任务队列、任务队列的维护，宏任务、微任务，事件循环。
Absurd_people的博客
08-30 1097
原文连接：https://blog.youkuaiyun.com/weixin_39788986/article/details/110130711 原文连接：https://blog.youkuaiyun.com/terrychinaz/article/details/112425039
JavaScript 中的异步任务、同步任务、宏任务与微任务
所行皆坦途
09-14 1846
本文深入讲解 JavaScript 事件循环，通过复杂代码示例及面试题，剖析同步、异步任务及宏微任务执行顺序。
js 同步任务，异步任务，宏任务，微任务
想飞上天和太阳肩并肩
01-06 821
js执行任务是单线程的，代码从上往下按顺序执行, 这就造成了如果前面任务很慢，那后面的任务就永远执行不了，为了解决这个问题，js中出现了同步任务和异步任务。 异步任务又分为宏任务和微任务 1. 宏任务 a. 定时器 b. 事件绑定 c. ajax d. 回调函数 e. Node中fs可以进行异步的I/O操作 2.微任务 a. Promise(async/await) promise 并不是完全的同步，在promise中是同步任务，执行resolve或者reject回调的时候，此时是异步操作，会先将then/
js单线程与事件循环，同步与异步，宏任务与微任务
darabiuz的博客
02-21 894
1.js是单线程的 单线程是什么 同一个事件只能做同一件事情，下一件事情需要等待上一件事执行完毕 为什么js是单线程？ js作为浏览器脚本语言，用途是与用户互动，假定JavaScript同时有两个线程，一个线程在某个DOM节点上添加内容，另一个线程删除了这个节点，这时浏览器应该以哪个线程为准？单线程可以避免复杂性 单线程带来的问题和局限性 js是单线程语言，浏览器只分配给js一个主线程，用来执行任务（函数），但一次只能执行一个任务，这些任务形成一个任务队列排队等候执行，但前端的某些任务是非常耗时的，比如网
终于完全弄懂了js的同步任务，异步任务，微任务和宏任务
dandan_zhang的博客
12-04 7696
首先一定要明确一点：JS 是单线程 单线程就意味着，所有任务需要排队，前一个任务结束，才会执行后一个任务。如果前一个任务耗时很长，后一个任务就不得不一直等着。 这样所导致的问题是： 如果 JS 执行的时间过长，这样就会造成页面的渲染不连贯，导致页面渲染加载阻塞的感觉。 同步任务和异步任务 单线程导致的问题就是后面的任务等待前面任务完成，如果前面任务很耗时（比如读取网络数据），后面任务不得不一直等待！！ 为了解决这个问题，利用多核 CPU 的计算能力，HTML5 提出 We...
js中的同步任务、异步任务、宏任务、微任务
LickDog的博客
08-30 846
宏任务和微任务的基础理解
javascript事件中同步,异步,宏任务,微任务 解析
2301_79439327的博客
06-29 1043
在Web开发中，同步方式可能类似于用户一直刷新网页直到购买成功；而异步方式则允许用户继续浏览其他网页或进行其他操作，同时等待购买成功的通知。同步和异步是处理任务时的两种不同方式，它们在概念、执行方式、适用场景等方面有明显的区别。
【JavaScript】JavaScript同步任务、异步任务（宏任务和微任务）
mengran_code的博客
10-09 660
Promise 是 JavaScript 中的一个定义，但是实际编写代码时，我们可以发现，它似乎并不比回调的方式书写更简单，但是从 ES6 开始，我们有了 async/await，这个语法改进跟 Promise 配合，能够有效地改善代码结构。我们可以看到，即使耗时一秒的 c1 执行完毕，再 enque 的 c2，仍然先于 d 执行了，这很好地解释了微任务优先的原理。任务队列的异步任务又分为宏任务与微任务，也就是说宏任务和微任务虽然都是异步任务，都在任务队列中，但是它们在不同的队列中。
JavaScript 异步编程：宏任务与微任务详解
cx18333的博客
11-08 1417
现代 Web 开发中，理解 JavaScript 的异步编程机制是至关重要的。本文详细解析了 JavaScript 单线程特性下的事件循环（Event Loop）工作原理，探讨了宏任务（macrotask）和微任务（microtask）的概念及其应用场景。通过一系列精心设计的代码示例，我们逐步揭示了不同类型的异步操作如何在事件循环中被调度和执行，帮助深入理解异步代码的执行顺序和背后的逻辑
JS同步任务、异步任务（宏任务和微任务）【JavaScript面试题 有详细代码例子说明！！】
qq_53002037的博客
02-18 978
JS同步任务、异步任务（宏任务和微任务）有详细的代码例子举例
js事件循环机制(event loop) 同步任务 异步任务 宏任务 微任务 任务队列与调用栈
qq_33546823的博客
09-29 1586
JavaScript 是单线程的，处理耗时任务时会阻塞程序执行。为解决这一问题，引入了异步任务机制。同步任务由 JavaScript 引擎直接处理，而异步任务则由宿主环境（如 Node.js、浏览器等多线程环境）执行。同步任务会立即加入执行栈并等待结果，而异步任务则在适当时机（例如定时器结束或点击事件发生时）被放入任务队列。当执行栈中的任务完成后，事件循环会检查任务队列中是否有待处理的任务，并将其逐一加入执行栈，循环往复，这便构成了事件循环机制。
js宏任务和微任务（异步和同步执行的顺序）探究
互联网编程爱好者
04-17 1346
js宏任务和微任务（异步和同步执行的顺序）探究 目录js宏任务和微任务（异步和同步执行的顺序）探究前言一、什么是宏任务和微任务二、图例解释三、示例代码总结附：js定时器（setTimeOut）真的守时吗？ 前言 js属于单线程，也就是说对于一段js代码片段，只会顺序依次执行，都是同步执行的。而实际使用过程中有些任务执行时间长，有些任务执行时间短，这会导致页面加载时间过长并且出现空白页面的现象，非常影响用户体验。为了解决这个问题产生了宏任务和微任务。 一、什么是宏任务和微任务 广义上来说 宏任务包
同步和异步的区别
weixin_40213018的博客
11-02 1038
所有任务可以分成两种，一种是同步任务（synchronous），另一种是异步任务（asynchronous）。 同步任务指的是，在主线程上排队执行的任务，只有前一个任务执行完毕，才能执行后一个任务； 异步任务指的是，不进入主线程、而进入"任务队列"（task queue）的任务，只有等主线程任务执行完毕，"任务队列"开始通知主线程，请求执行任务，该任务才会进入主线程执行。 具体来说，异步运行...
Vue开发工具使用技巧
2509_93946471的博客
11-24 232
打开DevTools的"Events"标签页，所有组件间传递的事件都会按时间顺序列出来，连事件负载数据都能展开看详情。更绝的是，你还能手动触发事件——比如在父组件里模拟一个事件，直接测试子组件的响应逻辑，省得反复修改代码来调试。如果组件用了作用域插槽，可以在"Scoped Slots"子面板里实时查看slot传递的数据内容，比在模板里写调试代码清爽得多。路由调试经常被忽略。热重载调试时，如果发现修改代码后页面没及时更新，可以到DevTools的"Settings"里勾选"Log reloads"选项。
【基础】EGG.js 框架内置基础对象
林见鹿鸣
11-24 700
在。
SSM企业物资管理系统h3109(程序+源码+数据库+调试部署+开发环境)带论文文档1万字以上，文末可获取，系统界面在最后面
2509_93102542的博客
11-21 762
在技术实现上，国外多采用成熟的开发框架和技术架构，注重系统的安全性、稳定性和可扩展性，同时积极融入大数据、人工智能等新技术，实现物资需求预测、智能库存优化等功能。基于此，开发一套基于SSM框架的企业物资管理系统，整合部门、员工、物资及各类业务流程管理功能，实现物资管理的数字化、规范化和高效化，成为解决企业物资管理痛点的必然需求。本课题旨在开发一套基于SSM框架的企业物资管理系统，围绕部门、员工、物资信息、物资申请、消息提醒、物资归还、物资入库、意见反馈八大核心功能模块，实现企业物资管理的全流程数字化。
Vue3的生命周期
分享学习网络的点点滴滴
11-21 110
Vue3生命周期详解：从创建到卸载的全过程 Vue3的生命周期分为四个主要阶段：创建、更新、卸载和错误处理。创建阶段包含setup()、onBeforeMount()和onMounted()；更新阶段有onBeforeUpdate()和onUpdated()；卸载阶段包括onBeforeUnmount()和onUnmounted()。setup()替代了Vue2的初始化阶段，是组合式API的入口。子组件的生命周期会先于父组件执行。错误处理可使用onErrorCaptured()捕获和阻止错误传播。这些钩子函
Vue网站
最新发布
2509_93947362的博客
11-24 130
给大家分享个实用技巧：组件通信时，简单的父子传参用props/$emit搞定，复杂场景就用Vuex，千万别为了省事滥用event bus，不然项目大了事件流会乱成麻花。以前写数据绑定总要搞一堆繁琐的DOM操作，现在一个双大括号{{data}}就能搞定，新手看了五分钟就能上手写页面。刚开始觉得小项目用Vuex太重量级，后来发现即便是最简单的购物车功能，随着业务复杂度的提升，最终还是得引入状态管理。特别是把相同业务逻辑抽离成composable函数后，在不同组件里直接引入就能用，代码复用率明显提升。
React社区
2509_93942966的博客
11-23 264
这种混乱中带着生命力的讨论，特别像早年中关村攒机市场——商家喊着不同配置的优劣，而真正懂行的玩家早就摸清了哪个方案最适合自己的项目。但有意思的是，无论工具链怎么变，React核心团队始终稳如老狗——他们宁可把并发特性在实验阶段晾三年，也不愿重蹈Angular断代升级的覆辙。组件库生态更是百花齐放。这种带着口音的技术交流，反而比标准教科书更能体现社区的活力。或许某天你写在Stack Overflow的答案，就会成为某个巴西程序员解决线上故障的关键——这种跨越时区的知识接力，才是技术社区最浪漫的部分。
前端同步和异步宏任务和微任务
06-07
在 JavaScript 引擎中，异步代码会被分为宏任务和微任务两种类型。其中，宏任务包括 setTimeout、setInterval、setImmediate、I/O 操作等，而微任务包括 Promise、process.nextTick 等。 在事件循环中，每次执行完...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

编程经验随笔

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值