https://juejin.im/post/5d5b4c2df265da03dd3d73e5

CPU、进程、线程之间的关系

计算机的核心是CPU，它承担了所有的计算任务。

它就像一座工厂，时刻在运行。

假定工厂的电力有限，一次只能供给一个车间使用。也就是说，一个车间开工的时候，其他车间都必须停工。背后的含义就是，单个CPU一次只能运行一个任务。

进程就好比工厂的车间，它代表CPU所能处理的单个任务。进程之间相互独立，任一时刻，CPU总是运行一个进程，其他进程处于非运行状态。 CPU使用时间片轮转进度算法来实现同时运行多个进程。

一个车间里，可以有很多工人，共享车间所有的资源，他们协同完成一个任务。

线程就好比车间里的工人，一个进程可以包括多个线程，多个线程共享进程资源。

进程是cpu资源分配的最小单位（是能拥有资源和独立运行的最小单位）
线程是cpu调度的最小单位（线程是建立在进程的基础上的一次程序运行单位，一个进程中可以有多个线程）
不同进程之间也可以通信，不过代价较大
单线程与多线程，都是指在一个进程内的单和多

浏览器是多进程的

对于计算机来说，每一个应用程序都是一个进程，而每一个应用程序都会分别有很多的功能模块，这些功能模块实际上是通过子进程来实现的。对于这种子进程的扩展方式，我们可以称这个应用程序是多进程的。

而对于浏览器来说，浏览器就是多进程的，在Chrome浏览器中打开多个tab，然后打开windows控制管理器可以看到一个Chrome浏览器启动了好多个进程。

总结一下：

浏览器是多进程的
每一个Tab页，就是一个独立的进程

浏览器包含了哪些进程

主进程

协调控制其他子进程（创建、销毁）
浏览器界面显示，用户交互，前进、后退、收藏
将渲染进程得到的内存中的Bitmap，绘制到用户界面上
处理不可见操作，网络请求，文件访问等

第三方插件进程

每种类型的插件对应一个进程，仅当使用该插件时才创建

GPU进程

用于3D绘制等

渲染进程，就是我们说的浏览器内核

负责页面渲染，脚本执行，事件处理等
每个tab页一个渲染进程

那么浏览器中包含了这么多的进程，那么对于普通的前端操作来说，最重要的是什么呢？

答案是渲染进程，也就是我们常说的浏览器内核

浏览器内核（渲染进程）

进程和线程是一对多的关系，也就是说一个进程包含了多条线程。

而对于渲染进程来说，它当然也是多线程的了，接下来我们来看一下渲染进程包含哪些线程。

GUI渲染线程
- 负责渲染页面，布局和绘制
- 页面需要重绘和回流时，该线程就会执行
- 与js引擎线程互斥，防止渲染结果不可预期
JS引擎线程
- 负责处理解析和执行javascript脚本程序
- 只有一个JS引擎线程（单线程）
- 与GUI渲染线程互斥，防止渲染结果不可预期
事件触发线程
- 用来控制事件循环（鼠标点击、setTimeout、ajax等）
- 当事件满足触发条件时，将事件放入到JS引擎所在的执行队列中
定时触发器线程
- setInterval与setTimeout所在的线程
- 定时任务并不是由JS引擎计时的，是由定时触发线程来计时的
- 计时完毕后，通知事件触发线程
异步http请求线程
- 浏览器有一个单独的线程用于处理AJAX请求
- 当请求完成时，若有回调函数，通知事件触发线程

为什么 javascript 是单线程的

首先是历史原因，在创建 javascript 这门语言时，多进程多线程的架构并不流行，硬件支持并不好。

其次是因为多线程的复杂性，多线程操作需要加锁，编码的复杂性会增高。

而且，如果同时操作 DOM ，在多线程不加锁的情况下，最终会导致 DOM 渲染的结果不可预期。

为什么 GUI 渲染线程与 JS 引擎线程互斥

这是由于 JS 是可以操作 DOM 的，如果同时修改元素属性并同时渲染界面(即 JS线程和UI线程同时运行)，那么渲染线程前后获得的元素就可能不一致了。

因此，为了防止渲染出现不可预期的结果，浏览器设定 GUI渲染线程和JS引擎线程为互斥关系，当JS引擎线程执行时GUI渲染线程会被挂起，GUI更新则会被保存在一个队列中等待JS引擎线程空闲时立即被执行。

宏任务、微任务

宏任务

我们可以将每次执行栈执行的代码当做是一个宏任务（包括每次从事件队列中获取一个事件回调并放到执行栈中执行），每一个宏任务会从头到尾执行完毕，不会执行其他。

我们前文提到过JS引擎线程和GUI渲染线程是互斥的关系，浏览器为了能够使宏任务和DOM任务有序的进行，会在一个宏任务执行结果后，在下一个宏任务执行前，GUI渲染线程开始工作，对页面进行渲染。

1	// 宏任务-->渲染-->宏任务-->渲染-->渲染．．．

主代码块，setTimeout，setInterval等，都属于宏任务

例一

document.body.style = 'background:black';
document.body.style = 'background:red';
document.body.style = 'background:blue';
document.body.style = 'background:grey';

会看到的结果是，页面背景会在瞬间变成灰色，以上代码属于同一次宏任务，所以全部执行完才触发页面渲染，渲染时GUI线程会将所有UI改动优化合并，所以视觉效果上，只会看到页面变成灰色。

这里存在的疑问就是：这里的DOM操作是属于宏任务还是微任务？经过思考加上读了 JavaScript 忍者秘籍，DOM 操作应该是微任务，如果要是宏任务，执行一个宏任务就渲染一次，上面的代码就会变四次颜色了。

例二

document.body.style = 'background:blue';
setTimeout(function(){
    document.body.style = 'background:black'
},0)

会看到，页面先显示成蓝色背景，然后瞬间变成了黑色背景，这是因为以上代码属于两次宏任务，第一次宏任务执行的代码是将背景变成蓝色，然后触发渲染，将页面变成蓝色，再触发第二次宏任务将背景变成黑色。

微任务

我们已经知道宏任务结束后，会执行渲染，然后执行下一个宏任务，而微任务可以理解成在当前宏任务执行后立即执行的任务。

也就是说，当宏任务执行完，会在渲染前，将执行期间所产生的所有微任务都执行完。

Promise，process.nextTick等，属于微任务。

例一

document.body.style = 'background:blue'
console.log(1);
Promise.resolve().then(()=>{
  console.log(2);
  document.body.style = 'background:black'
});
console.log(3);

控制台输出 1 3 2 , 是因为 promise 对象的 then 方法的回调函数是异步执行，所以 2 最后输出

页面的背景色直接变成黑色，没有经过蓝色的阶段，是因为，我们在宏任务中将背景设置为蓝色，但在进行渲染前执行了微任务，在微任务中将背景变成了黑色，然后才执行的渲染

例二

setTimeout(() => {
  console.log(1)
  Promise.resolve(3).then(data => console.log(data))
}, 0)

setTimeout(() => {
  console.log(2)
}, 0)

// print : 1 3 2

上面代码共包含两个 setTimeout ，也就是说除主代码块外，共有两个宏任务，其中第一个宏任务执行中，输出 1 ，并且创建了微任务队列，所以在下一个宏任务队列执行前，先执行微任务，在微任务执行中，输出 3 ，微任务执行后，执行下一次宏任务，执行中输出 2

总结

执行一个宏任务（栈中没有就从事件队列中获取）

执行过程中如果遇到微任务，就将它添加到微任务的任务队列中

宏任务执行完毕后，立即执行当前微任务队列中的所有微任务（依次执行）

当前宏任务执行完毕，开始检查渲染，然后GUI线程接管渲染

渲染完毕后，JS线程继续接管，开始下一个宏任务（从事件队列中获取）

task2