在网上看了很多关于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)