免费的软件网站建设,网站建设定义,有什么推广产品的渠道,唐山有制作网站的没#x1f525; 彻底搞懂 Event Loop#xff1a;宏任务与微任务的执行顺序全解析#x1f914; 开篇思考#xff1a;JS 单线程#xff0c;如何实现并发处理#xff1f; JavaScript 是单线程语言#xff0c;却能同时处理点击、网络请求、定时器等多种异步操作。… 彻底搞懂 Event Loop宏任务与微任务的执行顺序全解析 开篇思考JS 单线程如何实现并发处理JavaScript 是单线程语言却能同时处理点击、网络请求、定时器等多种异步操作。这背后的核心机制就是Event Loop事件循环作为前端开发的基石Event Loop 不仅是理解异步编程的关键更是排查复杂异步问题的利器。今天用「工厂干活」的通俗比喻带你 10 分钟彻底搞懂还能轻松判断任意异步任务的归属 建立认知JS 是只有 1 个工人的工厂要理解 Event Loop先记住一个核心前提JS 是单线程的。你可以把 JS 引擎想象成一个「只有 1 个工人的工厂」工人一次只能干 1 件事单线程特性「简单活」计算 11、定义变量、循环同步任务—— 工人立刻干完「耗时活」等网络请求、等定时器、等用户点击异步任务—— 工人不能傻等否则工厂卡死而Event Loop就是这个工厂的「调度规则」让工人先干完所有简单活再回头处理那些等完了的耗时活从而实现看似同时处理多个任务的效果。 Event Loop 核心流程3 步口诀记死事件循环的执行顺序本质是「同步→微任务→宏任务」的循环记住这个口诀同步先干完 → 微任务清完 → 宏任务挨个干详细拆解工厂干活版第一步清空同步任务工人先把工作台主线程上的所有同步任务干完遇到异步任务就分类丢进对应的等待队列第二步清空微任务队列同步任务干完后工人立刻去处理「微任务队列」不管队列里有多少任务全部干完哪怕执行中新增了微任务也继续干第三步处理 1 个宏任务微任务队列清空后工人从「宏任务队列」里取最前面的 1 个任务执行循环往复回到第二步继续处理微任务→宏任务直到所有任务结束 关键宏任务 vs 微任务怎么判断很多人卡在这里遇到一个异步操作到底是宏任务还是微任务教你「清单 特征」双重判断法再也不混淆一、核心清单必背高频 API 分类任务类型常见 API / 场景特征总结微任务1.Promise.then/catch/finally2.async/awaitawait 后代码3.queueMicrotask()4.MutationObserverDOM 监听回调JS 引擎内部处理耗时极短和 Promise 强相关宏任务1. 定时器setTimeout/setInterval2. DOM 事件click/scroll/resize3. 网络请求fetch/ajax回调4. 文件操作Node.jsfs.readFile5.script标签整体代码6.requestAnimationFrame特殊渲染任务需等外部触发浏览器 / 操作系统耗时较长二、快速判断特征记不住清单时用微任务只要和「Promise」沾边基本都是除了 Promise 本身执行是同步的只有.then/.catch/.finally是异步微任务宏任务需要等一等的操作等时间、等用户、等数据口诀“定时、事件、网络、I/O都是宏任务跑” 实战案例代码执行顺序秒杀光说不练假把式看下面的代码你能说出输出顺序吗console.log(1. 同步任务开始);// 宏任务定时器setTimeout((){console.log(4. 宏任务-定时器);Promise.resolve().then(()console.log(5. 宏任务里的微任务));},0);// 微任务Promise.thenPromise.resolve().then((){console.log(3. 微任务-Promise.then);queueMicrotask(()console.log(3.1 新增微任务));});// 同步任务console.log(2. 同步任务结束);执行顺序解析先执行同步任务打印1. 同步任务开始→2. 同步任务结束同步任务清空执行所有微任务打印3. 微任务-Promise.then新增微任务3.1 新增微任务到队列尾部继续执行打印3.1 新增微任务微任务队列清空处理 1 个宏任务执行定时器回调打印4. 宏任务-定时器执行该宏任务里的微任务打印5. 宏任务里的微任务最终输出顺序1. 同步任务开始 2. 同步任务结束 3. 微任务-Promise.then 3.1 新增微任务 4. 宏任务-定时器 5. 宏任务里的微任务⚠️ 避坑指南3 个高频误区误区 1Promise 本身是同步的只有.then/.catch/.finally是微任务Promise 内部的代码会立刻执行newPromise((resolve){console.log(同步代码);// 立刻打印同步resolve();}).then(()console.log(微任务));// 微任务后执行误区 2微任务队列会彻底清空执行微任务时如果新增了新的微任务会继续执行直到队列空了才会碰宏任务不会插队按先进先出顺序误区 3requestAnimationFrame 是宏任务不是它属于「渲染阶段任务」执行时机在微任务之后、宏任务之前console.log(同步);Promise.resolve().then(()console.log(微任务));requestAnimationFrame(()console.log(渲染任务));setTimeout(()console.log(宏任务),0);// 输出同步 → 微任务 → 渲染任务 → 宏任务 总结核心要点说明单线程前提Event Loop 的存在是为了避免异步操作阻塞主线程执行顺序同步 → 微任务全部清空→ 宏任务逐个执行微任务判断Promise/await/queueMicrotask 优先归为微任务宏任务判断定时、事件、网络、I/O 都是宏任务