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

哈喽！大家好，很高兴又见面了，我是golang学习网的一名作者，今天由我给大家带来一篇《事件循环是什么？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学习网公众号！