作为浏览器脚本,JavaScript要处理各种任务,例如处理用户输入,请求网络数据,展示后台数据等等。那么,单线程的JavaScript是如何处理并发的呢?
为什么是单线程?
JavaScript主要是用于实现网页交互逻辑的,这种场景下很少有并行任务,采用多线程反而会带来复杂的同步问题。例如,多个线程同时修改同一个DOM,怎么处理同步互斥呢?所以JavaScript更适合用单线程。
为什么要有事件循环?
JavaScript是单线程的,即同一时间只能执行一个任务。这种模式的缺点是只要有一个任务耗时很长,后面的任务都必须排队等待。常见的页面卡了就是某一段JavaScript代码长时间运行,导致浏览器无法响应其它任务。
对于计算类的任务需要用的CPU,只能同步等待任务执行完。对于IO操作和网络请求等非计算类的任务根本不需要用到CPU,使用同步方式会导致线程阻塞,因此,更适合用异步方式。
为了支持异步,JavaScript需要一个任务调度机制,这就是事件循环。
事件循环是怎么实现的?
一个事件循环包含TaskQueue和EventLoop两部分。
TaskQueue是存放事件的。每当一个事件发生且该事件绑定了事件监听器,这个事件就会被加入TaskQueue。
EventLoop是处理事件的。它循环地从TaskQueue取出事件,并执行事件回调函数。
处理非计算类任务的异步API是由宿主环境或JavaScript引擎提供的,包括网络请求,IO操作和setTimeout,Promise等。
首先,function call会被加入call stack开始执行,期间调用异步API处理非计算类任务,然后继续执行call stack中的函数。
非计算类任务完成后,callback会被加入TaskQueue。
最后,执行完call stack中所有函数后,从TaskQueue取出下一个任务,进入call stack执行,重复上述过程。
上述过程用伪代码表示如下:
while(queue.wait()){
let msg = queue.next();
msg.process();
}
其中,queue.wait()会同步等待消息到达。
任务优先级
为了处理不同优先级的任务,将任务类型分为Macro Task和Micro Task。
一次事件循环,在执行完一个Macro Task后,会优先处理完所有Micro Task,再进入下一次事件循环。对于浏览器,在进入下一次事件循环之前,会执行一次UI render。
MacroTask一般是宿主环境发起,MicroTask由JavaScript引擎发起。
下面是常见的异步API:
- MacroTask
-
setTimeout
-
setInterval
-
setImmediate (Node 独有)
-
I/O
- MicroTask
-
process.nextTick (Node 独有)
-
Promise.then()
-
MutationObserver.observe
Node.js和浏览器的差别
Node.js和浏览器都是JavaScript的运行环境,但这两者的事件循环还是有所差别的。Node.js主要应用在服务器端,对性能要求更高。
首先,Node.js的事件循环对任务优先级做了更细粒度的划分。MacroTask和MicroTask都有多个不同优先级的TaskQueue。其中,MacroTask优先级最高的是timer任务,其次是IO任务,最后才是资源回收任务; MicroTask也分为高优先级的process.nextTick和其它的普通任务。
其次,Node.js的事件循环会优先执行完当前优先级的所有MacroTask,每执行完一个MacroTask就去执行所有的MicroTask,然后再执行下一个优先级的MacroTask。当然,每次执行的MacroTask数量是有限制的,超过限制就留到下次循环处理。
实际应用
-
页面假死
当一段JavaScript代码执行时间过长时,后面的任务将一直排队等待,导致浏览器无法响应其它任务,即页面假死。
一般遇到这种长任务时,可以分解成多个小任务多次执行。例如使用setTimeout()创建多个MacroTask来完成。 -
setTimeout定时精准吗。
当程序调用setTimeout()时,宿主环境会开始计时,到时间点之后会产生一个MacroTask加入事件循环。
由此可见,超时事件由宿主环境保证准时触发,但是事件循环中的MacroTask不一定能被立刻处理。
总结
JavaScript主要是用于实现网页交互逻辑的,多个线程同时执行DOM操作,需要处理复杂的同步互斥问题。所以,JavaScript更适合单线程模式。
在单线程模式下,计算类任务只能同步等待任务执行完;而非计算类任务更适合用异步方式。为了支持异步,JavaScript需要一个任务调度机制,这就是事件循环。
事件循环包含了TaskQueue和EventLoop两部分,TaskQueue是存放事件的。EventLoop是处理事件的。首先,function call会被加入call stack开始执行,期间调用异步API处理非计算类任务,然后继续执行call stack中的函数。
非计算类任务完成后,callback会被加入TaskQueue。
最后,执行完call stack中所有函数后,从TaskQueue取出下一个任务,进入call stack执行,重复上述过程。
为了处理不同优先级的任务,将任务分为Macro Task和Micro Task。处理完一个Macro Task之后,在进入下一个事件循环之前,会优先处理所有Micro Task。
Node.js和浏览器都是JavaScript的运行环境,但Node.js的事件循环对任务优先级的做了更细粒度的划分。毕竟Node.js主要应用在服务器端,对性能要求更高。