[前端]多线程在前端的应用——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引擎线程，可是浏览器的渲染进程是提供多个线程的，以下：

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

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

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

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

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

3.1中代码的执行流程以下

步骤1：

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

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

步骤2：

2秒钟以后，setTimeout成功了

步骤3：

步骤4：

参照：http://www.javashuo.com/article/p-bggzgvam-cp.html