在网上看了很多关于JavaScript事件循环的文章，都对其理解的比较深入，有些比较晦涩的描述可能会对整体的理解有些影响。所以用白话简述下JS的EventLoop，对JS的事件循环有个简单明了的了解。(注：因为是白话理解，有些描述可能会不是那么准确。)

进程和线程

众所周知JS是单线程的，然后知道了因为JS是单线程的所以需要用事件循环来协助处理。
所以这里先简单的聊一下进程和线程

简述

• 进程是cpu资源分配的最小单位（是能拥有资源和独立运行的最小单位）
• 线程是cpu调度的最小单位（线程是建立在进程的基础上的一次程序运行单位，一个进程中可以有多个线程）

举个例子就是：进程是工厂，线程是工人；一个工厂可以有一个或者多个工人，同一个进程之间可以有一个或者多个线程。

浏览器的进程和线程

虽然JS是单线程的，浏览器是多进程的，JS引擎只是Renderer进程中的一个子线程。

浏览器的进程

浏览器的多进程一般包含

• Browser进程：浏览器的主进程（负责协调、主控），只有一个。
• 第三方插件进程
• GPU进程：最多一个，用于3D绘制等。（平时css中说到的GPU加速就是用到了这个进程）
• 浏览器渲染进程（浏览器内核）（Renderer进程，内部是多线程的）：默认每个Tab页面一个进程，互不影响。

在浏览器中打开一个网页相当于新起了一个进程（进程内有自己的多线程）。这样也就避免看一个页面或者一个插件Crash之后整个浏览器都会Crash掉。

浏览器渲染进程中的线程

通过上面我看可以看出来，JS引擎一定是在Renderer进程中。那么就详细描述下Renderer进程中的常用线程

• JS引擎线程：JS内核，负责处理Javascript脚本程序（例如V8引擎），平时说所的js单线程就是指的这个。
• GUI渲染线程：注意，GUI渲染线程与JS引擎线程是互斥的，当JS引擎执行时GUI线程会被挂起（相当于被冻结了），GUI更新会被保存在一个队列中等到JS引擎空闲时立即被执行。
• 事件触发线程
• 定时触发器线程
• 异步http请求线程

简述EventLoop

简单了解上面的概念后就可以丰富下EventLoop的机制了，EventLoop基本是建立在上述的线程之间的关系。

• JS引擎线程负责运行页面的执行栈，并同时管理者一个微任务队列
• 事件触发线程管理着一个事件队列(宏任务队列)和一般异步的事件回调
• 定时触发器线程管理着定时器的回调（因为JS是单线程的，无法每时每刻的去计算定时器的时间，所以需要定时触发器线程）
• 同理异步http请求是管理请求的异步回调

白话简述EventLoop的运行过程

页面加载GUI和JS线程交互处理，但这里只描述JS线程的运行过程。

1.首先执行js的同步代码(即处理执行栈)：同在处理过程中碰到异步逻辑，就将异步事件推送到对应的线程中。
如ajax请求推送到异步http请求线程，定时器就推送到定时器线程中。
特殊的是Promise的异步是被JS线程自己管理。

2.当执行栈空时，去看自己的微任务队列有没有为处理的事件，如果有就将事件的回调推送到执行栈中执行。
每当执行栈执行完之后都会去查看微任务队列
Promise的回调就是推送到JS线程下的微任务队列

3.当微任务队列也为空的时候，才回去看到任务队列中的事件，如果存在未执行的回调，则将回调推送到执行栈中。
当异步线程完成之后会将事件推送到宏任务队列中
如果在执行回到的过程中发现异步，同[1]。
当前回调执行完后视为执行栈为空，同[2]。

例题

下面就是一个例题，根据上面的流程可以得到答案！

答案是1 5 3 4 2 7 6(有意思的一点是 在控制台上输出是 1 5 3 4 undefined 2 7 6)

console.log(1)
setTimeout(function(){
    console.log(2)
    Promise.resolve().then(function(){
        console.log(7)
    })
},0)
Promise.resolve().then(function(){
    console.log(3)
    Promise.resolve().then(function(){
        console.log(4)
        
    })
    setTimeout(function(){
        console.log(6)
    },0)
})
console.log(5)