前端泡泡

此篇文章旨在帮助理解浏览器和Node.js的事件循环机制，如有不足或错误之处，望指出。

大家好鸭，博主是一个飞向前端开发的小泡泡！

作为一个前端的开发人员，经常会与浏览器以及Node.js打交道，那么，对于事件循环机制，相信大家都不会太过陌生，但是一旦遇到了这方面的问题，有些也只是一知半解，甚至无从下手。博主看过了许多相关的公众号和博客，发现有些讲的并不是那么完善，就将这些总结在一起吧，更有利于系统性的学习。

我们知道，javascript是单线程的，在同一个时间内只能执行一个任务，那他是如何做到异步回调的呢？我会在后面给出答案，首先我们从进程和线程这两方面入手，循序渐进。

我们经常会听到CPU、线程、进程等名词，以下做一个比较形象的比喻吧。

计算机的核心是CPU，就像是一个工厂，所有的任务执行都在这里，并且是时刻运行的。

进程，代表CPU所能处理的单个任务，类似工厂里的车间，由于资源有限，工厂只能将其分配给一个车间，其他车间就必须停止工作，也就是说单个CPU只能运行一个进程（任务），通过时间片轮转调度算法，可以实现CPU运行多个进程。

线程，类似车间里的每一个工人，属于同一个车间的工人共享同一个资源，完成同一个任务。一个进程可以包含多个线程，多个线程共享同一个资源。

对于每一个计算机，一个应用程序就代表了一个进程，每个应用程序的功能模块又是由不同子进程实现的，那么这个应用程序就是“多进程”的。那么，浏览器究竟属于单进程还是多进程呢？其实很简单，只需要打开任务管理器，在浏览器打开多个tab页，便会在任务管理器显示出多个子进程，所以浏览器是多进程的。

前面提起过，一个进程可以包含多个线程，那么渲染进程也不例外，它包含了以下几个线程。

GUI渲染线程

1.负责页面的布局，绘制以及渲染。 2.在页面发生回流（重排）以及重绘时就会执行该线程。 3.与JS引擎线程互斥，避免影响绘制效果。

JS引擎线程

1.负责解析并执行相关的js脚本。 2.只存在一个JS引擎线程（单线程）。 3.与GUI渲染线程互斥,避免影响绘制效果。

事件触发线程

1.用于控制事件循环。 2.当满足相应的触发条件时，会执行相应的事件，也可能会产生新的线程。 3.将回调放入任务队列，管理任务队列。

定时器触发线程

1.setTimeout、setInterval所在线程。 2.执行相应的定时任务。 3.计时完毕后将相关的回调函数交由事件触发线程处理。

异步HTTP请求线程

1.用于处理Ajax请求。 2.请求完毕后若有回调任务，将相关的回调函数交由事件触发线程处理。

结合图一起来理解下吧~

Tip:为什么GUI渲染线程会和JS引擎线程互斥呢？ 由于JS也是可以对DOM进行操作的，若同时对页面元素进行修改，重新渲染页面后可能会出现不可预期的结果，所以两者不可同时运行。

在对浏览器的进程、线程有了基本的了解之后，我们开始讲述下关于浏览器里的事件循环。

我们知道，JS任务分为同步任务以及异步任务，同步任务会在执行栈中顺序执行，而异步任务则会放到任务队列里，等待JS引擎线程空闲之后才会将这些异步任务依次推入到执行栈中，供JS引擎线程执行。如下图：

如此执行就是我们常常听到的事件循环，也就是javascript实现异步的核心所在。

对于定时任务：当JS引擎线程执行到定时任务代码，例如setTimeout、setInterval，JS引擎线程会通知定时器触发线程，间隔一段时间触发一个回调函数，定时器触发线程接收消息后，进行计时，计时结束后，会将相应的回调函数交由事件触发线程，再将其放入任务队列中。

对于网络请求：当JS引擎线程执行到网络请求代码，例如ajax、fetch，JS引擎线程会通知异步HTTP请求线程，向服务器发送请求，请求结束后，若有回调函数，则会将相应的回调函数交由事件触发线程，再将其放入任务队列中。

用段代码解释一下~