JS EventLoop事件循环

前言

上篇文章我们讲的进程与线程之间的关系，那么作为一个前端工程师为什么要去了解这个呢，是因为我学前端不是科班出身，当我听到前辈一直在说js是单线程的时候，我始终不理解这个“单线程”到底是什么意思，然后通过上一篇文章我也就知道了这个单线程意思。js线程（处理js的工人）面对那么多的事件他又是怎么处理的呢？下面我们将一块去分析一下。

1.渲染进程包含哪些线程

渲染进程的作用：将HTML,JS,CSS转换为可交互的界面。

1.1 GUI渲染线程

负责渲染浏览器界面，解析HTML，CSS，构建DOM树和RenderObject树，布局和绘制等，当界面需要重绘（Repaint）或由于某种操作引发回流(reflow)时，该线程就会执行。
注意⚠️：GUI渲染线程与JS引擎线程是互斥的，当JS引擎执行时GUI线程会被挂起（相当于被冻结了），GUI更新会被保存在一个队列中等到JS引擎空闲时立即被执行。

1.2 JS引擎线程

（例如V8引擎）JS引擎线程负责解析Javascript脚本，运行代码。JS引擎一直等待着任务队列中任务的到来，然后加以处理，一个Tab页（renderer进程）中无论什么时候都只有一个JS线程在运行JS程序。（这个就是处理js的工人我们找到他了）
注意：GUI渲染线程与JS引擎线程是互斥的，所以如果JS执行的时间过长，这样就会造成页面的渲染不连贯，导致页面渲染加载阻塞。

1.3 事件触发线程

归属于浏览器而不是JS引擎，用来控制事件循环。当JS引擎执行代码块如setTimeOut时（也可来自其他线程,如鼠标点击、AJAX异步请求等），会将对应任务添加到对应的线程中。

1.4 定时器触发线程

传说中的setInterval与setTimeout所在线程
浏览器定时计数器并不是由JavaScript引擎计数的,（因为JavaScript引擎是单线程的, 如果处于阻塞线程状态就会影响记计时的准确）
因此通过单独线程来计时并触发定时（计时完毕后，添加到事件队列中，等待JS引擎空闲后执行）

1.5 异步http请求线程

在XMLHttpRequest连接后是通过浏览器新开一个线程请求
将检测到状态变更时，如果设置有回调函数，异步线程就产生状态变更事件，将这个回调再放入事件队列中。再由JavaScript引擎执行

1.6 合成线程

在GUI渲染线程后执行，将GUI渲染线程生成的带绘制列表转换为位图。

1.7 IO线程

用来和其他进程进行通信

3.从实际出发去了解它们之间的关系

下面是一段js代码，我们看下js引擎是怎么处理它们的？

//先把它们给区分一下

 var a = 2;//同步代码

 setTimeout(fun A) //异步代码

 ajax(fun B) //异步

 console.log() //同步

 dom.onclick(func C) //同步 等待用户点击dom后触发

图中 3 、9行代码是同步代码直接在js引擎线程（主线程中）执行，第五行setTimeout异步代码，上面我们说了有专门处理它的线程交给定时器触发线程，再接着碰到ajax异步请求，交给异步http请求线程，再接着dom.onclick交给事件触发进程，等待用户点击触发。
现在我们知道了，现在分类分完之后也把任务给了相应的线程（工人），那么后续操作是怎么样呢，总不能把任务分出去就完事了吧。这时候任务队列上场了。

3.1 EventLoop事件循环

通过上面我们已经了解到
● js引擎（主线程）
处理同步代码
● 异步线程（setTimeout，http请求）
处理异步代码
● 任务队列
存放未来要执行的回调函数
那么他们三个是怎么交流的呢？是怎么告诉它你帮我执行异步代码，告诉任务队列我把代码先放到你那里存着？
这时候就用到了事件循环扮演的一个中介的身份。

这就是整个js执行流程，整个过程是一直重复循环的下面说几个注意点：
● 只有主线程的同步代码都执行完了，才会去队列里看看还有啥要执行的没。
● 如果主线程里执行的代码复杂需要很长时间，这时队列里的函数们就排着，等着主线程啥时执行完，再来队列里取
所以从这里能看出来，对于setTimeout，setInterval的定时，不一定完全按照设想的时间的，因为主线程里的代码可能复杂到执行很久，所以会发生你定时3秒后执行，实际上是3.5秒后执行（主线程花费了0.5秒）

总结

通过这篇文章我们知道了渲染进程中有哪些线程，js的执行流程以及事件循环机制。下面一期我们将在进一步深入探索 ES的新标准中的微任务那么这时候的执行顺序又是怎么样的呢？