<h3>核心概念</h3>
<p>事件循环是 JavaScript 处理异步操作的机制，它使得单线程的 JS 能够实现非阻塞 I/O 操作。</p>
<h3>三大关键组成部分</h3>
<ol>
<li>
<p>调用栈(Call Stack)：</p>
<ul>
<li>执行同步代码的地方</li>
<li>后进先出(LIFO)结构</li>
</ul>
</li>
<li>
<p>任务队列(Task Queues)：</p>
<ul>
<li>宏任务队列：setTimeout、setInterval、I/O 等</li>
<li>微任务队列：Promise.then、MutationObserver 等</li>
</ul>
</li>
<li>
<p>事件循环机制：</p>
<ul>
<li>不断检查调用栈和任务队列</li>
<li>决定何时执行哪个任务</li>
</ul>
</li>
</ol>
<h3>执行流程</h3>
<ol>
<li>从宏任务队列取出一个任务执行（如 script 整体代码）</li>
<li>执行过程中：
<ul>
<li>同步代码立即执行</li>
<li>遇到异步操作，注册相应回调</li>
</ul></li>
<li>当前宏任务执行完毕：</li>
</ol>
<ul>
<li>立即执行所有微任务</li>
<li>如果微任务产生新微任务，继续执行直到队列清空</li>
</ul>
<ol start="4">
<li>必要时进行UI 渲染</li>
<li>从宏任务队列取下一个任务，开始新循环</li>
</ol>
<h3>执行顺序示例</h3>
<pre><code>console.log(&#039;1. 同步代码&#039;); // 同步

setTimeout(() =&gt; console.log(&#039;4. 宏任务&#039;), 0); // 宏任务

Promise.resolve().then(() =&gt; console.log(&#039;3. 微任务&#039;)); // 微任务

console.log(&#039;2. 同步代码&#039;); // 同步

/* 输出顺序：
1. 同步代码
2. 同步代码
3. 微任务
4. 宏任务
*/</code></pre>
<h3>重要特点</h3>
<ul>
<li>微任务优先级高于宏任务：每执行完一个宏任务，就会清空微任务队列</li>
<li>避免阻塞：长时间同步代码会阻塞事件循环</li>
<li>不同环境差异：Node.js 与浏览器实现有细微差别</li>
</ul>
<p>理解事件循环是掌握 JavaScript 异步编程的基础，有助于编写高效、无阻塞的代码。</p>

【JS】事件循环(Event Loop)