对于前端的新手来说，都知道js是单线程的,但对线程、进程等知识傻傻分不清，特别是对js单线程理解不够明白，今天我们就来谈谈这放面的知识，争取让还不明白这块的孩子们能够理清楚这部分知识点。

一、基本知识：进程/线程

我们先建立一个模型，作为一个公司里面一定分很多个部门或者BU，每个部门都是独立运行的一个业务单元，每个部门内都有很多个同事，大家在一个部门内，占据公司的一块区域，相互协作完成各项工作。

现在我们将上面的模型映射到我们的进程、线程的关系：

1. 进程就像一个公司的一个部分，占据系统分配的一定的内存；

2. 线程就像部门里面职员，多个线程在进程中协作完成任务；

总结：一个进程里面有多个线程，进程之间也是可以相互通信的，但是代价较高（就像公司内部不同部门之间的沟通与协作，也是比较困难的～～～哈哈）

二、浏览器也是多进程，主要包括以下几个进程：

1. browser进程：浏览器的主进程，负责浏览器界面的显示、各个页面的管理、是所有其他类型进程的祖先，负责它们的创建和销毁等工作。有且仅有一个。

2. GPU进程：最多只有一个，当且仅当GPU硬件加速打开的时候才会被创建，主要用于对3D图形加速调用的实现。

3. 第三方插件进程：独立的进程。

4.  渲染进程（浏览器内核）：负责页面的渲染工作，blink和webkit的渲染工作主要在这里面完成，可能有多个，但是render进程的数量并不一定与打开的网页数量一致。

通过上面的描述，可进行简单的总结与延伸：

1⃣️ browser进程与渲染进程是分开的，所以页面渲染导致的崩溃是不会导致浏览器主界面的崩溃的；

2⃣️ 每个页面都是独立的进程，所以页面之间是基本不会互相影响的；

3⃣️ 插件进程也是独立的，插件自己出问题了也不会影响浏览器主界面和网页；

4⃣️ GPU硬件加速也是独立的进程（后面将会进一步讲解移动端动画等特效开启硬件加速的基本原理）

三、内核渲染进程是多线程的，又包含以下线程：

1. GUI线程（主线程）

负责浏览器界面的渲染，html、css的解析，dom树和渲染树的生成，负责页面的布局和绘制等，渲染完呈现给用户。

当触发重绘（例如color,背景色等的改变），重排（只要涉及到页面中dom元素的尺寸的读取或者更改都可能会触发重排，需要说明的是重排一定会触发重绘画，而重绘不会触发重排）时都会触发此线程。

注： 需要注意的是GUI线程和js引擎线程是互斥的，当js引擎执行时，GUI线程会被挂起，相当于被冻结了，GUI更新会被保存在一个队列中，等js引擎空闲时（可以理解js运行完后）立即被执行。

2. js引擎线程

也被称为js内核，负责处理js脚本程序。

js引擎线程负责解析js代码，运行js代码。

js脚本运行的代码会按代码的执行顺序依次被添加到一个执行队列中（定时器除外），按先进先出的原则执行，浏览器不管在什么时候都只有一个js线程在运行js程序。我们通常所说的js是单线程的通常也是说的这块的内容。当然我们也可以通过worker去开一个额外的线程去处理一些运算较大的程序。

3. 定时器线程

这块就是setInterval与setTimeout所在线程，当代码中有个定时器时，哪怕定时器的时间你设置的是0，定时器里面的代码也会比紧挨着定时器后面的代码先执行。

浏览器的定时计数器并不是由js引擎计数的，因为js引擎是单线程的，如果其处于阻塞线程的状态就会影响计数的准确性。因此开的单独的进程添加到事件队列中（事件触发进程），当定时的时间到后被添加事件队列中，等待前面的任务执行完后再执行这个任务，所以我们设置的定时时间一定是大于等于这个时间后才执行定时器里面的代码。

特别说明下，W3C在HTML标准中规定，规定要求setTimeout中低于4ms的时间间隔算为4ms。所以就算我们设置时间为0，其实也不是0秒延迟被添加到事件队列中。

4. 异步请求线程（http请求）

XMLHttpRequest在连接后浏览器会打开一个新的线程去请求。

当检测到状态变更时，如果设置有回调函数，异步线程就产生状态变更事件，将这个回调再放入事件队列中。再由JavaScript引擎执行

5. 事件触发线程

归属于浏览器而不是JS引擎，用来控制事件循环（可以理解，JS引擎自己都忙不过来，需要浏览器另开线程协助）

当JS引擎执行代码块如setTimeOut时（也可来自浏览器内核的其他线程,如鼠标点击、AJAX异步请求等），会将对应任务添加到事件线程中

当对应的事件符合触发条件被触发时，该线程会把事件添加到待处理队列的队尾，等待JS引擎的处理

注意，由于JS的单线程关系，所以这些待处理队列中的事件都得排队等待JS引擎处理（当JS引擎空闲时才会去执行）

五、普通图层和复合图层

普通的文档都会在一个复合图层中（我们可以称它为默认复合图层），哪怕用了absolute或者fixed脱离文档流后，也还是属于这个默认复合图层。

以下css可以触发浏览器去创建一个新的复合图层（当然创建过多的图层也会导致崩溃）：

1. css transform 或者3d

2. video或者canvas标签

3. css filters (可以做icon的多种颜色，安卓4.4以上才支持)

4. opacity (因为实际上透明度的改变，GPU在绘画时只是简单的降低之前已经画好的纹理的alpha值来达到效果，并不需要整体的重绘，所以不会触发重绘)；

硬件加速时请使用index

使用硬件加速时，尽可能的使用index，防止浏览器默认给后续的元素创建复合图层渲染

具体的原理时这样的：

**webkit CSS3中，如果这个元素添加了硬件加速，并且index层级比较低，

那么在这个元素的后面其它元素（层级比这个元素高的，或者相同的，并且releative或absolute属性相同的），

会默认变为复合层渲染，如果处理不当会极大的影响性能