简单聊聊JavaScript的事件循环机制(event loop)

站长

2023年03月11日 15:03 · 阅读数 15

什么是事件循环？

在JavaScript中，事件循环是一种处理异步操作的机制，它可以让我们在代码执行过程中处理异步任务，比如网络请求、定时器和用户交互等。事件循环的原理是将所有的异步任务放入一个事件队列中，然后依次执行队列中的任务，直到队列为空为止。

事件循环的机制是JavaScript异步编程的基础，因此，我们需要深入了解事件循环的原理和使用方法。

浏览器环境中的事件循环

在浏览器环境中，事件循环的实现主要由以下几个部分组成：

宏任务
微任务
渲染阶段

宏任务和微任务

在事件循环中，任务被分为两种类型：宏任务和微任务。

宏任务是指由浏览器提供的异步任务，比如定时器、DOM事件和网络请求等。在宏任务执行阶段，事件循环会依次执行所有在事件队列中排队的宏任务，直到队列为空为止。

微任务是指由JavaScript引擎提供的异步任务，比如Promise的回调函数、MutationObserver的回调函数等。在宏任务执行阶段中，当所有同步代码和当前宏任务中的所有异步任务（包括微任务和宏任务）都执行完成之后，事件循环会进入微任务执行阶段。在微任务执行阶段，事件循环会依次执行所有在事件队列中排队的微任务，直到微任务队列为空。

微任务队列比宏任务队列的优先级更高，因为微任务中的操作会在下一个宏任务执行前完成，可以让我们在操作完成后立即得到结果。

代码示例：

console.log('1');

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

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

console.log('4');

输出结果为：1 4 3 2

解释：

在执行代码时，先打印出1，然后执行定时器的回调函数，但是由于定时器是异步任务，需要等待所有同步代码执行完毕后才会执行。因此，事件循环将定时器的回调函数放入宏任务队列中，然后执行Promise的回调函数，由于Promise的回调函数是微任务，因此先执行Promise的回调函数，打印出3，最后执行宏任务队列中的定时器回调函数，打印出2。

渲染阶段

渲染阶段是浏览器特有的事件循环阶段，用于处理渲染相关的任务，比如更新DOM和执行CSS动画等。渲染阶段的任务会在宏任务和微任务执行完毕之后执行，每次执行完一个宏任务或微任务后都会检查是否需要执行渲染任务，如果需要就会立即执行。

渲染阶段的任务是由浏览器控制的，因此我们不能手动控制或干预其执行顺序。在渲染阶段中，我们只需要关注需要进行渲染的操作，并在适当的时候进行操作即可。

代码示例：

console.log('1');

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

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

requestAnimationFrame(function() {
  console.log('4');
});

console.log('5');

输出结果为：

1 5 3 4 2

解释：

在执行代码时，先打印出1，然后执行定时器的回调函数，但是由于定时器是异步任务，需要等待所有同步代码执行完毕后才会执行。因此，事件循环将定时器的回调函数放入宏任务队列中，然后执行Promise的回调函数，由于Promise的回调函数是微任务，因此先执行Promise的回调函数，打印出3，然后执行渲染任务，打印出4。最后执行宏任务队列中的定时器回调函数，打印出2。

Node.js环境中的事件循环

在Node.js环境中，事件循环的实现与浏览器环境略有不同。Node.js中的事件循环主要由以下几个部分组成：

宏任务
微任务
线程池
观察者

宏任务和微任务

在Node.js环境中，与浏览器环境类似，任务被分为两种类型：宏任务和微任务。

宏任务是指由Node.js提供的异步任务，比如文件I/O和网络请求等。在宏任务执行阶段，事件循环会依次执行所有在事件队列中排队的宏任务，直到队列为空为止。

微任务是指由JavaScript引擎提供的异步任务，比如Promise的回调函数和process.nextTick等。在宏任务执行阶段中，当所有同步代码和当前宏任务中的所有异步任务（包括微任务和宏任务）都执行完成之后，事件循环会进入微任务执行阶段。在微任务执行阶段，事件循环会依次执行所有在事件队列中排队的微任务，直到微任务队列为空。

下面是一个简单的示例，演示了Node.js中的事件循环流程：

console.log('Start');

setTimeout(() => {
  console.log('Timeout');
}, 0);

Promise.resolve().then(() => {
  console.log('Promise');
});

process.nextTick(() => {
  console.log('Next Tick');
});

console.log('End');

输出结果为：

Start
End
Next Tick
Promise
Timeout

可以看到，与浏览器环境下的执行顺序不同，Node.js中的事件循环在微任务阶段会先执行process.nextTick的回调函数，然后执行Promise的回调函数。

线程池

Node.js使用线程池来处理一些阻塞I/O操作，例如文件I/O和网络请求等。线程池会在事件循环的宏任务阶段中调度I/O操作，并将I/O操作的结果发送给事件循环的观察者。

观察者

观察者是事件循环的一部分，负责处理I/O操作的结果。当线程池完成一个I/O操作时，它会将操作结果发送给事件循环的观察者，观察者会将操作结果放入事件队列中，等待事件循环的下一个宏任务阶段执行。

Node.js中的观察者有多种类型，例如TCP套接字观察者、文件观察者和定时器观察者等。每个类型的观察者都会负责处理特定类型的事件，例如TCP套接字观察者会处理网络请求的结果。

下面是一个简单的示例，演示了Node.js中观察者的使用：

const fs = require('fs');

console.log('Start');

fs.readFile('file.txt', (err, data) => {
  if (err) throw err;
  console.log(data.toString());
});

console.log('End');

输出结果为：

Start
End
Hello World!

可以看到，当调用fs.readFile方法时，它会被放入事件循环的宏任务队列中等待执行。当文件读取完成后，观察者会将操作结果放入事件队列中，等待事件循环的下一个宏任务阶段执行。

总结

事件循环是JavaScript异步编程的基础机制，它处理异步操作，例如网络请求、定时器和用户交互等。在事件循环中，任务被分为两种类型：宏任务和微任务。宏任务是由浏览器提供的异步任务，例如定时器、DOM事件和网络请求等，而微任务是由JavaScript引擎提供的异步任务，例如Promise的回调函数和MutationObserver的回调函数等。事件循环会将所有的异步任务放入一个事件队列中，然后依次执行队列中的任务，直到队列为空为止。在浏览器环境中，事件循环还包括渲染阶段，用于处理渲染相关的任务，例如更新DOM和执行CSS动画等。在Node.js环境中，事件循环除了包括宏任务和微任务外，还包括线程池和观察者等部分。在使用JavaScript进行异步编程时，了解事件循环的原理和使用方法非常重要。