2019-04-29 JavaScript的事件队列

2019-04-29 本文已影响0人 KingAmo

浏览器的渲染进程

浏览器的渲染进程(默认每个Tab页面一个渲染进程，互不影响)是多线程的，这个进程有以下主要线程：

JS引擎线程
GUI渲染线程
事件触发线程
定时触发器线程
异步http请求线程

我们常说“JavaScript是单线程的”。
所谓单线程，是指在JS引擎中负责解释和执行JavaScript代码的线程只有一个，
但是实际上还存在其他的线程。例如上面提到的：处理AJAX请求的线程、处理DOM事件的线程、定时器线程、读写文件的线程(例如在Node.js中)等等。这些线程可能存在于JS引擎之内，也可能存在于JS引擎之外。

JS引擎线程

也称为JS内核，负责解析Javascript脚本，运行代码（例如著名的V8引擎就是js引擎的一种），JS引擎一直等待着事件队列(Task Queue)中任务的到来，然后加以处理，浏览器无论什么时候都只有一个JS线程在运行JS程序，所以说JavaScript是一门单线程的非阻塞的脚本语言

js引擎遇到一个异步事件（无法立刻返回结果，需要花一定时间才能返回的任务，如I/O事件）后并不会一直等待其返回结果，而是会将这个事件挂起(pending)，继续执行执行栈中的其他任务。当一个异步事件返回结果后，js会将这个事件加入事件队列(Task Queue)。被放入事件队列后不会立刻执行其回调，而是等待当前执行栈中的所有任务都执行完毕，主线程处于闲置状态时，主线程会去查找事件队列是否有任务。如果有，那么主线程会从中取出排在第一位的事件，并把这个事件对应的回调放入执行栈中，然后执行其中的同步代码...，如此反复，这样就形成了一个无限的循环。这就是这个过程被称为事件循环（Event Loop）的原因。

GUI渲染线程

负责渲染浏览器界面，解析HTML，CSS，构建DOM树和RenderObject树，布局和绘制等。
当界面需要重绘（Repaint）或由于某种操作引发回流(reflow)时，该线程就会执行

GUI渲染线程与JS引擎线程互斥

由于JavaScript是可操纵DOM的，如果在修改这些元素属性同时渲染界面（即JS线程和UI线程同时运行），那么渲染线程前后获得的元素数据就可能不一致了。

因此为了防止渲染出现不可预期的结果，浏览器设置GUI渲染线程与JS引擎为互斥的关系，当JS引擎执行时GUI线程会被挂起，GUI更新则会被保存在一个队列中等到JS引擎线程空闲时立即被执行。

JS引擎线程如果执行时间过长就会阻塞页面。

譬如，假设JS引擎正在进行巨量的计算，此时就算GUI有更新（比如用户此时有点击操作什么的），也会被保存到队列中，等待JS引擎空闲后执行。
然后，由于巨量计算，所以JS引擎很可能很久很久后才能空闲，自然会感觉到巨卡无比。

所以，要尽量避免JS执行时间过长，这样就会造成页面的渲染不连贯，导致页面渲染加载阻塞的感觉

事件触发线程

归属于浏览器而不是JS引擎，用来控制事件循环，当JS引擎执行代码块如setTimeOut时（也可来自浏览器内核的其他线程,如鼠标点击、AJAX异步请求等），会将对应任务添加到事件线程中，当对应的事件符合触发条件被触发时，该线程会把事件添加到待处理队列的队尾，等待JS引擎的处理

定时触发器线程

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

异步http请求线程

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

微任务与宏任务

以上的事件循环过程是一个宏观的表述，实际上因为异步任务之间并不相同，因此他们的执行优先级也有区别。不同的异步任务被分为两类：微任务（micro task）和宏任务（macro task）.

以下事件属于宏任务：
setInterval()
setTimeout()

以下事件属于微任务
new Promise()
new MutaionObserver()

前面我们介绍过，在一个事件循环中，异步事件返回结果后会被放到一个任务队列中。然而，根据这个异步事件的类型，这个事件实际上会被对应的宏任务队列或者微任务队列中去。并且在当前执行栈为空的时候，主线程会查看微任务队列是否有事件存在。如果不存在，那么再去宏任务队列中取出一个事件并把对应的回到加入当前执行栈；如果存在，则会依次执行队列中事件对应的回调，直到微任务队列为空，然后去宏任务队列中取出最前面的一个事件，把对应的回调加入当前执行栈...如此反复，进入循环。

我们只需记住当当前执行栈执行完毕时会立刻先处理所有微任务队列中的事件，然后再去宏任务队列中取出一个事件。同一次事件循环中，微任务永远在宏任务之前执行。