前言

学习真的是一个很奇妙的过程。
本意是学习状态管理工具Redux，其中涉及到Promise异步编程知识，发现不太熟悉，于是决定先学学Promise相关知识。
Promise文档中，提及了传统的异步编程解决方案，感觉略显模糊，那就先回顾下传统的异步编程解决方案吧。
传统异步编程解决方案中涉及了定时器，好像没研究过定时器的原理，一不做，二不休，决定先把定时器的原理搞清楚再回去学习上面的知识。
然鹅，还没结束，定时器的原理建立在js引擎线程上！！！
所以，这篇文章，记录的是浏览器的线程和进程相关知识。[捂脸/]

奇妙的学习.jpg

浏览器线程与进程

线程和进程的概念此处不再赘述，直击主题-浏览器的线程与进程。
以谷歌浏览器为例，打开浏览器，然后shift+Esc或者（Chrome的更多工具 -> 任务管理器），打开chrome的任务管理器：

浏览器进程.png

• 负责浏览器界面显示，与用户交互，如前进，后退等；
• 负责各个页面的管理，创建和销毁其他进程；
• 将Renderer进程得到的内存中的Bitmap，绘制到用户界面上；
• 网络资源的管理，下载等；

2、CPU进程
用于3D绘制等，可禁用掉，只有一个。

3、第三方插件进程
每种类型的插件对应一个进程，仅当使用该插件时才创建。

4、浏览器渲染进程
浏览器渲染进程（Renderer进程），即通常所说的浏览器内核，主要作用：页面渲染、脚本执行、事件处理等。每一个标签页的打开都会创建一个Renderer进程，且互不影响。默认一个标签页一个Renderer进程，但是，有时候浏览器会将多个进程合并（暂时没查到合并的依据），比如打开多个空白标签页：

浏览器进程合并

浏览器为什么是多进程？

对于简单的网页，一个进程处理多个网页是可行的。
但是把很多复杂的网页放进一个进程，浏览器面临在健壮性，响应速度，安全性方面的挑战。如果一个tab页崩溃，将导致同进程的其他页面崩溃，极其影响用户体验。
另外进程之间是不共享资源和地址空间的,所以不会存在太多的安全问题。
当然，多进程相对于单进程，内存等资源消耗更大，有点空间换时间的意思。这大概也是浏览器中存在多个tab页共用一个进程的情况的原因吧。

浏览器渲染进程（Renderer进程，浏览器内核）

作为前端开发，最关心的自然是页面渲染、脚本执行、事件处理等过程，这就不得不介绍Renderer进程。
首先，Renderer进程包含以下5种线程：
1、GUI渲染线程

• 负责渲染浏览器界面，解析HTML，CSS，构建DOM树和RenderObject树，布局和绘制等；
• 当界面需要重绘（Repaint）或由于某种操作引发回流(reflow)时，该线程就会执行；
• 注意：GUI渲染线程与JS引擎线程是互斥的，当JS引擎执行时GUI线程会被挂起（相当于被冻结了），GUI更新会被保存在一个队列中等到JS引擎空闲时立即被执行。

2、JS引擎线程

• JS引擎线程也称为JS内核，负责处理Javascript脚本程序，解析Javascript脚本，运行代码；
• JS引擎一直等待着任务队列中任务的到来，然后加以处理，一个Tab页（renderer进程）中无论什么时候都只有一个JS线程在运行JS程序；
• 注意：GUI渲染线程与JS引擎线程的互斥关系，所以如果JS执行的时间过长，会造成页面的渲染不连贯，导致页面渲染加载阻塞。

3、事件触发线程

• 归属于浏览器而不是JS引擎，用来控制事件循环（可以理解，JS引擎自己都忙不过来，需要浏览器另开线程协助）；
• 当JS引擎执行代码块如setTimeOut时（也可是来自浏览器内核的其他线程,如鼠标点击、AJAX异步请求等），会将对应任务添加到事件触发线程中；
• 当对应的事件符合触发条件被触发时，该线程会把事件添加到待处理队列的队尾，等待JS引擎的处理；
• 注意：由于JS的单线程关系，所以这些待处理队列中的事件都得排队等待JS引擎处理（当JS引擎空闲时才会去执行）；

4、定时器触发线程

• 即setInterval与setTimeout所在线程；
• 浏览器定时计数器并不是由JS引擎计数的，因为JS引擎是单线程的, 如果处于阻塞线程状态就会影响记计时的准确性；
• 因此使用单独线程来计时并触发定时器，计时完毕后，添加到事件队列中，等待JS引擎空闲后执行，所以定时器中的任务在设定的时间点不一定能够准时执行，定时器只是在指定时间点将任务添加到事件队列中；
• 注意：W3C在HTML标准中规定，定时器的定时时间不能小于4ms，如果是小于4ms，则默认为4ms。

5、异步http请求线程

• XMLHttpRequest连接后通过浏览器新开一个线程请求；

• 检测到状态变更时，如果设置有回调函数，异步线程就产生状态变更事件，将回调函数放入事件队列中，等待JS引擎空闲后执行；
  

  综上所述，浏览器各进程线程关系大致如下图：
  浏览器进程和线程关系图

JS为什么是单线程？

JavaScript的主要用途主要是用户互动，和操作DOM。线程之间资源共享，相互影响，如果JavaScript同时有两个线程，一个线程在某个DOM节点上添加内容，另一个线程删除了这个节点，这时这两个节点会有很大冲突，为了避免这个冲突，所以决定了它只能是单线程，否则会带来很复杂的同步问题。此外HTML5提出Web Worker标准，允许JavaScript脚本创建多个线程(GUI线程, 异步HTTP请求线程, 定时触发器线程...)，但是子线程完全受主线程控制，这个新标准并没有改变JavaScript单线程的本质。

JS运行机制

接下来分析分析JS引擎的运行机制：

• 主线程（我理解为JS引擎线程）运行时，形成一个执行栈；
• 事件触发线程管理着一个任务队列，执行栈中的代码调用某些api时，它们会在任务队列中添加各种事件（当满足触发条件后，如ajax请求完毕，定时器到点时）；

• 执行栈中任务执行完毕（JS引擎线程空闲），系统读取任务队列，将任务添加到执行栈中，开始执行；
  浏览器线程合作

图片较大，原图访问：浏览器线程合作

JS运行机制进阶（宏任务/微任务）

上面的JS运行机制在ES5中完全够用了，但是对于现在的ES6，还需要对JS运行机制做进一步探究，发现一篇文章写得很好很详细，我就直接贴链接了，有兴趣的童鞋请移步：前端基础进阶（十二）：深入核心，详解事件循环机制

到此，基本上把浏览器的线程进程问题理清了。
本文借鉴了一些大神的博文，加之我自己的理解，有叙述或理解不准确之处，欢迎指正，感谢！

参考文章链接：
前端基础进阶（十二）：深入核心，详解事件循环机制
浏览器的运行机制—2.浏览器都包含哪些进程？
浏览器的多线程与js引擎的单线程
从浏览器多进程到JS单线程，JS运行机制最全面的一次梳理