深入事件循环（Event Loop）：分析在不同宿主环境（浏览器、Node.js）下的差异，特别是微任务与宏任务队列的调度细节。

深入事件循环：浏览器与Node.js 的差异

各位好，今天我们要深入探讨事件循环，这是JavaScript运行时环境的核心机制。虽然概念上相似，但事件循环在浏览器和Node.js这两个主要的宿主环境中存在显著差异，尤其是在微任务和宏任务的调度细节上。理解这些差异对于编写高性能、响应迅速的JavaScript应用至关重要。

1. 事件循环的基本概念

事件循环（Event Loop）是一个持续运行的循环，负责监听调用栈（Call Stack）是否为空。如果调用栈为空，事件循环就会从任务队列（Task Queue，也称为消息队列）中取出一个任务并放入调用栈中执行。这个过程不断重复，使得JavaScript能够以非阻塞的方式处理异步操作。

简化后的事件循环伪代码如下：

while (eventLoop.isRunning) {
  if (callStack.isEmpty()) {
    let task = taskQueue.dequeue();
    if (task) {
      callStack.push(task);
      task.execute(); // 执行任务
      callStack.pop(); // 任务执行完毕，从调用栈移除
    }
  }
}

2. 宏任务与微任务

事件循环处理的任务分为两大类：宏任务（Macro Task）和微任务（Micro Task）。

宏任务（Macro Task）：也称为任务（Task），由宿主环境（浏览器或Node.js）发起。例如：
- setTimeout
- setInterval
- I/O 操作 (例如：文件读取、网络请求)
- UI 渲染 (浏览器)
- script (首次执行的script标签内的代码)
- setImmediate (Node.js)
微任务（Micro Task）：由JavaScript引擎发起，优先级高于宏任务。例如：
- Promise.then, .catch, .finally
- MutationObserver (浏览器)
- process.nextTick (Node.js)
- queueMicrotask (ES2020)

3. 事件循环的执行顺序

事件循环的执行顺序可以用以下步骤描述：

执行一个宏任务（例如：执行script标签内的代码，定时器回调）。
检查并执行微任务队列中的所有微任务。
浏览器需要进行UI渲染。
重复以上步骤。

4. 浏览器环境下的事件循环

在浏览器中，事件循环负责处理用户交互、网络请求、定时器等异步事件。理解浏览器事件循环的关键在于掌握微任务和宏任务的优先级和执行时机。

4.1 浏览器事件循环的特点

渲染机会： 浏览器会在每个宏任务执行完毕后，检查是否需要进行UI渲染。这意味着，如果微任务队列中有大量的微任务，它们会阻止浏览器进行UI更新，导致页面卡顿。
宏任务队列： 浏览器通常会维护多个宏任务队列，例如，用于处理用户交互的队列、用于处理网络请求的队列等。浏览器会根据一定的策略选择执行哪个队列中的宏任务。

4.2 示例代码及分析

<!DOCTYPE html>
<html>
<head>
  <title>浏览器事件循环示例</title>
</head>
<body>
  <div id="output"></div>
  <script>
    const output = document.getElementById('output');

    console.log('Script start');

    setTimeout(() => {
      output.textContent = 'Timeout callback';
      console.log('Timeout callback');
    }, 0);

    Promise.resolve().then(() => {
      output.textContent = 'Promise then';
      console.log('Promise then');
    });

    output.textContent = 'Script end';
    console.log('Script end');
  </script>
</body>
</html>

执行结果：

Script start
Script end
Promise then
Timeout callback

分析：

首先，执行script标签内的代码，输出"Script start"和"Script end"。
setTimeout回调函数被添加到宏任务队列中。
Promise.resolve().then()回调函数被添加到微任务队列中。
script标签内的代码执行完毕，第一个宏任务执行完毕。
检查微任务队列，发现Promise.then回调函数，执行它，输出"Promise then"。
微任务队列为空，浏览器进行UI渲染，output.textContent显示"Promise then"。
事件循环进入下一个循环，从宏任务队列中取出setTimeout回调函数执行，输出"Timeout callback"，并且output.textContent被更新为"Timeout callback"。
浏览器再次进行UI渲染，最终页面显示"Timeout callback"。

4.3 涉及渲染的更复杂例子

<!DOCTYPE html>
<html>
<head>
  <title>浏览器事件循环与渲染</title>
</head>
<body>
  <div id="myDiv">Initial Text</div>
  <script>
    const myDiv = document.getElementById('myDiv');

    function updateDiv(text) {
      myDiv.textContent = text;
      console.log('Div updated:', text);
    }

    console.log('Script start');

    setTimeout(() => {
      updateDiv('Timeout - 1');
      Promise.resolve().then(() => {
        updateDiv('Promise in Timeout');
      });
      updateDiv('Timeout - 2');
    }, 0);

    Promise.resolve().then(() => {
      updateDiv('Promise - 1');
      Promise.resolve().then(() => {
        updateDiv('Promise - 2');
      });
    });

    updateDiv('Script end');
    console.log('Script end');

  </script>
</body>
</html>

执行结果以及关键点：

Script start
Div updated: Script end
Script end
Div updated: Promise – 1
Div updated: Promise – 2
Div updated: Timeout – 1
Div updated: Timeout – 2
Div updated: Promise in Timeout

关键点解释：

初始同步代码： 首先执行script标签内的同步代码。这会将 myDiv 的文本设置为 "Script end"，并打印 "Script end" 到控制台。此时，浏览器会进行一次渲染，显示 "Script end"。
Promise微任务： Promise.resolve() 创建的微任务被添加到微任务队列。在当前的宏任务（script标签内的代码）完成后，会立即执行这些微任务。因此，先执行外部的 Promise - 1 和嵌套的 Promise - 2。每次执行 updateDiv() 都会更新 myDiv 的文本内容，并打印到控制台。浏览器会更新UI，显示 "Promise – 2"。
setTimeout宏任务： setTimeout 创建的宏任务被添加到宏任务队列。在微任务队列清空后，事件循环会执行下一个宏任务，即 setTimeout 中的回调函数。
Timeout中的微任务： 在 setTimeout 回调函数中，首先执行 updateDiv('Timeout - 1')，然后创建了一个新的Promise微任务。 updateDiv('Timeout - 2') 会紧接着执行。此时 myDiv 显示 "Timeout – 2"。
Timeout的微任务执行： 在 setTimeout 回调函数执行完毕后，会检查并执行该宏任务产生的微任务（即 Promise in Timeout）。最后，myDiv 显示 "Promise in Timeout"。

总结： 整个过程展示了： 1. 同步代码优先执行并渲染。 2. 在当前宏任务结束后，立即执行所有微任务并渲染。 3. 然后执行下一个宏任务，并重复步骤2。

5. Node.js 环境下的事件循环

Node.js的事件循环与浏览器事件循环类似，但有一些关键差异，主要体现在阶段划分和特定API的使用上。

5.1 Node.js 事件循环的阶段

Node.js事件循环分为以下几个阶段：

Timers（定时器阶段）：执行setTimeout和setInterval的回调函数。
Pending callbacks（待定回调阶段）：执行延迟到下一个循环迭代的I/O回调。
Idle, prepare（空闲、准备阶段）：仅供内部使用。
Poll（轮询阶段）：检索新的I/O事件; 执行与I/O相关的回调（除了setTimeout、setInterval和setImmediate）；Node.js会根据情况阻塞在这里。
Check（检查阶段）：执行setImmediate()回调。
Close callbacks（关闭回调阶段）：执行close事件的回调，例如socket.on('close', ...)。

5.2 Node.js 事件循环的特点

process.nextTick()： 这是一个Node.js特有的API，用于将回调函数添加到微任务队列的头部。这意味着process.nextTick()的回调函数会在任何其他微任务之前执行。
setImmediate()： 这是一个Node.js特有的API，用于将回调函数添加到检查阶段（Check phase）执行。setImmediate()的回调函数会在事件循环的下一次迭代中执行。
I/O 密集型： Node.js主要用于处理I/O密集型任务，因此事件循环的轮询阶段（Poll phase）在Node.js中非常重要。

5.3 示例代码及分析

console.log('Script start');

setTimeout(() => {
  console.log('Timeout callback');
}, 0);

Promise.resolve().then(() => {
  console.log('Promise then');
});

process.nextTick(() => {
  console.log('Next tick callback');
});

setImmediate(() => {
  console.log('Immediate callback');
});

console.log('Script end');

执行结果：

Script start
Script end
Next tick callback
Promise then
Timeout callback
Immediate callback

分析：

首先，执行script标签内的代码，输出"Script start"和"Script end"。
setTimeout回调函数被添加到定时器阶段（Timers phase）的宏任务队列中。
Promise.resolve().then()回调函数被添加到微任务队列中。
process.nextTick()回调函数被添加到微任务队列的头部。
setImmediate()回调函数被添加到检查阶段（Check phase）的宏任务队列中。
script标签内的代码执行完毕，第一个宏任务执行完毕。
检查微任务队列，首先执行process.nextTick()回调函数，输出"Next tick callback"，然后执行Promise.then回调函数，输出"Promise then"。
微任务队列为空，事件循环进入下一个循环迭代。
进入定时器阶段（Timers phase），执行setTimeout回调函数，输出"Timeout callback"。
进入检查阶段（Check phase），执行setImmediate()回调函数，输出"Immediate callback"。

5.4 区分 setImmediate 和 setTimeout(..., 0)

在 Node.js 环境中， setImmediate 和 setTimeout(..., 0) 经常被用来延迟执行某些代码，但它们的执行时机有所不同。

setImmediate 的回调函数会被添加到 check 阶段的队列中执行。
setTimeout(..., 0) 的回调函数会被添加到 timers 阶段的队列中执行。

当两者都在主模块中调用时，执行顺序取决于事件循环的准备过程。

setTimeout(() => {
  console.log('setTimeout');
}, 0);

setImmediate(() => {
  console.log('setImmediate');
});

在这个例子中，执行顺序是不确定的，因为这取决于 Node.js 的启动过程和 CPU 负载。有时 setTimeout 先执行，有时 setImmediate 先执行。

但是，如果在 I/O 循环中调用， setImmediate 总是会比 setTimeout 先执行：

const fs = require('fs');

fs.readFile(__filename, () => {
  setTimeout(() => {
    console.log('setTimeout');
  }, 0);

  setImmediate(() => {
    console.log('setImmediate');
  });
});

在这个例子中， setImmediate 总是会在 setTimeout 之前执行，因为 setImmediate 的回调函数会被添加到 check 阶段的队列中，而 setTimeout 的回调函数会被添加到 timers 阶段的队列中。在 I/O 事件完成后，事件循环会先进入 check 阶段，执行 setImmediate 的回调函数，然后再进入 timers 阶段，执行 setTimeout 的回调函数。

6. 总结：差异与关键点

特性	浏览器环境	Node.js 环境
宏任务队列	多个宏任务队列 (用户交互, 网络请求等)	单个宏任务队列
渲染时机	每个宏任务执行完毕后，检查是否需要进行UI渲染	通常没有UI渲染，除非使用特定的GUI库
微任务队列	标准的微任务队列 (Promise, MutationObserver)	标准的微任务队列 (Promise) + `process.nextTick`
特有API	MutationObserver	`process.nextTick`, `setImmediate`
I/O处理	主要通过XMLHttpRequest/Fetch API进行网络请求	通过内置的fs、net等模块进行I/O操作

浏览器： 关注UI渲染，微任务会阻塞渲染，MutationObserver用于监听DOM变化。
Node.js： 关注I/O处理，process.nextTick优先级最高，setImmediate在I/O周期结束后执行。

理解浏览器和Node.js事件循环的差异，可以帮助我们编写更高效、更健壮的JavaScript代码。例如，在浏览器中，避免在微任务队列中执行过多的任务，以防止UI卡顿。在Node.js中，合理使用process.nextTick和setImmediate来控制回调函数的执行时机。

深入事件循环：浏览器与Node.js 的差异

发表回复 取消回复

发表回复取消回复