前端之JS的线程(最易懂)

时间 2019-11-07

原文原文链接

1. 前言

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

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

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

2. 浏览器

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

浏览器有不少线程，例如：安全

GUI 渲染线程bash
JS 引擎线程多线程
定时器触发线程 (setTimeout)dom
浏览器事件线程 (onclick)异步
http 异步线程函数
EventLoop轮询处理线程

...

其中，一、二、4为常驻线程

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

3. 线程与进程

什么是进程？

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

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

类别A：GUI 渲染线程

类别B：JS 引擎线程

类别C：EventLoop轮询处理线程

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

注意： 类别A和类别B是互斥的，缘由不用说了，不知道的看我上一篇文章。因此咱们下面的讨论，就不涉及类别A了，只讨论类别B、C、D之间的关系。

类别B：

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

1 var a = 2;
2 setTimeout()
3 ajax()
4 console.log()
复制代码

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

主线程运行JS代码时，会生成个执行栈，能够处理函数的嵌套，经过出栈进栈这样，这里不作过多介绍，不少文章。

消息队列（任务队列）

能够理解为一个静态的队列存储结构，非线程，只作存储，里面存的是一堆异步成功后的回调函数字符串，确定是先成功的异步的回调函数在队列的前面，后成功的在后面。

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

类别D：

定时器触发线程 (setTimeout)、http 异步线程、浏览器事件线程 (onclick)

主线程执行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，各自的线程都会保存着的，由于须要在将来的某个时候，将回调函数交给主线程去执行啊。。。

因此，这几个线程主要干两件事：

执行主线程扔过来的异步代码，并执行代码
保存回调函数，在将来的某个时刻，通知EventLoop轮询处理线程过来取相应的回调函数而后执行（下面会讲）

类别C：

EventLoop轮询处理线程

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

主线程，处理同步代码
类别D的几个异步线程，处理异步代码
消息队列，存储着异步成功后的回调函数，一个静态存储结构

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

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分别给三个线程，他们之间有些不一样

对于setTimeout代码，定时器触发线程在接收到代码时就开始计时，时间到了将回调函数扔进队列。
对于ajax代码，http 异步线程当即发起http请求，请求成功后将回调函数扔进队列。
对于dom.onclick，浏览器事件线程会先监听dom，直到dom被点击了，才将回调函数扔进队列。

4. 整体实例

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

复制代码