一直以来对前端浏览器多进程，JS单线程等概念模糊不清，因此梳理总结下这块知识，以达到让自己对进程和线程等概念有个整理连贯性的认识。
进程和线程的区别
官方给进程和线程的定义为：
-
进程是CPU资源分配的最小单位（能拥有资源和独立运行的最小单位）
-
线程是CPU调度的最小单位（线程是建立在进程基础上的一次程序运行单位，一个进程可以有多个线程）
在windows电脑中，打开任务挂历器，可以看到一个进程列表，可以看到进程的内存资源以及CPU占有率
同一进程中的多条线程讲共享该进程中的全部系统资源，但是同一进程中的多个线程有各自的调用栈，自己的线程本地存储。一个进程可以有很多线程，每条线程并行执行不同的任务
浏览器多进程
浏览器是多进程的，每打开一个tab页，就相当于创建了一个独立的浏览器进程（不过也不是绝对的，如果多个空白标签页会被合并成一个进程）
浏览器包含如下进程：
-
Browser进程：浏览器主进程（负责协调，主控），只有一个
-
第三方插件进程：每种类型的插件对应一个进程，仅当使用该插件时才创建
-
GPU进程：最多一个，用于3D绘制等
-
浏览器渲染进程（浏览器内核：Render进程，内部是多线程的）：默认一个tab页面一个进程
浏览器多进程优势
-
避免单个page crash 影响整个浏览器
-
避免第三方插件crash 影响整个浏览器
-
多进程充分利用多核优势
-
方便使用沙盒模型隔离插件等进程，提高浏览器稳定性
浏览器Render进程多线程
如图，浏览器内核分为上面五个线程，其中GUI渲染线程和JS引擎线程互斥，由于JS是可操作DOM的，如果在修改这些元素属性同时渲染页面，就会造成渲染线程前后获得的元素数据可能不一致，，因此为了防止渲染出现不可预期的结果，浏览器设置GUI渲染线程和JS引擎线程为互斥，当JS引擎执行时GUI引擎就挂起，这也是为什么我们把script引入的js文件放在header里面，会造成页面渲染渲染阻塞的原因。
JS的单线程与多线程
JS引擎是单线程，但是在HTML5中支持了Web Worker,针对cpu密集型计算申请开个子线程；
-
创建Web Worker时，JS引擎向浏览器申请一个子线程，该子线程完全受主线程控制，而且不能操作DOM
-
JS引擎线程与Web Worker 线程通过postMessage API通信
JS引擎单线程，这一点本质没有改变，Web Worker是浏览器开的，专门用来解决大量计算问题
