avaScript 的 Event Loop（事件循环）是 JavaScript 运行时环境（如浏览器和 Node.js）的核心机制之一，它使得 JavaScript 能够处理异步操作而不会阻塞程序的执行。了解 Event Loop 对于理解 JavaScript 的非阻塞行为和编写高效的异步代码至关重要。

1. JavaScript 是单线程的

首先，重要的是要理解 JavaScript 是一种单线程的语言。这意味着 JavaScript 在同一时间内只能执行一个任务。然而，JavaScript 需要能够处理各种异步操作（如 AJAX 请求、文件读取、用户交互等），这些操作可能会花费很长时间完成。为了解决这个问题，JavaScript 采用了 Event Loop 和 Callback Queues（回调队列）。

2. 调用栈（Call Stack）

调用栈是 JavaScript 代码执行时的数据结构，用于存储函数调用和返回地址。每当一个函数被调用时，它就会被推入调用栈，并在函数执行完毕后从栈中弹出。如果调用栈满了（即达到了最大调用深度），则会发生栈溢出错误。

3. 堆（Heap）

堆是用于存储对象、数组等引用类型的内存区域。与调用栈不同，堆是动态分配的，并且其大小不是固定的。

4. Web APIs

Web APIs 是浏览器提供的一组与浏览器功能交互的接口，如 DOM 操作、网络请求等。这些 API 通常是异步的，并且它们有自己的线程或进程来处理请求。

5. 任务队列（Task Queue）和微任务队列（Microtask Queue）

当异步操作完成时（如 AJAX 请求、setTimeout、Promise 解决等），相应的回调函数会被放入任务队列（或称为宏任务队列）或微任务队列中。任务队列中的任务在当前的执行栈清空后才会被执行，而微任务队列中的任务会在当前执行栈清空后、但下一个宏任务执行前立即执行。

6. Event Loop 的工作原理

Event Loop 的工作流程可以概括为以下几个步骤：

1. 检查调用栈：如果调用栈为空，则继续；如果调用栈不为空，则等待直到调用栈为空。
2. 执行微任务队列：一旦调用栈为空，Event Loop 就会查看微任务队列是否有任务。如果有，它会依次执行微任务队列中的所有任务，然后再回到第一步。
3. 执行宏任务队列：在所有微任务都执行完毕后，Event Loop 会从宏任务队列中取出一个任务放入调用栈执行。这个过程会不断重复。

7. 常见的宏任务和微任务

• 宏任务（Macrotasks）：包括 script（整体代码）、setTimeout、setInterval、setImmediate（Node.js 环境）、I/O、UI rendering 等。
• 微任务（Microtasks）：包括 Promise.then、Promise.catch、Promise.finally、MutationObserver、process.nextTick（Node.js 环境）等。

实例 1：setTimeout 和 Promise

console.log('1');  
  
setTimeout(() => {  
  console.log('setTimeout 宏任务队列');  
}, 0);  
  
new Promise((resolve) => {  
  console.log('Promise 立即执行');  
  resolve();  
}).then(() => {  
  console.log('then 微任务队列');  
});  
  
console.log('2');

//输出顺序
1  
Promise 立即执行 
2  
then  微任务队列
setTimeout 宏任务队列

解释：

1. 首先，执行同步代码，输出 1。
2. 然后，setTimeout 被调用，但因为它是一个宏任务，所以它的回调函数被放入宏任务队列中等待。
3. 接下来，new Promise 的构造函数被调用，立即执行并输出 Promise。resolve() 被调用，但 .then() 中的回调函数是异步的，并且是一个微任务，所以它会被放入微任务队列中。
4. 同步代码继续执行，输出 2。
5. 当所有同步代码执行完毕后，Event Loop 开始处理微任务队列。它找到 .then() 的回调函数并执行，输出 then。
6. 最后，当微任务队列为空时，Event Loop 转到宏任务队列，执行 setTimeout 的回调函数，输出 setTimeout。

实例 2：多个 Promise 和 setTimeout

console.log('1');  
  
setTimeout(() => {  
  console.log('setTimeout  宏任务队列1');  
  new Promise((resolve) => {  
    console.log('Promise in setTimeout');  
    resolve();  
  }).then(() => {  
    console.log('then in setTimeout');  
  });  
  setTimeout(() => {  
    console.log('setTimeout 宏任务队列2');  
  }, 0);  
}, 0);  
  
new Promise((resolve) => {  
  console.log('Promise 立即执行1');  
  resolve();  
}).then(() => {  
  console.log('then 微任务队列1');  
  new Promise((resolve) => {  
    console.log('Promise 立即执行2');  
    resolve();  
  }).then(() => {  
    console.log('then 微任务队列2');  
  });  
});  
  
console.log('2');

//输出顺序
1 
Promise 立即执行1  
2  
then 微任务队列1 
Promise 立即执行2  
then 微任务队列2
setTimeout  宏任务队列1  
Promise in setTimeout  
then in setTimeout  
setTimeout  宏任务队列2

解释：

1. 同步代码首先执行，输出 1、Promise 1 和 2。
2. .then() 中的回调函数作为微任务被加入微任务队列。
3. 第一个 setTimeout 被调用，它的回调函数被加入宏任务队列。
4. 当所有同步代码执行完毕后，开始执行微任务队列中的任务。首先输出then 微任务队列1，然后执行 Promise 立即执行2 和 then 微任务队列2。
5. 微任务队列为空后，执行宏任务队列中的第一个任务（即第一个 setTimeout 的回调函数），输出相关日志。
6. 第二个 setTimeout 的回调函数也被加入宏任务队列，并在当前宏任务执行完毕后执行。

实例 3：async/await 与 Promise

const async1= async () => {
   console.log('async1 1');  
   await async2();  
   console.log('async1 2');  
}
   
const async2= async () => {
   console.log('async2');  
}
  
console.log('1');  
setTimeout(() => {  
  console.log('setTimeout 宏任务队列');  
}, 0);  
  
async1();  
  
new Promise((resolve) => {  
  console.log('promise 立即执行');  
  resolve();  
}).then(() => {  
  console.log('then 微任务队列');  
});  
  
console.log('2');

//输出顺序
1
async1 1
async2  
promise 立即执行
2
async1 2
then 微任务队列
setTimeout 宏任务队列

解释：

1. 同步代码首先执行，输出1。
2. async1() 被调用，输出async1 1。
3. await async2() 暂停 async1() 的执行，async2() 被调用并输出 async2。因为 async2() 没有返回 Promise 或没有等待的异步操作，所以 await 后面的代码在 async2() 执行完毕后继续执行。
4. 同步代码首先执行，输出promise 立即执行和2。
5. 之后async2执行完毕后，同步代码输出async1 2，
6. 当所有同步代码执行完毕后，开始执行微任务队列中的任务then 微任务队列
7. 最后执行宏任务队列，输出setTimeout 宏任务队列

结论

Event Loop 是 JavaScript 异步编程的基石，它使得 JavaScript 能够在不阻塞主线程的情况下处理各种异步操作。通过理解 Event Loop 的工作原理，我们可以更加高效地编写异步代码，避免潜在的错误和性能问题。