JS事件循环详解

前言

进程

程序运行需要其专属的内存空间，可以把这块内存空间简单理解为进程。

下图每个颜色块都可视为一个应用，每个应用至少应有一个进程，进程之间相互独立，即使想要通信，也需要双方同意。

在这里插入图片描述

线程

有了进程后，就可以执行程序的代码了。运行代码的「人」称为「线程」。

一个进程至少有一个线程，一个程序开始运行后会自动开启一个线程，该线程称为主线程。

如果程序需要同时执行多块代码，主线程就会启动更更多的线程来执行代码。

浏览器是个多进程多线程的程序

为了避免相互影响，减少连环崩溃的几率，当启动浏览器后，它会自动启动多个进程。

可以通过浏览器自带的任务管理器中查看当前的所有进程。

在这里插入图片描述

浏览器中主要的进程：

浏览器进程

主要负责界面显示（例如浏览器操作栏、主题…）、用户交互、子进程管理等。
网络进程

负责加载网络资源
渲染进程

渲染进程启动后，会自动开启渲染主线程，主线程主要负责执行HTML、CSS、JS代码。

默认情况下，浏览器会为每个标签页创建一个渲染进程，以保证每个标签页间互不影响。

注意：Chrome浏览器当前的默认模式仍为Process-per-Tab(一个标签页对应一个进程)，但Chrome官方说明文档中表示，未来会使用site-per-process模式(一个站点对应一个进程)，例如多个标签页访问同一站点，只会对应一个进程。

事件循环会发生在渲染进程的主线程中，那么渲染进程做了什么操作呢

事件循环

渲染主线程与事件循环

渲染进程的主线程中主要进行了如下处理：

解析 HTML
解析 CSS
计算样式
布局
处理图层
每秒把页面画60次
执行全局 JS 代码
执行事件处理函数
执行定时器的回调函数
…

为什么渲染进程不适用多个线程来分别处理如上事情

那么渲染主线程如何调度任务？例如

该线程正在执行 JS 函数，恰巧用户又触发了点击事件，那么二者执行的先后顺序该如何处理
浏览器进程通知渲染主线程，用户点击了按钮，恰好此时某个回调函数正要执行，又该如何处理

此时每个任务就需要排队，每个任务都会在消息队列中排队，当主线程中的任务执行完毕后，需要依次执行消息队列中的任务。

在这里插入图片描述

渲染主线程初始会进入无限循环模式
每次循环都会查看消息队列中是否有待处理的任务，如果有则取出队列中的第一个任务执行，执行完毕后再次循环，如果队列中没有任务，则主线程会进入休眠模式。
其他线程（包括其他进程的线程<例如浏览器进程中负责用户交互的线程>）可以随时向消息队列中添加任务，这个新任务会添加到消息队列末尾，如果添加前消息队列中没有任务，那么会唤醒渲染主线程重新进入无限循环模式。

以上整个流程，称为事件循环，也叫消息循环。

同步带来的阻塞问题

以上说明为同步任务的执行方式，即每个任务执行完毕后再去执行下一个任务，但是

有些任务不是立即就执行的，例如定时器的回调函数、网络通信后的函数、用户操作后的函数…

如果让渲染主线程等待这些任务的时机到达后再去执行，就会导致渲染主线程长期处于阻塞状态，阻塞期间，主线程不会执行任何操作，给用户造成一种视觉上的卡死。

在这里插入图片描述

因此需要把这些任务变成异步任务

异步任务

渲染主线程处理异步任务时，不会等待其触发，而是通知计时线程开始计时，然后立即结束当前任务（继续去消息队列取下一个任务执行），计时线程计时结束后，会将异步任务的回调函数处理为一个新的任务，并放入消息队列末尾。

在这里插入图片描述

并非只有同步会造成阻塞

即使是异步任务也有可能造成阻塞，比如JS函数中等待但未进行运算。以下代码中，事件处理函数是异步的，点击按钮后可以发现3秒后页面内容才发生变化，给用户一种「卡死」的感受。

<h1>TianBenchu</h1>
<button>changeName</button>
<script>var h1 = document.querySelector('h1')var btn = document.querySelector('button')// 一定期间内不进行任何操作function delay(duration) {var start = Date.now()while (Date.now() - start < duration) {}}btn.onclick = function () {h1.textContent = '田本初'delay(3000)}
</script>

事件循环分析如下：

浏览器进程中的交互线程捕捉到用户点击了按钮，将该事件的回调函数封装为一个任务添加到了消息队列的末尾，唤醒了渲染主线程的休眠模式（由于在此操作前消息队列中没有任务，所以渲染主线程进入了休眠模式）
渲染主线程取出消息队列中的第一条任务来执行
渲染主线程执行点击事件任务时，操作dom会产生绘制任务，然后执行delay函数，该函数会等待3秒，3秒后，点击事件任务结束。渲染主线程才会去消息队列取出绘制任务，所以页面内容没有立即发生改变。

在这里插入图片描述

任务的优先级

任务本身是没有优先级的，但是消息队列有优先级。

其实消息队列并不止一个，不同类型的任务会被排进不同的消息队列。

W3C 最新解释中，抛弃了原先宏任务和微任务的说法，而是：

每个任务都有一个任务类型，同一个类型的任务必须在一个队列，不同类型的任务可以分属于不同的队列。
在一次事件循环中，浏览器可以根据实际情况从不同的队列中取出任务执行。
浏览器必须准备好一个微队列，微队列中的任务优先所有其他任务执行，微队列
不再使用宏队列的说法

在目前Chrome的实现中，至少包含了如下队列：

微队列：存放需要最快执行的任务，优先级「最高」
交互队列：用于存放用户交互的处理，优先级「高」
延时队列：用于存放定时器的回调，优先级「中」

`验证没有宏队列说法`

示例

<button id="begin">开始</button>
<button id="interaction">添加交互任务</button>// 等待函数 期间不进行操作 以确保异步任务已经进入队列
function delay(duration) {var start = Date.now()while (Date.now() - start < duration) { }
}function addDelay() {console.log('添加延时队列')setTimeout(() => {console.log('延时队列执行')}, 100)delay(2000)
}function addInteraction() {console.log('添加交互队列')interaction.onclick = function () {console.log('交互队列执行')}delay(2000)
}begin.onclick = function () {addDelay()addInteraction()console.log('===========')
}

点击开始按钮，看到控制台打印出「添加交互队列」后快速点击添加交互任务按钮，可以发现打印并非传统宏队列说法所述先入队列的任务先执行。

在这里插入图片描述

传统宏队列错误分析：

点击开始按钮，开始执行开始按钮的回调函数
先执行addDelay()，打印「添加延时队列」，处理定时器回调，将其交给计时线程开始计时
执行addDelay()中的delay(2000)，执行期间计时线程计时定时器的100毫秒已经到了，定时器回调函数先进入宏队列，delay(2000)两秒后执行结束，至此addDelay()处理完毕
开始执行addInteraction()，打印「添加交互队列」，注册添加交互任务按钮的点击事件，delay(2000)开始等待两秒
等待的两秒期间触发添加交互任务按钮的点击事件，将回调函数封装为任务**加入宏队列**
两秒后addInteraction()结束，打印「===========」
开始按钮的回调函数执行完毕
渲染主线程去宏队列中寻找任务，按照其说法应该先打印「延时队列执行」再打印「交互队列执行」，但事实与其描述相反

分析正确流程：

渲染主线程开始处理全局JS，解析JS完毕，未触发任何函数
点击开始按钮，回调函数封装为任务加入交互队列，渲染主线程取出该任务开始执行
开始执行开始按钮的回调函数
先执行addDelay()，打印「添加延时队列」，处理定时器回调，将其交给计时线程开始计时
执行addDelay()中的delay(2000)，执行期间计时线程计时定时器的100毫秒已经到了，定时器回调函数进入延时队列，delay(2000)两秒后执行结束，至此addDelay()处理完毕
开始执行addInteraction()，打印「添加交互队列」，注册添加交互任务按钮的点击事件，delay(2000)开始等待两秒
等待的两秒期间触发添加交互任务按钮的点击事件，将回调函数封装为任务**加入交互队列**
两秒后addInteraction()结束，打印「===========」
开始按钮的回调函数执行完毕
渲染主线程根据队列优先级，先执行交互队列中的任务并打印「交互队列执行」，再执行延时队列的任务并打印「延时队列执行」

上述案例可以证明，队列不止宏队列和微队列，传统宏队列的说法的不准确的，其实有很多队列，渲染主线程会根据他们的优先级，从中取出任务去执行。

添加任务到微队列

常见的方式如：Promise的then函数、MutationObserver

总结

由于浏览器复杂度急剧上升，原先宏任务与微任务的说法已经不适用，队列也不止宏队列和微队列两个，W3C不再使用宏队列的说法，但微队列仍存在。
不同类型的任务会进入不同的队列，渲染主线程根据队列优先级从队列中取出任务并执行。
但微队列中的任务优先级高于其他任何队列（包括绘制任务）。
任务没有优先级，但队列有。

事件循环面试题

一、如下代码输出

setTimeout(()=>{console.log(1)
},1000)Promise.resolve().then(()=>{console.log(2)
})console.log(3)

分析渲染主线程的执行顺序：

运行代码，开始解析全局JS，从上至下依次执行代码
定时器部分代码执行完毕，将回调函数加入延时队列
进入Promise部分代码，执行后将其加入微队列
最后执行console.log(3)，同步代码直接打印。全局JS已经完全解析完毕，此时全局JS任务结束
根据优先级去队列中寻找下一个执行任务
微队列中有任务，最先执行，即打印了2
渲染主线程执行完毕，再次根据优先级寻找待执行任务，此时找到了延时队列中的任务
执行延时队列中的任务，打印1

答案： 3 2 1

二、如下代码输出

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

分析渲染主线程：

运行代码，开始解析全局JS，从上至下依次执行代码
定义函数a部分解析结束
定时器部分代码解析结束，将回调函数交给延时队列，延时队列将该函数处理为一个定时任务
Promise部分代码解析结束，将then中函数交给微队列，微队列会将该函数处理为一个微任务
解析console.log(5)，控制台打印5
至此全局JS已经全部解析完毕
根据优先级寻找待执行任务，发现Promise微任务并执行
执行a函数，打印1，Promise.then是微任务，将其放入微队列
根据优先级寻找待执行任务，发现Promise微任务并执行，打印2
根据优先级寻找待执行任务，发现定时任务并执行，打印3，发现微任务，放入微队列
根据优先级寻找待执行任务，发现Promise微任务并执行，打印4

答案：5 1 2 3 4

总结

单线程是异步产生的原因
事件循环是异步的实现方式

如何理解异步

JS是一门单线程的语言，这是因为它运行在浏览器的渲染主线程中，而渲染主线程只有一个。
渲染主线程承担着诸多的工作，渲染页面、执行 JS、解析 HTML CSS… 都在其中运行。
使用同步的方式，极有可能导致主线程产生阻塞，从而导致消息队列中的很多其他任务无法得到执行。这样一来，一方面会导致繁忙的主线程白白的消耗时间，另一方面导致页面无法及时更新，给用户造成卡死现象。
浏览器采用异步的方式来避免。具体做法是当某些任务发生时，比如计时器、网络、事件监听，主线程将任务交给其他线程去处理，自身立即结束任务的执行，转而执行后续代码。当其他线程完成时，将事先传递的回调函数包装成任务，加入到消息队列的末尾排队，等待主线程调度执行。
在这种异步模式下，浏览器永不阻塞，从而最大限度的保证了单线程的流畅运行。

什么是JS的事件循环

事件循环又叫做消息循环，是浏览器渲染主线程的工作方式。
在 Chrome 的源码中，它开启一个不会结束的 for 循环，每次循环从消息队列中取出第一个任务执行，而其他线程只需要在合适的时候将任务加入到队列末尾即可。
过去把消息队列简单分为宏队列和微队列，这种说法目前已无法满足复杂的浏览器环境，取而代之的是一种更加灵活多变的处理方式。
根据 W3C 官方的解释，每个任务有不同的类型，同类型的任务必须在同一个队列，不同的任务可以属于不同的队列。不同任务队列有不同的优先级，在一次事件循环中，由浏览器根据队列优先级自行决定取哪一个队列的任务。但浏览器必须有一个微队列，微队列的任务一定具有最高的优先级，必须优先调度执行。