什么是事件循环？调用堆栈和任务队列之间有什么区别?

小黑的铁粉
2 阅读3分钟

事件循环 (Event Loop)

事件循环是 JavaScript 运行时处理异步操作的核心机制，它使得 JavaScript 虽然是单线程的，但能够非阻塞地处理 I/O 操作和其他异步任务。

主要组成部分

  1. 调用堆栈 (Call Stack)

    • 一个后进先出(LIFO)的数据结构
    • 用于跟踪当前正在执行的函数
    • 当函数被调用时，会被推入堆栈；执行完毕后弹出

  2. 任务队列 (Task Queue)

    • 一个先进先出(FIFO)的数据结构
    • 存储待处理的消息（异步操作的回调）
    • 包括宏任务队列和微任务队列

调用堆栈 vs 任务队列

特性调用堆栈 (Call Stack)任务队列 (Task Queue)
结构LIFO (后进先出)FIFO (先进先出)
内容同步函数调用异步回调函数
执行时机立即执行等待调用堆栈为空时才执行
优先级高低
溢出可能导致"栈溢出"错误不会溢出，但可能导致内存问题

事件循环的工作流程

  1. 执行调用堆栈中的同步代码
  2. 当调用堆栈为空时，事件循环检查任务队列
  3. 如果有待处理的任务，将第一个任务移到调用堆栈执行
  4. 重复这个过程

微任务队列 (Microtask Queue)

  • 比普通任务队列优先级更高
  • 包含 Promise 回调、MutationObserver 等
  • 在当前任务完成后、下一个任务开始前执行
  • 会一直执行直到微任务队列为空
console.log('1'); // 同步代码，直接执行

setTimeout(() => console.log('2'), 0); // 宏任务，放入任务队列

Promise.resolve().then(() => console.log('3')); // 微任务，放入微任务队列

console.log('4'); // 同步代码，直接执行

// 输出顺序: 1, 4, 3, 2

理解事件循环和这些队列的区别对于编写高效、无阻塞的 JavaScript 代码至关重要。

处理 I/O 操作的含义

I/O（Input/Output，输入/输出）操作是指程序与外部资源进行数据交换的过程。在JavaScript中，处理I/O操作特别重要，因为JavaScript是单线程的，而I/O操作通常是阻塞的（需要等待响应）。

常见的I/O操作类型

  1. 文件系统操作

    • 读写文件
    • 例如Node.js中的fs.readFile()

  2. 网络请求

    • HTTP/HTTPS请求
    • WebSocket通信
    • 例如fetch()、XMLHttpRequest

  3. 数据库操作

    • 查询或更新数据库
    • 例如MongoDB、MySQL等数据库操作

  4. 用户输入

    • 键盘输入
    • 鼠标点击等交互事件

JavaScript如何处理I/O操作

JavaScript通过异步非阻塞方式处理I/O：

  1. 非阻塞特性

    • 发起I/O请求后，不等待结果立即继续执行后续代码
    • 避免线程被阻塞

  2. 回调机制

    • I/O完成后通过回调函数处理结果
    • 例如： 
      fs.readFile('file.txt', (err, data) => {
  if (err) throw err;
  console.log(data);
});

  3. Promise/async-await

    • 更现代的异步处理方式
    • 例如： 
      async function fetchData() {
  const response = await fetch('https://api.example.com/data');
  const data = await response.json();
  console.log(data);
}

为什么需要特殊处理I/O

  1. 性能考虑：I/O操作通常比CPU操作慢得多

    • 磁盘读取：毫秒级(10^-3秒)
    • 网络请求：可能达到秒级

  2. 单线程限制：JavaScript只有一个主线程

    • 如果同步等待I/O，整个程序会卡住

  3. 用户体验：在浏览器中，阻塞会导致页面无响应

事件循环中的I/O处理

当I/O操作完成时：

  1. 相应的回调函数被放入任务队列
  2. 事件循环在调用栈为空时从队列中取出回调执行
  3. 这使得JavaScript能够高效处理大量并发I/O
console.log('开始请求'); // 同步代码

// 异步I/O操作
fetch('https://api.example.com/data')
  .then(response => response.json())
  .then(data => console.log('收到数据:', data)); // 回调

console.log('请求已发起，继续执行其他代码'); // 立即执行

// 可能的输出顺序:
// 开始请求
// 请求已发起，继续执行其他代码
// 收到数据: {...}

这种机制使得JavaScript特别适合I/O密集型应用（如Web服务器），能够高效处理大量并发请求而不需要创建多个线程。

avatar
文章
阅读
粉丝