彻底明白JS线程

很多文章在介绍线程以及线程之间的关系，都存在着脱节的现象。还有的文章过于广大，涉及到了内核，本文希望以通俗易懂的话去描述晦涩的词语，可能会和实际有一丢丢的出入，但是更易理解。

我们都知道JS是单线程的，即js的代码只能在一个线程上运行，也就说，js同时只能执行一个js任务，但是为什么要这样呢？这与浏览器的用途有关，JS的主要用途是与用户互动和操作DOM。设想一段JS代码，分发到两个并行互不相关的线程上运行，一个线程在DOM上添加内容，另一个线程在删除DOM，那么会发生什么？以哪个为准？所以为了避免复杂性，JS从一开始就是单线程的，以后也不会变。

这里我们已经知道了，一段JS代码只能在一个线程从上到下的执行，但是我们遇到setTimeout或者ajax异步时，也没有等待啊，往下看。

1. 浏览器

既然JS是单线程的，那么诸如onclick回调，setTimeout，Ajax这些都是怎么实现的呢？是因为浏览器或node（宿主环境）是多线程的，即浏览器搞了几个其他线程去辅助JS线程的运行。

浏览器有很多线程，例如：

1、GUI 渲染线程

2、JS 引擎线程

3、定时器触发线程 (setTimeout)

4、浏览器事件线程 (onclick)

5、http 异步线程

6、EventLoop轮询处理线程

7、...

其中，1、2、4为常驻线程

接下来，我们对这些线程进行分类。

2. 线程与进程

什么是进程？

我们可以在电脑的任务管理器中查看到正在运行的进程，可以认为一个进程就是在运行一个程序，比如用浏览器打开一个网页，这就是开启了一个进程。但是比如打开3个网页，那么就开启了3个进程，我们这里只研究打开一个网页即一个进程。

一个 进程 的运行，当然需要很多个 线程 互相配合，比如打开QQ的这个进程，可能同时有接收消息线程、传输文件线程、检测安全线程......所以一个网页能够正常的运行并和用户交互，也需要很多个线程之间相互配合，而其主要的一些线程，刚才在上面已经列出来了，分类：

类别A：GUI 渲染线程

类别B：JS 引擎线程

类别C：EventLoop轮询处理线程

类别D：其他线程，有 定时器触发线程 (setTimeout)、http 异步线程、浏览器事件线程 (onclick)等等。

注意：类别A和类别B是互斥的，js语言设定js引擎与GUI引擎是互斥的，也就是说GUI引擎在渲染时会阻塞js引擎计算。原因很简单，如果在GUI渲染的时候，js改变了dom，那么就会造成渲染不同步.。下面的讨论，就不涉及类别A了，只讨论类别B、C、D之间的关系。

类别B：

JS 引擎线程，我们把它称为 主线程 ，它是干嘛的？即运行JS代码的那个线程（不包括异步的那些代码），比如：

1 var a = 2;

2 setTimeout()

3 ajax()

4 console.log()

第1、4行代码是同步代码，直接在主线程中运行；第2、3行代码交给其他线程运行。

主线程运行JS代码时，会生成个 执行栈 ，可以处理函数的嵌套，通过出栈进栈这样，这里不做过多介绍，很多文章。

消息队列（任务队列）

可以理解为一个静态的队列存储结构，非线程，只做存储，里面存的是一堆异步成功后的回调函数，肯定是先成功的异步的回调函数在队列的前面，后成功的在后面。

注意：是异步成功后，才把其回调函数扔进队列中，而不是一开始就把所有异步的回调函数扔进队列。比如setTimeout 3秒后执行一个函数，那么这个函数是在3秒后才进队列的。

类别D：

JS代码中，碰到异步代码，就被放入相对应的线程中去执行，比如：

1 var a = 2;

2 setTimeout(fun A)

3 ajax(fun B)

4 console.log()

5 dom.onclick(func C)

主线程在运行这段代码时，碰到2 setTimeout(fun A)，把这行代码交给 定时器触发线程 去执行

碰到3 ajax(fun B)，把这行代码交给 http 异步线程 去执行

碰到5 dom.onclick(func C) ，把这行代码交给 浏览器事件线程 去执行

注意：这几个异步代码的回调函数fun A，fun B，fun C，各自的线程都会保存着的，因为需要在未来执行啊。。。

所以，这几个线程主要干两件事：

1、执行主线程扔过来的异步代码，并执行代码

2、保存着回调函数，异步代码执行成功后，通知 EventLoop轮询处理线程 过来取相应的回调函数

类别C：

EventLoop轮询处理线程

上面我们已经知道了，有3个东西

1、主线程，处理同步代码

2、类别D的线程，处理异步代码

3、消息队列，存储着异步成功后的回调函数，一个静态存储结构

这里再对消息队列说一下，其作用就是存放着未来要执行的回调函数，比如

setTimeout(() => {

console.log(1)

}, 2000)

setTimeout(() => {

console.log(2)

}, 3000)

在一开始，消息队列是空的，在2秒后，一个 () => { console.log(1) } 的函数进入队列，在3秒后，一个 () => { console.log(2) }的函数进入队列，此时队列里有两个元素，主线程从队列头中挨个取出并执行。

到这里我们就知道了，这3个东西大概的作用、关系和流程，但是，它们3个互相怎么交流的？这需要一个中介去专门去沟通它们3个，而这个中介，就是 EventLoop轮询处理线程

既然叫轮询了，那么肯定是不断的循环的去交流和沟通

图画的有点丑，但是大概是这个意思，从主线程那里顺时针的看。

注意：整个的流程是循环往复的。

注意：只有主线程的同步代码都执行完了，才会去队列里看看还有啥要执行的没

小区别

在异步线程类别D那里，还有一些小区别：

主线程把setTimeout、ajax、dom.onclick分别给三个线程，他们之间有些不同

1、对于setTimeout代码，定时器触发线程在接收到代码时就开始计时，时间到了将回调函数扔进队列。

2、对于ajax代码，http 异步线程立即发起http请求，请求成功后将回调函数扔进队列。

3、对于dom.onclick，浏览器事件线程会先监听dom，直到dom被点击了，才将回调函数扔进队列。

总体实例

var a = 111;

setTimeout(function() {

console.log(222)

}, 2000)

fetch(url) // 假设该http请求花了3秒钟

.then(function() {

console.log(333)

})

dom.onclick = function() { // 假设用户在4秒钟时点击了dom

console.log(444)

}

console.log(555)

// 结果

555

222

333

444

步骤1：

主线程只执行了var a = 111;和console.log(555)两行代码，其他的代码分别交给了其他三个线程，因为其他线程需要2、3、4秒钟才成功并回调，所以在2秒之前，主线程一直在空闲，不断的探查队列是否不为空。

此时主线程里其实已经是空的了（因为执行完那两行代码了）

步骤2：

2秒钟之后，setTimeout成功了

步骤3：

步骤4：

这三个图忘画 EventLoop 了，你应该知道在哪。。。

注意

图里的队列里都只有一个回调函数，实际上有很多个回调函数，如果主线程里执行的代码复杂需要很长时间，这时队列里的函数们就排着，等着主线程啥时执行完，再来队列里取

所以从这里能看出来，对于setTimeout，setInterval的定时，不一定完全按照设想的时间的，因为主线程里的代码可能复杂到执行很久，所以会发生你定时3秒后执行，实际上是3.5秒后执行（主线程花费了0.5秒）