真正了解event loop

it2026-08-22  3

Event Loop机制是什么?

在开始介绍event loop之前,还需要了解两个概念,宏任务和微任务。

宏任务和微任务是异步任务的两种分类: 宏任务包括:script,setTimeout/setInterval等 微任务包括:Promise,Object.observer等

了解完之后,我们来看看它到底是个啥。

Event loop,按照字面意思翻译就是 事件循环。事件,就是处理异步任务,处理宏任务和微任务,而循环就是循环去出处理。

我们先来看张图:(这是浏览器的event loop)

首先执行的是script任务,也就是全局任务,属于宏任务。script任务执行完后,开始执行所有的微任务微任务执行完毕,再取任务队列中的一个宏任务执行

还是没懂,那我们就来看看下面一个例子:

console.log(1); setTimeout(function(){ console.log(2); }, 0); new Promise(function(resolve) { resolve(3); }).then((res) => { console.log(res); }); console.log(4);

我们来看看这段代码的输出:

1 4 3 2

为什么呢? 1. 首先执行同步任务,会输出1,4 2. 同步任务执行完,开始判断微任务是否为空。显然现在还有一个微任务Promise,那么开始执行Promise,输出3 3. 执行完Promise,微任务清空,微任务队列也为空了,然后重新渲染,再次判断任务队列中是否有任务。 4. 此时任务队列中有setTimeout宏任务,开始执行,于是最后输出2

(注意:Promise相当于会立即执行,所以说如果Promise内部有打印,会跟这同步任务流一块按顺序打印输出的)

这就是一个完整的过程。

一个Event loop有一个或多个任务队列,每一个Event loop只有一个微任务队列。 以上就是Event loop。

最新回复(0)