本文共 780 字，大约阅读时间需要 2 分钟。

[回顾]事件循环

JS运行环境概述

JS运行的环境称为宿主环境，这是JS代码执行的基础平台。

执行栈（Call Stack）

执行栈是JS引擎用于管理函数执行的核心数据结构。每当一个函数被调用时，JS引擎会为其创建一个新的执行环境，并将其推送到执行栈顶部。

JS引擎始终执行执行栈最顶部的代码，只有当执行栈完全空置时，才会处理事件队列中的任务。

异步函数与执行时机

异步函数是指不会立即执行，需要等待某个事件到达才能执行的函数。例如，事件处理函数常用异步函数来实现。这些函数的执行时机由宿主环境决定。

浏览器宿主环境中的线程模型

浏览器宿主环境中包含5个主要线程：

• JS引擎线程：负责执行当前执行栈的最顶部代码
• GUI线程：负责页面的渲染工作
• 事件监听线程：用于处理各种事件
• 计时线程：负责时间管理和定时任务
• 网络线程：负责处理网络通信

事件队列与事件循环

当某个线程发现需要执行的事件处理程序时，会将该处理程序添加到一个称为事件队列的内存结构中。

JS引擎在执行栈空置时，会将事件队列中的第一个任务取出，并立即执行。这种机制被称为事件循环。

事件队列的细分

在浏览器中，事件队列主要分为两种类型：

• 宏任务（Macro Task）：计时器结束回调、事件回调、HTTP回调等。绝大多数异步函数会被添加到宏任务队列中执行。
• 微任务（Micro Task）：MutationObserver（DOM变更观察器）回调、Promise回调等。这些任务通常在宏任务执行完毕后立即被处理。

MutationObserver的作用

MutationObserver是一种DOM观察器，用于监听特定DOM对象的变更情况。它能够实时跟踪页面结构的变化。

事件循环的执行顺序

当执行栈空置时，JS引擎首先会执行微任务队列中的所有任务。如果微任务队列为空，则会执行宏任务队列中的任务。