说到前端面试Event Loop 事件循环绝对是必考重难点。很多小伙伴背了一堆理论宏任务、微任务倒背如流一遇到真实输出顺序题直接翻车。我当初面试也是这样死记概念没用只要换一道题型就乱序。其实浏览器事件循环根本不用死记只要吃透执行顺序底层机制所有面试题都是换汤不换药。今天我用一道经典高频面试题为切入点带大家一步步拆解执行流程彻底搞懂浏览器 Event Loop以后不管遇到多复杂的异步代码排序题都能一眼看出答案。一、先理清核心基础同步、微任务、宏任务很多人搞混执行顺序根源是没分清三类代码的优先级。浏览器执行JS有一套固定铁律优先级从高到低同步代码 微任务(MicroTask) 宏任务(MacroTask)给大家整理日常开发最常用的任务分类不用记冷门API面试够用微任务Promise.then/catch/finally、async/await 后续代码、queueMicrotask宏任务setTimeout、setInterval、DOM 事件、AJAX 请求这里重点提一句Promise 本身是同步执行的只有.then 回调属于微任务这是90%人踩坑的点。二、经典面试真题全网高频下面这段代码是前端面试出镜率最高的 Event Loop 考题大家可以先自己心里跑一遍顺序看看能不能答对console.log(同步代码 1); setTimeout(() { console.log(宏任务 setTimeout); }, 0); new Promise((resolve) { console.log(Promise 同步执行); resolve(); }).then(() { console.log(微任务 Promise.then); }); console.log(同步代码 2);很多新手的错误答案同步1 → setTimeout → Promise同步 → Promise微任务 → 同步2这个顺序完全错了下面我带大家逐行拆解真实执行流程看懂底层逻辑。三、逐行拆解真实执行流程第一步执行所有同步代码JS 自上而下执行先执行所有同步任务遇到异步任务先放入对应队列不执行。1、打印同步代码 1 2、遇到 setTimeout 宏任务丢进宏任务队列等待执行 3、new Promise 构造函数同步执行打印Promise 同步执行resolve 触发后.then 回调进入微任务队列 4、打印同步代码 2。此时主线程同步代码执行完毕主线程空闲准备清空任务队列。第二步优先清空所有微任务按照浏览器机制同步代码跑完后必须一次性清空全部微任务队列才会执行宏任务。执行 Promise.then打印微任务 Promise.then微任务队列清空。第三步执行宏任务队列微任务清空完毕才会执行排在队列里的 setTimeout打印宏任务 setTimeout。最终正确输出顺序同步代码1 → Promise同步执行 → 同步代码2 → Promise.then微任务 → setTimeout宏任务四、升级题型加入 async/await面试难点搞定基础题我们再来一个升级版题型加入现在必考的 async/await很多人在这里翻车console.log(start); async function asyncFn() { console.log(async 同步代码); await Promise.resolve(); console.log(async 微任务代码); } asyncFn(); setTimeout(() { console.log(setTimeout 宏任务); }, 0); console.log(end);核心知识点await 之前的代码同步执行await 之后的代码属于微任务。真实执行顺序 1、打印 start 2、调用 asyncFn同步打印 async 同步代码 3、await 触发后续代码入微任务队列 4、setTimeout 入宏任务队列 5、打印 end 6、清空微任务打印 async 微任务代码 7、最后执行宏任务打印 setTimeout 宏任务。五、总结 Event Loop 终极执行规则万能公式我把多年面试总结的万能规则分享给大家所有浏览器异步题直接套1、先跑所有同步代码异步全部入队等待 2、同步跑完优先清空整条微任务队列一个不留 3、微任务清空完毕再依次执行宏任务 4、每执行完一个宏任务都会再次检查微任务队列循环往复这就是事件循环。六、开发中为什么要学 Event Loop很多同学觉得这只是面试题工作用不到其实大错特错。平时页面卡顿、定时器不准、异步赋值拿不到数据、状态更新延迟本质都是不懂事件循环导致的。比如定时器设置0秒并不是立即执行而是等当前同步和微任务跑完才会执行。弄懂这套机制不仅面试稳过日常写异步逻辑、排查诡异bug都会事半功倍。写在最后Event Loop 看似抽象其实逻辑非常固定没有任何随机规则。不用死记硬背名词只要记住同步优先、微任务次之、宏任务最后的核心顺序多刷两道真题就能彻底吃透。前端面试的异步考题万变不离其宗掌握这一套执行机制以后再也不会在事件循环题目上丢分。 事件循环 Event Loop，一道面试题看懂浏览器执行机制
说到前端面试Event Loop 事件循环绝对是必考重难点。很多小伙伴背了一堆理论宏任务、微任务倒背如流一遇到真实输出顺序题直接翻车。我当初面试也是这样死记概念没用只要换一道题型就乱序。其实浏览器事件循环根本不用死记只要吃透执行顺序底层机制所有面试题都是换汤不换药。今天我用一道经典高频面试题为切入点带大家一步步拆解执行流程彻底搞懂浏览器 Event Loop以后不管遇到多复杂的异步代码排序题都能一眼看出答案。一、先理清核心基础同步、微任务、宏任务很多人搞混执行顺序根源是没分清三类代码的优先级。浏览器执行JS有一套固定铁律优先级从高到低同步代码 微任务(MicroTask) 宏任务(MacroTask)给大家整理日常开发最常用的任务分类不用记冷门API面试够用微任务Promise.then/catch/finally、async/await 后续代码、queueMicrotask宏任务setTimeout、setInterval、DOM 事件、AJAX 请求这里重点提一句Promise 本身是同步执行的只有.then 回调属于微任务这是90%人踩坑的点。二、经典面试真题全网高频下面这段代码是前端面试出镜率最高的 Event Loop 考题大家可以先自己心里跑一遍顺序看看能不能答对console.log(同步代码 1); setTimeout(() { console.log(宏任务 setTimeout); }, 0); new Promise((resolve) { console.log(Promise 同步执行); resolve(); }).then(() { console.log(微任务 Promise.then); }); console.log(同步代码 2);很多新手的错误答案同步1 → setTimeout → Promise同步 → Promise微任务 → 同步2这个顺序完全错了下面我带大家逐行拆解真实执行流程看懂底层逻辑。三、逐行拆解真实执行流程第一步执行所有同步代码JS 自上而下执行先执行所有同步任务遇到异步任务先放入对应队列不执行。1、打印同步代码 1 2、遇到 setTimeout 宏任务丢进宏任务队列等待执行 3、new Promise 构造函数同步执行打印Promise 同步执行resolve 触发后.then 回调进入微任务队列 4、打印同步代码 2。此时主线程同步代码执行完毕主线程空闲准备清空任务队列。第二步优先清空所有微任务按照浏览器机制同步代码跑完后必须一次性清空全部微任务队列才会执行宏任务。执行 Promise.then打印微任务 Promise.then微任务队列清空。第三步执行宏任务队列微任务清空完毕才会执行排在队列里的 setTimeout打印宏任务 setTimeout。最终正确输出顺序同步代码1 → Promise同步执行 → 同步代码2 → Promise.then微任务 → setTimeout宏任务四、升级题型加入 async/await面试难点搞定基础题我们再来一个升级版题型加入现在必考的 async/await很多人在这里翻车console.log(start); async function asyncFn() { console.log(async 同步代码); await Promise.resolve(); console.log(async 微任务代码); } asyncFn(); setTimeout(() { console.log(setTimeout 宏任务); }, 0); console.log(end);核心知识点await 之前的代码同步执行await 之后的代码属于微任务。真实执行顺序 1、打印 start 2、调用 asyncFn同步打印 async 同步代码 3、await 触发后续代码入微任务队列 4、setTimeout 入宏任务队列 5、打印 end 6、清空微任务打印 async 微任务代码 7、最后执行宏任务打印 setTimeout 宏任务。五、总结 Event Loop 终极执行规则万能公式我把多年面试总结的万能规则分享给大家所有浏览器异步题直接套1、先跑所有同步代码异步全部入队等待 2、同步跑完优先清空整条微任务队列一个不留 3、微任务清空完毕再依次执行宏任务 4、每执行完一个宏任务都会再次检查微任务队列循环往复这就是事件循环。六、开发中为什么要学 Event Loop很多同学觉得这只是面试题工作用不到其实大错特错。平时页面卡顿、定时器不准、异步赋值拿不到数据、状态更新延迟本质都是不懂事件循环导致的。比如定时器设置0秒并不是立即执行而是等当前同步和微任务跑完才会执行。弄懂这套机制不仅面试稳过日常写异步逻辑、排查诡异bug都会事半功倍。写在最后Event Loop 看似抽象其实逻辑非常固定没有任何随机规则。不用死记硬背名词只要记住同步优先、微任务次之、宏任务最后的核心顺序多刷两道真题就能彻底吃透。前端面试的异步考题万变不离其宗掌握这一套执行机制以后再也不会在事件循环题目上丢分。