一、事件循环Event Loop核心机制1. 基础概念JavaScript 是单线程语言事件循环是其实现异步的核心机制。执行流程调用栈Call Stack同步代码按顺序入栈执行Web API / 宿主环境setTimeout、DOM事件、fetch等异步操作在这里等待任务队列Task Queue宏任务Macrotaskscript整体代码、setTimeout、setInterval、setImmediate、I/O、UI渲染微任务MicrotaskPromise.then/catch/finally、queueMicrotask、MutationObserver、process.nextTickNode2. 执行顺序黄金法则同步代码 → 所有微任务 → 一个宏任务 → 所有微任务 → 下一个宏任务...经典面试题输出console.log(1); setTimeout(() console.log(2), 0); Promise.resolve().then(() { console.log(3); Promise.resolve().then(() console.log(4)); }); console.log(5); // 输出顺序1 → 5 → 3 → 4 → 23. Node.js 事件循环与浏览器差异Node 事件循环分 6 个阶段timers → pending callbacks → idle/prepare → poll → check → close callbacks关键差异process.nextTick优先级高于 Promise同一阶段内的宏任务会批量执行完再清空微任务Node 11 已与浏览器行为趋同二、JS 异步演进史1. 回调函数Callback// 问题回调地狱Callback Hell getData(function(a) { getMoreData(a, function(b) { getMoreData(b, function(c) { // 嵌套过深难以维护 }); }); });缺点嵌套深、错误处理难、难以并行2. Promise// 三种状态pending → fulfilled / rejected状态不可逆 const promise new Promise((resolve, reject) { // 异步操作 setTimeout(() resolve(成功), 1000); }); promise .then(res console.log(res)) .catch(err console.error(err)) .finally(() console.log(总会执行));常用静态方法方法特点场景Promise.all全部成功才成功一个失败就失败并行请求缺一不可Promise.race谁快用谁超时控制Promise.allSettled等所有完成收集结果需要知道每个的结果Promise.any一个成功就成功全失败才失败容错降级3. Generator cofunction* gen() { const a yield fetch(/api/a); const b yield fetch(/api/b); return [a, b]; }async/await 的前身需要 co 库自执行4. async / awaitES2017终极方案async function fetchData() { try { const a await fetchA(); // 暂停等待 const b await fetchB(a); // 顺序执行 return b; } catch (err) { console.error(err); // 统一错误捕获 } }并行优化// ❌ 串行慢 const a await fetchA(); const b await fetchB(); // ✅ 并行快 const [a, b] await Promise.all([fetchA(), fetchB()]);三、React Native 中的异步场景1. 核心异步 APIsetTimeout / setInterval定时器fetch / axios网络请求AsyncStorage本地存储异步Animated动画驱动Bridge 通信JS ↔ Native 异步消息机制2. React Native 事件循环特点JS 线程独立有独立的 JS 事件循环不阻塞 UI 线程Bridge 异步JS 与 Native 通过 Bridge 异步通信批量处理requestAnimationFrame与屏幕刷新同步60fpssetImmediate / process.nextTickHermes 引擎下行为需注意3. 常见性能陷阱JS 线程阻塞长时间计算导致动画掉帧 → 用InteractionManager或拆分任务Bridge 拥堵频繁跨线程通信 → 批量发送、减少序列化内存泄漏组件卸载后未清除定时器/订阅 → useEffect 清理函数四、高频面试题Q1Promise.then 为什么是微任务微任务在当前宏任务结束后、下一个宏任务前执行保证尽快处理异步结果避免被其他宏任务插队提升响应性。Q2async 函数返回什么永远返回 Promise。非 Promise 值会被Promise.resolve()包装。Q3await 后面的代码是同步还是异步await 之前同步之后是微任务回调。await 会让出线程等待 Promise resolve 后后续代码进入微任务队列。Q4Promise 构造函数是同步还是异步同步执行。只有.then/.catch/.finally的回调是异步微任务。Q5如何取消 PromisePromise 本身不可取消可用AbortControllerfetch 原生支持封装可取消的 Promise加 flag 标记Promise.race配合超时 rejectQ6React Native 中为什么 setTimeout 不准JS 线程被占用时事件循环延迟执行Bridge 通信也可能引入延迟。高精度定时用requestAnimationFrame或 Native 模块。Q7宏任务微任务经典混合题async function async1() { console.log(async1 start); await async2(); console.log(async1 end); } async function async2() { console.log(async2); } console.log(script start); setTimeout(() console.log(setTimeout), 0); async1(); new Promise(resolve { console.log(promise1); resolve(); }).then(() console.log(promise2)); console.log(script end);答案script start → async1 start → async2 → promise1 → script end → async1 end → promise2 → setTimeout五、进阶考点1. 事件循环与渲染时机浏览器中微任务 → 渲染更新 → 宏任务每次宏任务后不一定渲染浏览器有自己的渲染节奏约 16.6ms微任务中修改 DOM 会合并到一次渲染2. 任务调度优先级process.nextTick Promise.then queueMicrotask setTimeout setImmediate3. 并发模型总结并行Parallelism多线程同时执行Web Worker / Native 多线程并发Concurrency单线程通过事件循环交替处理多个任务JS 是并发非并行单线程但宿主环境提供并行能力4. React Native Hermes 引擎开启 Hermes 后事件循环行为基本一致启动更快、内存占用更低注意某些非标准 API如process.nextTick行为可能有差异面试答题技巧回答事件循环问题时先讲同步代码全部执行完 → 清空微任务队列 → 取一个宏任务执行 → 再清空微任务这个核心循环再结合具体题目逐步推演确保条理清晰。