[前端]多线程在前端的应用——Javascript的线程

JavaScript 是单线程、异步、非阻塞、解释型脚本语言。JavaScript 的设计就是为了处理浏览器网页的交互（DOM操作的处理、UI动画等），决定了它是一门单线程语言。如果有多个线程，它们同时在操作 DOM，那网页将会一团糟。

1.浏览器的渲染进程包含的线程

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)

// 结果
//
//
//
//

222,333,444在555之后被输出，也就是说计时器setTimeout、http请求fetch、事件触发器onclick并没有阻塞后面的代码。那，发生了什么？

其实，JavaScript 单线程指的是浏览器中负责解释和执行 JavaScript 代码的只有一个线程，即为 JS引擎线程，但是浏览器的渲染进程是提供多个线程的，如下：

1. JS引擎线程(主线程)
2. 事件触发线程（onclick）
3. 定时触发器线程（setTimeout）
4. 异步http请求线程（fetch）
5. GUI渲染线程
6. EventLoop轮询处理线程

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

2.消息队列（任务队列）

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

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

3.1中代码的执行流程如下

步骤1：

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

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

步骤2：

2秒钟之后，setTimeout成功了

步骤3：

步骤4：

参照：https://juejin.im/post/5c2ec3b66fb9a049eb3c1012#comment