JavaScript事件循环是协调同步与异步代码执行的核心调度机制,通过宏任务与微任务队列的优先级调度,实现单线程下的非阻塞响应,确保页面不卡顿。

JavaScript事件循环是协调同步与异步代码执行的核心调度机制。它让单线程的JS能在不卡住页面的前提下,有序处理定时器、网络请求、用户点击等异步任务。
事件循环解决的根本问题
JavaScript天生单线程,意味着同一时刻只能做一件事。如果所有操作都必须等前一个完成,一次3秒的API请求就会让整个页面冻结——按钮点不了、滚动卡住、动画停摆。事件循环通过“先干完手头事,再回头处理异步结果”的方式,把阻塞式等待变成非阻塞式响应。
- 同步代码(如
console.log、函数调用)直接进调用栈,立刻执行 - 异步操作(如
setTimeout、fetch、Promise)交由浏览器后台线程处理,不占主线程 - 结果就绪后,回调被分类放入宏任务队列或微任务队列,等调用栈空了再执行
宏任务和微任务的执行顺序很关键
不是所有异步任务“一视同仁”。事件循环每次只从宏任务队列取一个任务(比如setTimeout回调),但会在每个宏任务执行完毕后,清空当前所有的微任务(比如Promise.then、queueMicrotask)。这个优先级差异直接影响代码行为。
- 宏任务:整体脚本、
setTimeout、setInterval、I/O、UI渲染 - 微任务:
Promise链、MutationObserver、queueMicrotask - 典型输出顺序:
console.log('1')→console.log('4')→Promise.then→setTimeout回调
不理解事件循环容易踩的实际坑
很多看似“理所当然”的代码行为,其实背后全靠事件循环兜底。忽略它,轻则逻辑错乱,重则性能崩溃。
标签: vue react javascript java js 前端 node.js node 浏览器 工具 前端开发 栈 a
还木有评论哦,快来抢沙发吧~