JavaScript 线程

一、进程与线程

1.进程
进程是资源（CPU、内存等）分配的基本单位，它是程序执行时的一个实例。程序运行时系统就会创建一个进程，并为它分配资源，然后把该进程放入进程就绪队列，进程调度器选中它的时候就会为它分配CPU时间，程序开始真正运行。

2.线程
线程是一条执行路径，是程序执行时的最小单位，它是进程的一个执行流，是CPU调度和分派的基本单位，一个进程可以由很多个线程组成，线程间共享进程的所有资源，每个线程有自己的堆栈和局部变量。线程由CPU独立调度执行，在多CPU环境下就允许多个线程同时运行。同样多线程也可以实现并发操作，每个请求分配一个线程来处理。

一个正在运行的软件(如迅雷)就是一个进程，一个进程可以同时运行多个任务( 迅雷软件可以同时下载多个文件，每个下载任务就是一个线程), 可以简单的认为进程是线程的集合。

线程是一条可以执行的路径。多线程就是同时有多条执行路径在同时(并行)执行。

3.进程与线程的关系
一个程序就是一个进程，而一个程序中的多个任务则被称为线程。进程是表示资源分配的基本单位，又是调度运行的基本单位。，亦即执行处理机调度的基本单位。 进程和线程的关系：

一个线程只能属于一个进程，而一个进程可以有多个线程，但至少有一个线程。线程是操作系统可识别的最小执行和调度单位。

资源分配给进程，同一进程的所有线程共享该进程的所有资源。同一进程中的多个线程共享代码段(代码和常量)，数据段(全局变量和静态变量)，扩展段(堆存储)。但是每个线程拥有自己的栈段，栈段又叫运行时段，用来存放所有局部变量和临时变量，即每个线程都有自己的堆栈和局部变量。

处理机分给线程，即真正在处理机上运行的是线程。

线程在执行过程中，需要协作同步。不同进程的线程间要利用消息通信的办法实现同步。

如果把上课的过程比作进程，把老师比作CPU，那么可以把每个学生比作每个线程，所有学生共享这个教室(也就是所有线程共享进程的资源)，上课时学生A向老师提出问题，老师对A进行解答，此时可能会有学生B对老师的解答不懂会提出B的疑问(注意：此时可能老师还没有对A同学的问题解答完毕)，此时老师又向学生B解惑，解释完之后又继续回答学生A的问题，同一时刻老师只能向一个学生回答问题(即：当多个线程在运行时，同一个CPU在某一个时刻只能服务于一个线程，可能一个线程分配一点时间，时间到了就轮到其它线程执行了，这样多个线程在来回的切换)

4.为什么要使用多线程
多线程可以提高程序的效率。

实际生活案例：村长要求喜洋洋在一个小时内打100桶水，可以喜洋洋一个小时只能打25桶水，如果这样就需要4个小时才能完成任务，为了在一个小时能够完成，喜洋洋就请美洋洋、懒洋洋、沸洋洋，来帮忙，这样4只羊同时干活，在一小时内完成了任务。原本用4个小时完成的任务现在只需要1个小时就完成了，如果把每只羊看做一个线程，多只羊即多线程可以提高程序的效率。

5.多线程应用场景
一般线程之间比较独立，互不影响
一个线程发生问题，一般不影响其它线程

二、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秒）

三、JS异步

那么，JavaScript中的异步是怎么实现的呢？那要需要说下回调和事件循环这两个概念啦

首先要先说下任务队列，我们在前面也介绍了，异步任务是不会进入主线程，而是会先进入任务队列，任务队列其实是一个先进先出的数据结构，也是一个事件队列，比如说文件读取操作，因为这是一个异步任务，因此该任务会被添加到任务队列中，等到IO完成后，就会在任务队列中添加一个事件，表示异步任务完成啦，可以进入执行栈啦~但是这时候呀，主线程不一定有空，当主线程处理完其它任务有空时，就会读取任务队列，读取里面有哪些事件，排在前面的事件会被优先进行处理，如果该任务指定了回调函数，那么主线程在处理该事件时，就会执行回调函数中的代码，也就是执行异步任务啦

单线程从从任务队列中读取任务是不断循环的，每次栈被清空后，都会在任务队列中读取新的任务，如果没有任务，就会等到，直到有新的任务，这就叫做任务循环，因为每个任务都是由一个事件触发的，因此也叫作事件循环

总的来说，JavaScript的异步机制包括以下几个步骤

（1）所有同步任务都在主线程上执行，行成一个执行栈
（2）主线程之外，还存在一个任务队列，只要异步任务有了结果，就会在任务队列中放置一个事件
（3）一旦执行栈中的所有同步任务执行完毕，系统就会读取任务队列，看看里面还有哪些事件，那些对应的异步任务，于是结束等待状态，进入执行栈，开始执行
（4）主线程不断的重复上面的第三步

那么，怎么才能实现异步编程，写出性能更好的代码呢，下面有几种方式

（1）回调函数

回调函数是实现异步编程最简单的方法啦，回调函数我们在使用ajax时应该用的很多啦，其实在使用ajax时，我们就用到了异步

var req = new XMLHttpRequest();
req.open("GET",url);
req.send(null);
req.onreadystatechange=function(){}

req.send（）方法是 AJAX 向服务器发生数据，它是一个异步任务，而 req.onreadystatechange（）属于事件回调，借由浏览器的HTTP请求线程发起对服务器的请求，在请求得到响应之后触发请求完成事件，将回调函数推入事件队列等待执行

其实像setTimeout，还有我们平时为元素绑定监听事件，和上面说的道理也是一样的

回调函数的优点是简单、容易理解和部署，缺点是不利于代码的阅读和维护，各个部分之间高度耦合（Coupling），流程会很混乱，而且每个任务只能指定一个回调函数

（2）Promise

一直以来，JavaScript处理异步都是以callback的方式，在前端开发领域callback机制几乎深入人心，近几年随着JavaScript开发模式的逐渐成熟，CommonJS规范顺势而生，其中就包括提出了Promise规范，Promise完全改变了js异步编程的写法，让异步编程变得十分的易于理解，同时Promise也已经纳入了ES6，而且高版本的chrome、firefox浏览器都已经原生实现了Promise，只不过和现如今流行的类Promise类库相比少些API

Promise包括以下几个规范

一个promise可能有三种状态：等待（pending）、已完成（fulfilled）、已拒绝（rejected）
一个promise的状态只可能从“等待”转到“完成”态或者“拒绝”态，不能逆向转换，同时“完成”态和“拒绝”态不能相互转换
promise必须实现then方法（可以说，then就是promise的核心），而且then必须返回一个promise，同一个promise的then可以调用多次，并且回调的执行顺序跟它们被定义时的顺序一致
then方法接受两个参数，第一个参数是成功时的回调，在promise由“等待”态转换到“完成”态时调用，另一个是失败时的回调，在promise由“等待”态转换到“拒绝”态时调用，同时，then可以接受另一个promise传入，也接受一个“类then”的对象或方法，即thenable对象
在使用Promise时，我们需要检测一些浏览器是否支持Promise

if(typeof(Promise)==="function") {
    console.log("支持");
}
else {
    console.log("不支持");
}

我们可以使用new Promise进行Promise的创建

function wait(time) {
    return new Promise(function(resolve,reject) {
        setTimeout(resolve,time);
    });
}

这个时候我们就可以使用Promise处理异步任务啦

wait(1000).then(function(){
    console.log(1);
})

上面这个例子表示1秒后输出1，同样的道理，我们可以使用Promise进行更加复杂的操作，关于更多的操作，就不继续说啦，关于异步的实现，其实还有其它的一些方法，但是因为上面说的这两种方法用的比较多，所以就只说上面这两种了