[前端]多线程在前端的应用——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)
// 结果
//555
//222
//333
//444
222,333,444在555之后被输出，也就是说计时器setTimeout、http请求fetch、事件触发器onclick并没有阻塞后面的代码。那，发生了什么？
其实，JavaScript 单线程指的是浏览器中负责解释和执行 JavaScript 代码的只有一个线程，即为 JS引擎线程，但是浏览器的渲染进程是提供多个线程的，如下：
- JS引擎线程(主线程)
- 事件触发线程（onclick）
- 定时触发器线程（setTimeout）
- 异步http请求线程（fetch）
- GUI渲染线程
- EventLoop轮询处理线程
其中，1、2、4为常驻线程
2.消息队列（任务队列）
可以理解为一个静态的队列存储结构，非线程，只做存储，里面存的是一堆异步成功后的回调函数字符串，肯定是先成功的异步的回调函数在队列的前面，后成功的在后面。
注意：是异步成功后，才把其回调函数扔进队列中，而不是一开始就把所有异步的回调函数扔进队列。比如setTimeout 3秒后执行一个函数，那么这个函数是在3秒后才进队列的。
3.1中代码的执行流程如下
步骤1：
主线程只执行了var a = 111;和console.log(555)两行代码，其他的代码分别交给了其他三个线程，因为其他线程需要2、3、4秒钟才成功并回调，所以在2秒之前，主线程一直在空闲，不断的探查队列是否不为空。
此时主线程里其实已经是空的了（因为执行完那两行代码了）
步骤2：
2秒钟之后，setTimeout成功了
