JavaScript 事件循环：从起源到浏览器再到 Node

外部队列（Task Queue [1]），顾名思义就是 JavaScript 外部的事件的队列，这里我们可以先列举一下浏览器中这些外部事件源（Task Source），他们主要有：

• DOM 操作 (页面渲染)

• 用户交互 (鼠标、键盘)

• 网络请求 (Ajax 等)

• History API 操作

• 定时器 (setTimeout 等) [2]

可以观察到，这些外部的事件源可能很多，为了方便浏览器厂商优化，HTML 标准中明确指出一个事件循环由一个或多个外部队列，而每一个外部事件源都有一个对应的外部队列。不同事件源的队列可以有不同的优先级（例如在网络事件和用户交互之间，浏览器可以优先处理鼠标行为，从而让用户感觉更加流程）。

▐  内部队列

内部队列（Microtask Queue），即 JavaScript 语言内部的事件队列，在 HTML 标准中，并没有明确规定这个队列的事件源，通常认为有以下几种：

• Promise 的成功 (.then) 与失败 (.catch)

• MutationObserver

• Object.observe (已废弃)

▐  处理模型

在标准定义中事件循环的步骤比较复杂，这里我们简单描述一下这个处理过程：

1. 从外部队列中取出一个可执行任务，如果有则执行，没有下一步。

2. 挨个取出内部队列中的所有任务执行，执行完毕或没有则下一步。

3. 浏览器渲染。

▐  案例分析

根据上述的处理模型，我们可以来看以下例子：

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’);

输出结果：

script start

script end

promise1

promise2

setTimeout

对应的处理过程则是：

1. 执行 console.log （输出 script start）

2. 遇到 setTimeout 加入外部队列

3. 遇到两个 Promise 的 then 加入内部队列

4. 遇到 console.log 直接执行（输出 script end）

5. 内部队列中的任务挨个执行完 （输出 promise1 和 promise2）

6. 外部队列中的任务执行 （输出 setTimeout）

只要理解了外部队列与内部队列的概念，再看这类问题就会变得很简单，我们再简单扩展看看：

setTimeout(() => {

console.log(‘setTimeout1’)

})

Promise.resolve().then(() => {

console.log(‘promise1’)

})

setTimeout(() => {

console.log(‘setTimeout2’)

})

Promise.resolve().then(() => {

console.log(‘promise2’)

})

Promise.resolve().then(() => {

console.log(‘promise3’)

})

console.log(‘script end’);

结果输出：

script end

promise1

promise2

promise3

setTimeout1

setTimeout2

可以发现加入内部队列的顺序和时间虽然后差异，但是轮到内部队列执行的时候，一定会先全部执行完内部队列才会继续往下走去执行外部队列的任务。

最后我们再看一个引入了 HTML 渲染的例子：

通过这个例子，我们就可以发现，渲染过程很明显分成三个阶段：

1. JavaScript 执行完毕 innerText 首先加上 [end 10001]

2. 内部队列：Promise 的 then 全部任务执行完毕，往 innerText 上追加了很长一段字符串

3. HTML 渲染：1 和 2 追加到 innerText 上的内容同时渲染

4. 外部队列：挨个执行 setTimeout 中追加到 innerText 的内容

5. HTML 渲染：将 4 中的内容渲染。

6. 回到第 4 步走外部队列的流程（内部队列已清空）

▐  script 事件是外部队列

有的同学看完上面的几个例子之后可能有个问题，为什么 JavaScript 代码执行到 script end 之后，是先执行内部队列然后再执行外部队列的任务？

这里不得不把上文总出现过的 HTML 事件循环标准 再拉出来一遍：

To coordinate events, user interaction, scripts, rendering, networking, and so forth, user agents must use event loops as described in this p…

看到这里，大家可能就反应过来了，scripts 执行也是一个事件，我们只要归类一下就会发现 JavaScript 的执行也是一个浏览器发起的外部事件。所以本质的执行顺序还是：

1. 一次外部事件

2. 所有内部事件

3. HTML 渲染

4. 回到到 1

---

---

浏览器与 Node.js 的事件循环差异

---

---

根据本文开头我们讨论的事件循环起源，很容易理解为什么浏览器与 Node.js 的事件循环会存在差异。如果说浏览端是将 JavaScript 集成到 HTML 的事件循环之中，那么 Node.js 则是将 JavaScript 集成到 libuv 的 I/O 循环之中。

简而言之，二者都是把 JavaScript 集成到他们各自的环境中，但是 HTML (浏览器端) 与 libuv (服务端) 面对的场景有很大的差异。首先能直观感受到的区别是：

1. 事件循环的过程没有 HTML 渲染。只剩下了外部队列和内部队列这两个部分。

2. 外部队列的事件源不同。Node.js 端没有了鼠标等外设但是新增了文件等 IO。

3. 内部队列的事件仅剩下 Promise 的 then 和 catch。

至于内在的差异，有一个很重要的地方是 Node.js （libuv）在最初设计的时候是允许执行多次外部的事件再切换到内部队列的，而浏览器端一次事件循环只允许执行一次外部事件。这个经典的内在差异，可以通过以下例子来观察：

setTimeout(()=>{

console.log(‘timer1’);

Promise.resolve().then(function() {

console.log(‘promise1’);

});

});

setTimeout(()=>{

console.log(‘timer2’);

Promise.resolve().then(function() {

console.log(‘promise2’);

});

});

这个例子在浏览器端执行的结果是 timer1 -> promise1 -> timer2 -> promise2，而在 Node.js 早期版本（11 之前）执行的结果却是 timer1 -> timer2 -> promise1 -> promise2。

究其原因，主要是因为浏览器端有外部队列一次事件循环只能执行一个的限制，而在 Node.js 中则放开了这个限制，允许外部队列中所有任务都执行完再切换到内部队列。所以他们的情况对应为：

▐  浏览器端

1. 外部队列：代码执行，两个 timeout 加入外部队列

2. 内部队列：空

3. 外部队列：第一个 timeout 执行，promise 加入内部队列

4. 内部队列：执行第一个 promise

5. 外部队列：第二个 timeout 执行，promise 加入内部队列

6. 内部队列：执行第二个 promise

▐  Node.js 服务端

1. 外部队列：代码执行，两个 timeout 加入外部队列

2. 内部队列：空

3. 外部队列：两个 timeout 都执行完

4. 内部队列：两个 promise 都执行完

虽然 Node.js 的这个问题在 11 之后的版本里修复了，但是为了继续探究这个影响，我们引入一个新的外部事件 setImmediate。这个方法目前是 Node.js 独有的，浏览器端没有。

setImmediate 的引入是为了解决 setTimeout 的精度问题，由于 setTimeout 指定的延迟时间是毫秒（ms）但实际一次时间循环的时间可能是纳秒级的，所以在一次事件循环的多个外部队列中，找到某一个队列直接执行其中的 callback 可以得到比 setTimeout 更早执行的效果。我们继续以开始的场景构造一个例子，并在 Node.js 10.x 的版本上执行（存在一次事件循环执行多次外部事件）：

setTimeout(()=>{

console.log(‘setTimeout1’);

Promise.resolve().then(() => console.log(‘promise1’));

});

setTimeout(()=>{

console.log(‘setTimeout2’);

Promise.resolve().then(() => console.log(‘promise2’));

});

setImmediate(() => {

console.log(‘setImmediate1’);

Promise.resolve().then(() => console.log(‘promise3’));

});

setImmediate(() => {

console.log(‘setImmediate2’);

Promise.resolve().then(() => console.log(‘promise4’));

});

输出结果：

setImmediate1setImmediate2promise3promise4setTimeout1setTimeout2promise1

promise2

根据这个执行结果 [3]，我们可以推测出 Node.js 中的事件循环与浏览器类似，也是外部队列与内部队列的循环，而 setImmediate 在另外一个外部队列中。

接下来，我们再来看一下当 Node.js 在与浏览器端对齐了事件循环的事件之后，这个例子的执行结果为：

setImmediate1

promise3

setImmediate2

promise4

setTimeout1

promise1

setTimeout2

最后

自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。

因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！不论你是刚入门Android开发的新手，还是希望在技术上不断提升的资深开发者，这些资料都将为你打开新的学习之门！

如果你觉得这些内容对你有帮助，需要这份全套学习资料的朋友可以戳我获取！！

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！
etTimeout1

promise1

setTimeout2

最后

自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。

因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

[外链图片转存中…(img-BB1MfY0s-1715464314775)]

[外链图片转存中…(img-qbaPBpXS-1715464314776)]

[外链图片转存中…(img-ISqEjVCf-1715464314776)]

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！不论你是刚入门Android开发的新手，还是希望在技术上不断提升的资深开发者，这些资料都将为你打开新的学习之门！

如果你觉得这些内容对你有帮助，需要这份全套学习资料的朋友可以戳我获取！！

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！