事件循环：JavaScript 中高效执行的关键

前端

2023-11-03 13:04:11

JavaScript 事件循环：异步任务与主线程管理

在 JavaScript 的世界中，事件循环扮演着至关重要的角色。它是一个不断循环的过程，负责接收事件、执行任务并休眠。JavaScript 的单线程特性使事件循环成为管理异步任务和避免主线程阻塞的关键机制。

事件循环的本质

想象一下一个永不停歇的旋转木马，它就是事件循环。它在三个状态之间不断转换：

等待： 木马等待来自各种来源的事件，例如用户输入、网络请求或定时器到期。
执行： 一旦收到事件，木马就会执行相应的任务。这些任务可以是回调函数、promise 或 DOM 更新。
休眠： 执行任务后，木马会休眠，等待下一个事件触发。

异步任务与事件循环

JavaScript 中的异步任务，如网络请求，不会立即执行。相反，它们会被放入一个队列中，由事件循环在适当的时候执行。这使得 JavaScript 能够继续处理其他任务，而不会阻塞主线程。

避免主线程阻塞

主线程阻塞是指当 JavaScript 执行耗时的任务时，会阻止页面上的其他代码运行。这可能会导致页面反应迟钝或冻结。通过将任务移交事件循环，JavaScript 可以避免主线程阻塞，从而确保页面的流畅性和响应性。

示例

考虑以下代码示例：

// 耗时任务
const heavyTask = () => {
  for (let i = 0; i < 1000000; i++) {
    // 执行耗时的计算
  }
};

// 异步任务
const asyncTask = () => {
  setTimeout(() => {
    console.log("异步任务完成");
  }, 2000);
};

// 同步任务
const syncTask = () => {
  console.log("同步任务完成");
};

// 执行任务
heavyTask();
asyncTask();
syncTask();