阿卡不拉

Appearance

事件循环 ✨ ​

要点速览

  • 渲染主线程以“消息队列 + 无限循环”调度任务，称为事件循环。
  • 队列不是只有宏/微任务；现代浏览器拆分为多队列：交互队列、延时队列、微队列等。
  • 优先级：微队列最高（Promise.then/MutationObserver）；交互次之；延时计时器居中。
  • 单线程不可阻塞：耗时同步任务会阻碍绘制与事件响应。
  • 正确认知：案例输出顺序由“同步 → 微队列 → 其他队列”与具体调度共同决定。

浏览器的进程模型 ​

速览与术语
  • 进程：程序运行的独立内存空间。
  • 线程：运行代码的执行实体，一个进程至少有一个主线程。
  • 多进程浏览器：浏览器进程、网络进程、渲染进程等协同工作，互不影响。

何为进程？ ​

程序运行需要有它自己专属的内存空间，可以把这块程序运行需要内存空间简单的理解为进程

每个应用至少有一个进程，进程之间相互独立，即使要通信，也需要双方同意。

何为线程？ ​

有了进程后，就可以运行程序的代码了。

运行代码的「人」称之为「线程」。

一个进程至少有一个线程，所以在进程开启后会自动创建一个线程来运行代码，该线程称之为主线程。

如果程序需要同时执行多块代码，主线程就会启动更多的线程来执行代码，所以一个进程中可以包含多个线程。

浏览器有哪些进程和线程？ ​

浏览器是一个多进程多线程的应用程序

浏览器内部工作极其复杂。

为了避免相互影响，为了减少连环崩溃的几率，当启动浏览器后，它会自动启动多个进程。

可以在浏览器的任务管理器中查看当前的所有进程

其中，最主要的进程有：

  1. 浏览器进程

    主要负责界面显示、用户交互、子进程管理等。浏览器进程内部会启动多个线程处理不同的任务。

  2. 网络进程

    负责加载网络资源。网络进程内部会启动多个线程来处理不同的网络任务。

  3. 渲染进程

    渲染进程启动后，会开启一个渲染主线程，主线程负责执行 HTML、CSS、JS 代码。

    默认情况下，浏览器会为每个标签页开启一个新的渲染进程，以保证不同的标签页之间不相互影响。

将来该默认模式可能会有所改变，有兴趣可参见 chrome 官方说明文档

渲染主线程是如何工作的？ ​

渲染主线程是浏览器中最繁忙的线程，需要它处理的任务包括但不限于：

  • 解析 HTML
  • 解析 CSS
  • 计算样式
  • 布局
  • 处理图层
  • 每秒把页面画 60 次
  • 执行全局 JS 代码
  • 执行事件处理函数
  • 执行计时器的回调函数
  • ……

要处理这么多的任务，主线程遇到了一个前所未有的难题：如何调度任务？

比如：

  • 我正在执行一个 JS 函数，执行到一半的时候用户点击了按钮，我该立即去执行点击事件的处理函数吗？
  • 我正在执行一个 JS 函数，执行到一半的时候某个计时器到达了时间，我该立即去执行它的回调吗？
  • 浏览器进程通知我“用户点击了按钮”，与此同时，某个计时器也到达了时间，我应该处理哪一个呢？
  • ……

渲染主线程想出了一个绝妙的主意来处理这个问题：排队

  1. 在最开始的时候，渲染主线程会进入一个无限循环
  2. 每一次循环会检查消息队列中是否有任务存在。如果有，就取出第一个任务执行，执行完一个后进入下一次循环；如果没有，则进入休眠状态。
  3. 其他所有线程（包括其他进程的线程）可以随时向消息队列添加任务。新任务会加到消息队列的末尾。在添加新任务时，如果主线程是休眠状态，则会将其唤醒以继续循环拿取任务

这样一来，就可以让每个任务有条不紊的、持续的进行下去了。

整个过程，被称之为事件循环（消息循环）

若干解释 ​

何为异步？ ​

单线程是异步产生的原因

代码在执行过程中，会遇到一些无法立即处理的任务，比如：

  • 计时完成后需要执行的任务 —— setTimeout、setInterval
  • 网络通信完成后需要执行的任务 – XHR、Fetch
  • 用户操作后需要执行的任务 – addEventListener

如果让渲染主线程等待这些任务的时机达到，就会导致主线程长期处于「阻塞」的状态，从而导致浏览器「卡死」

渲染主线程承担着极其重要的工作，无论如何都不能阻塞！

因此，浏览器选择异步来解决这个问题

使用异步的方式，渲染主线程永不阻塞（事件循环式异步的实现方式）

应用场景

  • 网络请求、计时器、用户交互均以异步任务形式加入消息队列，避免阻塞渲染。
  • 耗时计算或 I/O 可改为分片任务或在空闲时间执行（如 requestIdleCallback）。

JS 为何会阻碍渲染？ ​

先看代码

html
<h1>Mr.Yuan is awesome!</h1>
<button>change</button>
<script>
  let h1 = document.querySelector("h1");
  let btn = document.querySelector("button");

  // 死循环指定的时间
  function delay(duration) {
    var start = Date.now();
    while (Date.now() - start < duration) {}
  }

  btn.onclick = function () {
    h1.textContent = "袁老师很帅！";
    delay(3000);
  };
</script>

点击按钮后，会发生什么呢？

答案：等待三秒后内容改变。

渲染主线程首先执行全局的 js，执行到

btn.onclick

时候通知交互线程监听用户的点击事件，全局 js 执行完毕，当用户点击按钮时，交互线程将回调函数放入消息队列，渲染主线程空闲则开始执行回调函数，执行

h1.textContent

时创建画图任务放入消息队列，然后执行

delay(3000)

等待 3 秒后，回调函数执行结束，渲染主线程执行画图任务。

不要在回调中做长时间同步阻塞

  • 长时间同步阻塞会卡住 UI、动画和交互响应。
  • 解决：拆分为多个短任务；或把重活放到 Web Worker；或延迟到空闲时间。

任务有优先级吗？ ​

任务没有优先级，在消息队列中先进先出

但消息队列是有优先级的

根据 W3C 的最新解释:

  • 每个任务都有一个任务类型，同一个类型的任务必须在一个队列，不同类型的任务可以分属于不同的队列。 在一次事件循环中，浏览器可以根据实际情况从不同的队列中取出任务执行。
  • 浏览器必须准备好一个微队列，微队列中的任务优先所有其他任务执行（参见 HTML 规范中的 microtask checkpoint） https://html.spec.whatwg.org/multipage/webappapis.html#perform-a-microtask-checkpoint

随着浏览器的复杂度急剧提升，W3C 不再使用宏队列的说法

在目前 chrome 的实现中，至少包含了下面的队列：

  • 延时队列：用于存放计时器到达后的回调任务，优先级「中」
  • 交互队列：用于存放用户操作后产生的事件处理任务，优先级「高」
  • 微队列：用户存放需要最快执行的任务，优先级「最高」

添加任务到微队列的主要方式主要是使用 Promise、MutationObserver

js
// 立即把一个函数添加到微队列
Promise.resolve().then(() => {
  /* microtask */
});

浏览器还有很多其他的队列，由于和我们开发关系不大，不作考虑

案例 ​

使用说明

  • 输出顺序由“同步 → 微队列 → 其他队列”以及浏览器具体调度共同决定。
  • 保证示例在现代浏览器的标准环境中执行；避免非标准或特定环境差异。

案例一 ​

js
setTimeout(function () {
  console.log(1);
}, 0);
console.log(2);
解释
  • 同步先输出 2；计时器加入延时队列，事件循环下一轮取出执行，输出 1。

案例二 ​

js
// 死循环指定的时间
function delay(duration) {
  var start = Date.now();
  while (Date.now() - start < duration) {}
}
setTimeout(function () {
  console.log(1);
}, 0);
delay(1000);
console.log(2);
解释
  • 延时队列中的计时器回调需等待主线程空闲；delay(1000)阻塞 1s，随后执行同步输出 2，下一轮取计时器输出 1。

案例三 ​

js
setTimeout(function () {
  console.log(1);
}, 0);
Promise.resolve().then(function () {
  console.log(2);
});
console.log(3);
解释
  • 同步输出 3；微队列优先于延时队列，输出 2；最后延时队列输出 1。

案例四 ​

js
function a() {
  console.log(1);
  Promise.resolve().then(function () {
    console.log(2);
  });
}
setTimeout(function () {
  console.log(3);
  Promise.resolve().then(a);
}, 0);
Promise.resolve().then(function () {
  console.log(4);
});
console.log(5);
解释
  • 同步输出 5；微队列输出 4；计时器到达后同步输出 3 并将函数 a 加入微队列；随后微队列依次执行 a 输出 1，再在其内部微队列输出 2。

案例五 ​

js
function a() {
  console.log(1);
  Promise.resolve().then(function () {
    console.log(2);
  });
}
setTimeout(function () {
  console.log(3);
}, 0);
Promise.resolve().then(a);
console.log(5);
解释
  • 同步输出 5；a 在微队列输出 1，再输出 2；计时器下一轮输出 3。

案例六 ​

html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <button id="begin">开始</button>
    <button id="interaction">添加交互任务</button>
    <script>
      const begin = document.getElementById("begin");
      const interactionBtn = document.getElementById("interaction");
      const startTime = performance.now();
      const t = () => `${(performance.now() - startTime).toFixed(0)}ms`;

      function delay(ms) {
        const s = Date.now();
        while (Date.now() - s < ms) {}
      }

      function addDelayQueue() {
        console.log(t(), "添加延时队列: setTimeout(100)");
        setTimeout(() => {
          console.log(t(), "延时队列执行: setTimeout(100)");
        }, 100);
        console.log(t(), "添加延时队列: setTimeout(0)");
        setTimeout(() => {
          console.log(t(), "延时队列执行: setTimeout(0)");
        }, 0);
      }

      function addInteractionQueue() {
        console.log(t(), "添加交互队列: click");
        Promise.resolve().then(() => {
          console.log(t(), "交互微任务: Promise.then");
        });
        requestAnimationFrame(() => {
          console.log(t(), "交互任务: requestAnimationFrame");
        });
        setTimeout(() => {
          console.log(t(), "交互任务: setTimeout(0)");
        }, 0);
      }

      interactionBtn.onclick = function () {
        console.log(t(), "交互事件: click 开始");
        addInteractionQueue();
      };

      begin.onclick = function () {
        console.log(t(), "开始");
        Promise.resolve().then(() => {
          console.log(t(), "微任务: begin.then");
        });
        addDelayQueue();
        delay(2000);
        console.log(t(), "阻塞结束");
      };
    </script>
  </body>
</html>

说明

  • 示例使用 performance.now() 打印时间戳，便于观察各任务的实际触发时机。
  • 点击「开始」流程：同步日志 → 安排微任务（begin.then）→ 安排延时队列（setTimeout(100)/(0)）→ 同步阻塞 delay(2000) → 阻塞结束后先跑微队列，再按优先级执行其他队列。
  • 点击「添加交互任务」流程：交互事件进入交互队列；事件回调内安排微任务（Promise.then）、requestAnimationFrame、setTimeout(0)；其中微任务最先执行，requestAnimationFrame 在下一次绘制前触发，计时器由延时队列按事件循环取出执行。
  • 现象总结：在主线程解除阻塞后，微队列任务总是最先执行；交互队列任务优先于延时队列；长时间同步阻塞会整体推迟任务的触发时间。

案例七 ​

js
setTimeout(function () {
  setTimeout(function () {
    setTimeout(function () {
      setTimeout(function () {
        setTimeout(function () {
          setTimeout(function () {
            setTimeout(function () {
              setTimeout(function () {
                setTimeout(function () {}, 4);
              }, 4);
            }, 4);
          }, 4);
        }, 0);
      }, 0);
    }, 0);
  }, 0);
}, 0);

计时器嵌套最小时延

按照 W3C 的标准，浏览器实现计时器时，如果嵌套层级超过 5 层，则会带有 4 毫秒的最少时间，这样在计时时间少于 4 毫秒时会引入偏差。

面试题 ​

什么是事件循环？

事件循环是浏览器渲染主线程对任务进行调度的核心机制，主要用于解决了 js 在单线程环境下如何高效处理多个异步任务的问题。

它的原理是，程序开始时，渲染主线程会进入一个无限循环，每次循环从消息队列中取出一个任务执行，执行完毕后继续下一次循环。传统“宏队列/微队列”的说法已被更精细的多队列模型弱化，但关键点不变：微队列优先级最高（如 Promise.then/MutationObserver），其他队列按优先级与调度策略执行。程序运行过程中，其他线程随时向队列添加任务，主线程按照事件循环从消息队列取出并执行。

现在随着浏览器复杂度的提升，浏览器拆分出更细的队列，比如交互队列、延迟队列等；交互队列优先级高于延迟队列，微队列优先级最高。渲染主线程会根据优先级从不同队列取任务执行。