JavaScript事件循环

什么是事件循环？

事件循环（Event Loop）是JavaScript处理异步操作的核心机制。由于JavaScript是单线程语言，它通过事件循环来实现非阻塞的异步编程。

事件循环的主要作用是协调事件、用户交互、脚本执行、渲染和网络请求等各种操作。

JavaScript的单线程特性

JavaScript是单线程的，意味着它一次只能执行一个任务。这是因为JavaScript最初是为浏览器设计的，用于处理DOM操作和用户交互，如果允许多线程同时操作DOM，会导致各种复杂的同步问题。

虽然JavaScript是单线程的，但浏览器和Node.js环境都提供了多线程支持，用于处理耗时的I/O操作，如网络请求、文件读写等。这些操作由浏览器或Node.js的底层线程处理，完成后通过事件循环通知JavaScript主线程。

事件循环的组成部分

事件循环主要由以下几个部分组成：

1. 调用栈（Call Stack）

调用栈是一个后进先出（LIFO）的数据结构，用于追踪当前正在执行的函数调用。当函数被调用时，它被压入栈顶；当函数执行完毕时，它被弹出栈顶。

function foo() {
  console.log('foo');
  bar();
}

function bar() {
  console.log('bar');
}

foo();

// 调用栈执行过程：
// 1. 压入foo()
// 2. 执行foo()，输出"foo"
// 3. 压入bar()
// 4. 执行bar()，输出"bar"
// 5. 弹出bar()
// 6. 弹出foo()

2. 堆（Heap）

堆是用于存储对象和其他复杂数据结构的内存区域，它是一个无序的内存空间。

3. 事件队列（Event Queue）

事件队列是一个先进先出（FIFO）的数据结构，用于存储待处理的事件和回调函数。当异步操作完成后，对应的回调函数会被放入事件队列中等待执行。

事件队列主要分为两种：

宏任务队列（Macrotask Queue）

宏任务队列用于存储以下类型的任务：

  • setTimeout和setInterval的回调
  • I/O操作的回调
  • DOM事件的回调（如click、mouseover等）
  • requestAnimationFrame的回调
  • setImmediate（Node.js环境）

微任务队列（Microtask Queue）

微任务队列用于存储以下类型的任务：

  • Promise的then、catch和finally回调
  • MutationObserver的回调
  • process.nextTick（Node.js环境）
  • async/await中的异步操作完成后继续执行的代码

事件循环的执行流程

事件循环的执行流程可以概括为以下几个步骤：

  1. 执行同步代码：从调用栈顶部开始执行同步代码，直到调用栈为空。
  2. 执行微任务：检查微任务队列，如果有微任务，依次执行所有微任务，直到微任务队列为空。
  3. 执行渲染（浏览器环境）：如果需要，执行DOM渲染。
  4. 取出一个宏任务：从宏任务队列中取出第一个任务，放入调用栈并执行。
  5. 重复循环：重复步骤1-4，直到所有任务都执行完毕。

执行流程示例

console.log('1. 同步代码开始');

setTimeout(() => {
  console.log('2. setTimeout回调（宏任务）');
}, 0);

Promise.resolve().then(() => {
  console.log('3. Promise回调（微任务）');
});

console.log('4. 同步代码结束');

// 输出顺序：
// 1. 同步代码开始
// 4. 同步代码结束
// 3. Promise回调（微任务）
// 2. setTimeout回调（宏任务）

事件循环的详细执行机制

1. 同步代码执行

当JavaScript引擎执行代码时，首先将所有同步代码压入调用栈并执行。同步代码执行完毕后，调用栈为空。

2. 微任务处理

在调用栈为空后，JavaScript引擎会检查微任务队列。如果微任务队列不为空，它会依次取出所有微任务并执行，直到微任务队列为空。

需要注意的是，在执行微任务的过程中，如果新的微任务被创建，它们会被添加到微任务队列的末尾，并在当前微任务队列处理完成之前被执行。

console.log('1. 同步代码开始');

Promise.resolve().then(() => {
  console.log('2. 第一个微任务');
  
  Promise.resolve().then(() => {
    console.log('3. 嵌套的微任务');
  });
});

Promise.resolve().then(() => {
  console.log('4. 第二个微任务');
});

console.log('5. 同步代码结束');

// 输出顺序：
// 1. 同步代码开始
// 5. 同步代码结束
// 2. 第一个微任务
// 3. 嵌套的微任务
// 4. 第二个微任务

3. 宏任务处理

微任务队列处理完毕后，JavaScript引擎会从宏任务队列中取出第一个任务，放入调用栈并执行。执行完毕后，再次检查微任务队列，重复整个循环。

console.log('1. 同步代码开始');

setTimeout(() => {
  console.log('2. 第一个宏任务');
  
  Promise.resolve().then(() => {
    console.log('3. 宏任务中的微任务');
  });
}, 0);

setTimeout(() => {
  console.log('4. 第二个宏任务');
}, 0);

console.log('5. 同步代码结束');

// 输出顺序：
// 1. 同步代码开始
// 5. 同步代码结束
// 2. 第一个宏任务
// 3. 宏任务中的微任务
// 4. 第二个宏任务

async/await与事件循环

async/await是基于Promise的语法糖，它的执行流程也遵循事件循环机制。

async/await的执行顺序

console.log('1. 同步代码开始');

async function asyncFunction() {
  console.log('2. 进入async函数');
  
  await new Promise(resolve => {
    console.log('3. 创建Promise');
    resolve();
  });
  
  console.log('4. await之后的代码');
}

asyncFunction();

console.log('5. 同步代码结束');

// 输出顺序：
// 1. 同步代码开始
// 2. 进入async函数
// 3. 创建Promise
// 5. 同步代码结束
// 4. await之后的代码

详细执行流程

  1. 执行同步代码console.log('1. 同步代码开始')
  2. 调用asyncFunction()，将其压入调用栈
  3. 执行asyncFunction()，输出'2. 进入async函数'
  4. 创建Promise，输出'3. 创建Promise'
  5. Promise立即resolve，将await之后的代码（即console.log('4. await之后的代码')）放入微任务队列
  6. asyncFunction()执行暂停，从调用栈中弹出
  7. 执行剩余同步代码，输出'5. 同步代码结束'
  8. 调用栈为空，检查微任务队列
  9. 执行微任务，输出'4. await之后的代码'

事件循环的实际应用

1. 理解setTimeout的延迟

console.log('1. 开始');

setTimeout(() => {
  console.log('2. setTimeout回调');
}, 1000);

// 执行一个耗时的同步操作
for (let i = 0; i < 1000000000; i++) {
  // 模拟耗时操作
}

console.log('3. 结束');

// 输出顺序：
// 1. 开始
// 3. 结束
// 2. setTimeout回调（可能超过1秒后执行）

2. 处理大量异步任务

// 不推荐：创建大量宏任务
for (let i = 0; i < 1000; i++) {
  setTimeout(() => {
    console.log(i);
  }, 0);
}

// 推荐：使用微任务分批处理
function processBatch(items, batchSize, processItem, callback) {
  let index = 0;
  
  function processNextBatch() {
    const batch = items.slice(index, index + batchSize);
    index += batchSize;
    
    batch.forEach(processItem);
    
    if (index < items.length) {
      // 使用微任务调度下一批处理
      Promise.resolve().then(processNextBatch);
    } else {
      callback();
    }
  }
  
  processNextBatch();
}

// 使用示例
const items = Array.from({ length: 1000 }, (_, i) => i);
processBatch(items, 100, (item) => {
  console.log(item);
}, () => {
  console.log('处理完成');
});

浏览器与Node.js事件循环的区别

虽然浏览器和Node.js都使用事件循环，但它们在实现上有一些区别：

特性 浏览器 Node.js
宏任务类型 setTimeout, setInterval, I/O, DOM事件, requestAnimationFrame setTimeout, setInterval, I/O, setImmediate
微任务类型 Promise, MutationObserver Promise, process.nextTick
微任务执行顺序 无特定顺序 process.nextTick优先于Promise
渲染阶段 有 无
事件循环阶段 简单的循环 多个阶段（timers, pending callbacks, idle/prepare, poll, check, close callbacks）

Node.js事件循环的特殊阶段

Node.js的事件循环有6个主要阶段：

  1. Timers：执行setTimeout和setInterval的回调
  2. Pending Callbacks：执行延迟到下一个循环迭代的I/O回调
  3. Idle, Prepare：仅内部使用
  4. Poll：执行I/O回调，检查新的I/O事件
  5. Check：执行setImmediate的回调
  6. Close Callbacks：执行关闭事件的回调（如socket.on('close', ...)）

事件循环的最佳实践

  1. 避免阻塞调用栈：不要在主线程中执行耗时的同步操作
  2. 合理使用微任务和宏任务：微任务用于优先级较高的异步操作，宏任务用于优先级较低的异步操作
  3. 使用requestAnimationFrame处理动画：对于动画相关的回调，使用requestAnimationFrame而不是setTimeout
  4. 避免创建过多的宏任务：大量的宏任务会导致事件循环延迟
  5. 使用分批处理：对于大量数据的处理，使用微任务分批处理，避免阻塞事件循环
  6. 理解Promise的执行顺序：Promise的then/catch/finally回调会在微任务队列中执行
  7. 注意async/await的执行流程：await会暂停异步函数的执行，直到Promise resolve

常见的事件循环问题

1. 回调地狱

回调地狱是指多层嵌套的回调函数，导致代码难以阅读和维护。

// 回调地狱示例
fs.readFile('file1.txt', (err, data1) => {
  if (err) throw err;
  fs.readFile('file2.txt', (err, data2) => {
    if (err) throw err;
    fs.readFile('file3.txt', (err, data3) => {
      if (err) throw err;
      console.log(data1, data2, data3);
    });
  });
});

// 使用Promise解决
function readFilePromise(file) {
  return new Promise((resolve, reject) => {
    fs.readFile(file, (err, data) => {
      if (err) reject(err);
      else resolve(data);
    });
  });
}

// 使用async/await解决
async function readFiles() {
  try {
    const data1 = await readFilePromise('file1.txt');
    const data2 = await readFilePromise('file2.txt');
    const data3 = await readFilePromise('file3.txt');
    console.log(data1, data2, data3);
  } catch (err) {
    console.error(err);
  }
}

2. 内存泄漏

事件监听器没有正确移除，可能导致内存泄漏。

// 内存泄漏示例
const element = document.getElementById('myElement');
element.addEventListener('click', () => {
  console.log('点击事件');
});

// 正确的做法：移除事件监听器
function handleClick() {
  console.log('点击事件');
}

element.addEventListener('click', handleClick);
// 不再需要时移除
element.removeEventListener('click', handleClick);

总结

事件循环是JavaScript异步编程的核心机制，它协调了同步代码、异步代码、DOM渲染等各种操作的执行顺序。

主要内容包括：

  • JavaScript的单线程特性
  • 事件循环的组成部分（调用栈、堆、事件队列）
  • 微任务和宏任务的区别
  • 事件循环的执行流程
  • async/await与事件循环的关系
  • 浏览器与Node.js事件循环的区别
  • 事件循环的最佳实践和常见问题

理解事件循环机制对于编写高效、可靠的JavaScript代码至关重要，尤其是在处理复杂的异步场景时。

练习

  1. 分析以下代码的输出顺序：

    console.log('1');

setTimeout(() => {
  console.log('2');
  Promise.resolve().then(() => {
    console.log('3');
  });
}, 0);

Promise.resolve().then(() => {
  console.log('4');
  setTimeout(() => {
    console.log('5');
  }, 0);
});

console.log('6');

  2. 实现一个函数，使用事件循环机制，每隔1秒输出一个数字，从1到10。

  3. 解释为什么setTimeout的实际延迟时间可能大于指定的延迟时间。

  4. 比较微任务和宏任务的区别，并举例说明它们的使用场景。

  5. 分析以下async/await代码的执行顺序：

    async function f1() {
  console.log('f1 start');
  await f2();
  console.log('f1 end');
}

async function f2() {
  console.log('f2');
}

console.log('start');
f1();
console.log('end');
« 上一篇 JavaScript DOM操作 下一篇 » JavaScript Web API
↑