事件循环是什么？JS代码执行原理详解

哈喽！今天心血来潮给大家带来了《事件循环是什么？JS如何执行代码》，想必大家应该对文章都不陌生吧，那么阅读本文就都不会很困难，以下内容主要涉及到，若是你正在学习文章，千万别错过这篇文章~希望能帮助到你！

JavaScript是单线程语言，依靠事件循环协调同步与异步任务：先执行一个宏任务，再清空全部微任务，最后可能渲染UI并取下一个宏任务；如代码输出顺序为1→2→4→3。

JavaScript 是单线程语言，靠事件循环（Event Loop）协调同步任务和异步任务的执行顺序，让代码既不阻塞又能响应异步操作。

调用栈与执行上下文

JS 代码运行时，函数调用会形成调用栈（Call Stack）。每进入一个函数，就压入一个执行上下文；函数返回，就弹出。这是同步代码的执行基础。

• 全局代码先入栈，执行完后清空
• 函数调用会新建执行上下文并压栈
• 栈溢出（如无限递归）会导致 "Maximum call stack size exceeded"

任务队列：宏任务与微任务

异步操作不会立刻执行，而是被分发到不同队列：宏任务队列（Macrotask Queue）和微任务队列（Microtask Queue）。

• 宏任务包括：setTimeout、setInterval、I/O、UI 渲染
• 微任务包括：Promise.then/catch/finally、queueMicrotask、MutationObserver
• 每次事件循环，先执行一个宏任务，再清空全部当前微任务队列

事件循环运行流程

浏览器或 Node.js 的事件循环持续运行，按固定节奏协调任务：

• 执行一个宏任务（如 script 全局代码、setTimeout 回调）
• 执行过程中遇到 Promise，.then 被加入微任务队列
• 宏任务执行完，立即执行所有已排队的微任务（逐个执行，期间新微任务也插入队尾）
• 微任务清空后，可能触发 UI 渲染（浏览器环境）
• 从宏任务队列取下一个任务，重复上述过程

一个典型例子帮你理解顺序

下面代码输出顺序是：1 → 2 → 4 → 3

console.log(1);
setTimeout(() => console.log(2), 0);
Promise.resolve().then(() => console.log(3));
console.log(4);

• 1 和 4 是同步代码，立刻输出
• setTimeout 回调进宏任务队列（下一轮）
• Promise.then 进微任务队列（本轮宏任务结束后立即执行）
• 所以 3 在 2 之前输出

到这里，我们也就讲完了《事件循环是什么？JS代码执行原理详解》的内容了。个人认为，基础知识的学习和巩固，是为了更好的将其运用到项目中，欢迎关注golang学习网公众号，带你了解更多关于的知识点！