app门户网站长沙推广网络营销公司

app门户网站,长沙推广网络营销公司,备案网站制作,国外交易平台宏任务 / 微任务执行顺序#xff08;经典面试题详解#xff09;你关注的宏任务、微任务执行顺序是前端面试的核心考点#xff0c;尤其围绕 setTimeout、Promise.then、async/await 的执行逻辑#xff0c;我会从概念定义、执行机制到经典例题#xff0c;帮你彻底理清。一、…宏任务 / 微任务执行顺序经典面试题详解你关注的宏任务、微任务执行顺序是前端面试的核心考点尤其围绕setTimeout、Promise.then、async/await的执行逻辑我会从概念定义、执行机制到经典例题帮你彻底理清。一、先明确宏任务Macrotaskvs 微任务Microtask1. 宏任务Macrotask宏任务是浏览器 / Node.js 执行的大型异步任务单元每次执行一个宏任务执行完成后会先清空所有微任务再进入下一个宏任务。常见宏任务类型setTimeout、setInterval定时器异步任务setImmediateNode.js 环境requestAnimationFrame浏览器环境脚本整体代码script标签中的同步代码属于第一个宏任务I/O 操作文件读取、网络请求等异步操作2. 微任务Microtask微任务是优先级更高的小型异步任务会在当前宏任务执行完毕后、下一个宏任务执行前被批量清空按顺序执行所有微任务。常见微任务类型Promise.then()/Promise.catch()/Promise.finally()Promise 状态改变后的回调async/await中await后面的代码本质是 Promise.then 的语法糖属于微任务process.nextTickNode.js 环境优先级高于普通微任务MutationObserver浏览器环境监听 DOM 变化的回调二、核心执行机制事件循环 Event Loop 关键规则先执行当前宏任务中的同步代码按代码书写顺序依次执行同步代码执行过程中遇到异步任务会分别归类到「宏任务队列」或「微任务队列」当当前宏任务的同步代码执行完毕后立即清空微任务队列按微任务添加顺序依次执行所有微任务若微任务执行过程中产生新的微任务仍会加入当前微任务队列一并清空微任务队列清空后执行一次 UI 渲染浏览器环境/ 收尾操作Node.js 环境从宏任务队列中取出下一个优先级最高的宏任务执行重复步骤 1-4形成事件循环。一句话总结宏任务按队列排队执行每个宏任务执行后必先清空微任务队列再执行下一个宏任务微任务优先级 宏任务。三、关键知识点async/await 的执行逻辑async/await是 Promise 的语法糖其执行顺序需重点掌握async修饰的函数会返回一个 Promise 实例函数内部同步代码正常执行await关键字后面的表达式会先同步执行获取表达式结果await会暂停当前函数的执行将await后面的代码即 “后续逻辑”加入微任务队列而非同步执行当await后面的 Promise 状态变为fulfilled后微任务队列中的 “后续逻辑” 才会执行。示例验证async function testAsync() { console.log(1. await 前的同步代码); await Promise.resolve(await 结果); // await 后面的表达式同步执行 console.log(2. await 后的代码微任务); } console.log(0. 全局同步代码); testAsync(); console.log(3. 全局同步代码后续); // 执行结果顺序0 → 1 → 3 → 2 // 解析 // 1. 先执行全局同步代码输出 0 // 2. 调用 testAsync执行内部同步代码输出 1 // 3. 执行 await 后面的 Promise.resolve同步然后将 console.log(2...) 加入微任务队列 // 4. 退出 testAsync继续执行全局同步代码输出 3 // 5. 当前宏任务全局脚本同步代码执行完毕清空微任务队列输出 2。四、经典面试题解析覆盖 setTimeout/Promise/async/await面试题 1基础版setTimeout Promise.thenconsole.log(1. 全局同步代码); setTimeout(() { console.log(4. setTimeout 宏任务); }, 0); Promise.resolve() .then(() { console.log(3. Promise.then 微任务); }); console.log(2. 全局同步代码后续);执行结果顺序1. 全局同步代码 2. 全局同步代码后续 3. Promise.then 微任务 4. setTimeout 宏任务解析执行当前宏任务全局脚本的同步代码先输出 1再输出 2同步执行过程中setTimeout回调被加入「宏任务队列」Promise.resolve()立即变为 fulfilled 状态then回调被加入「微任务队列」全局同步代码执行完毕清空微任务队列输出 3微任务队列清空取出宏任务队列中的setTimeout回调执行输出 4。面试题 2进阶版setTimeout Promise async/awaitconsole.log(1. 全局同步代码); setTimeout(() { console.log(6. setTimeout 宏任务1); Promise.resolve().then(() { console.log(7. setTimeout 内部的微任务); }); }, 0); setTimeout(() { console.log(8. setTimeout 宏任务2); }, 0); async function asyncFunc() { console.log(2. async 内部同步代码); await Promise.resolve(); console.log(5. await 后的微任务); } asyncFunc(); Promise.resolve() .then(() { console.log(4. 全局 Promise 微任务); }); console.log(3. 全局同步代码后续);执行结果顺序1. 全局同步代码 2. async 内部同步代码 3. 全局同步代码后续 4. 全局 Promise 微任务 5. await 后的微任务 6. setTimeout 宏任务1 7. setTimeout 内部的微任务 8. setTimeout 宏任务2解析执行全局宏任务的同步代码输出 1调用asyncFunc执行内部同步代码输出 2await Promise.resolve()同步执行后将console.log(5...)加入微任务队列Promise.resolve().then(...)将console.log(4...)加入微任务队列输出 3全局同步代码执行完毕清空微任务队列按添加顺序执行先执行全局 Promise 的微任务输出 4再执行 async/await 的微任务输出 5微任务队列清空执行下一个宏任务第一个 setTimeout输出 6其内部的Promise.then回调加入微任务队列立即清空该微任务队列输出 7第一个 setTimeout 宏任务执行完毕执行下一个宏任务第二个 setTimeout输出 8。面试题 3高阶版含微任务嵌套 宏任务优先级console.log(1. 全局同步代码); async function async1() { await async2(); console.log(6. async1 await 后代码); } async function async2() { console.log(2. async2 同步代码); return Promise.resolve().then(() { console.log(4. async2 返回的 Promise 微任务); }); } async1(); Promise.resolve() .then(() { console.log(5. 全局 Promise 微任务); }); setTimeout(() { console.log(7. setTimeout 宏任务); Promise.resolve().then(() { console.log(8. setTimeout 内部微任务); }); }, 0); console.log(3. 全局同步代码后续);执行结果顺序1. 全局同步代码 2. async2 同步代码 3. 全局同步代码后续 4. async2 返回的 Promise 微任务 5. 全局 Promise 微任务 6. async1 await 后代码 7. setTimeout 宏任务 8. setTimeout 内部微任务解析执行全局同步代码输出 1 → 调用async1→ 执行await async2()先调用async2执行async2同步代码输出 2 →return Promise.resolve().then(...)该then回调加入微任务队列async2执行完毕await等待其返回的 Promise 完成将console.log(6...)加入微任务队列需等async2的 Promise 微任务执行完才会触发继续执行全局同步代码输出 3 → 全局Promise.then回调加入微任务队列全局同步代码执行完毕清空微任务队列先执行async2内部的 Promise 微任务输出 4再执行全局 Promise 微任务输出 5最后执行async1await 后的微任务输出 6微任务队列清空执行setTimeout宏任务输出 7 → 其内部 Promise 微任务立即执行输出 8。五、总结核心考点提炼队列优先级微任务队列 宏任务队列当前宏任务执行后必先清空微任务微任务包含Promise.then/catch/finally、async/await后续代码宏任务包含setTimeout/setInterval、全局脚本、I/O 操作async/await 关键await后面的表达式同步执行后续代码进入微任务队列执行流程口诀同步代码先执行 → 微任务队列全清空 → 宏任务队列取一个 → 重复循环。