JavaScript怎么处理并发？

作为浏览器脚本，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:

1. MacroTask

• setTimeout

• setInterval

• setImmediate (Node 独有)

• I/O

2. 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数量是有限制的，超过限制就留到下次循环处理。

实际应用

1. 页面假死
   当一段JavaScript代码执行时间过长时，后面的任务将一直排队等待，导致浏览器无法响应其它任务，即页面假死。
   一般遇到这种长任务时，可以分解成多个小任务多次执行。例如使用setTimeout()创建多个MacroTask来完成。

2. 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主要应用在服务器端，对性能要求更高。

相关连接

mdn

浏览器和 Node.js 的 EventLoop 为什么这么设计？

JS 的异步机制一探