Javascript中的事件循环机制

JavaScript 的事件循环机制是理解 JavaScript 异步编程的关键。在 JavaScript 中，所有任务都可以分为两种：同步任务和异步任务。

以下是事件循环机制的基本概念和工作方式：

同步任务和异步任务

• 同步任务：在主线程上排队执行的任务，只有前一个任务执行完毕，才能执行后一个任务。
• 异步任务：不进入主线程，而是进入"任务队列"（Task Queue）的任务，只有"任务队列"通知主线程，某个异步任务可以执行了，该任务才会进入主线程执行。

执行栈（Call Stack）

JavaScript 引擎首先执行栈中的代码，当遇到一个异步任务时，会将其挂起，继续执行栈中的其他任务。当异步任务满足执行条件时（如定时器到达时间、网络请求完成等），它会被加入到任务队列中。

任务队列（Task Queue）

任务队列是一个事件的队列，IO事件、定时器事件等都会被放入这个队列中等待处理。

事件循环（Event Loop）

事件循环负责监听调用栈和任务队列，它的主要工作流程如下：

1. 执行调用栈中的所有同步任务。
2. 检查任务队列中是否有任务，如果有，则将任务队列中的第一个任务移动到调用栈中执行。
3. 重复步骤2。

宏任务（Macro Task）与微任务（Micro Task）

在事件循环中，任务被分为宏任务和微任务：

• 宏任务：包括整体代码script，setTimeout，setInterval，setImmediate（Node.js 环境），I/O 操作等。
• 微任务：包括Process.nextTick（Node.js 环境），Promise，MutationObserver（浏览器环境）等。

事件循环的每个阶段执行完成后，都会检查微任务队列，如果有微任务，则执行所有微任务。然后再进入下一个阶段或者进行UI渲染。

事件循环的各个阶段

事件循环的一个周期分为以下几个阶段：

1. 执行所有微任务。
2. 执行栈为空，开始执行任务队列中的宏任务。
3. 执行渲染操作（如果有的话）。
4. 执行下一个宏任务。

事件循环是持续进行的，直到执行栈和任务队列中的所有任务都执行完毕。

示例

console.log('script start');

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

Promise.resolve().then(function() {
  console.log('promise1');
}).then(function() {
  console.log('promise2');
});

console.log('script end');

执行顺序如下：

1. ‘script start’
2. ‘script end’
3. ‘promise1’
4. ‘promise2’
5. ‘setTimeout’

这是因为 Promise 的 .then 回调是微任务，它们会在每个阶段结束时执行，而 setTimeout 是宏任务，会在下一个事件循环周期执行。

理解事件循环对于优化 JavaScript 代码性能、避免内存泄漏以及合理设计异步逻辑都是非常重要的。