都是引用大佬的，只是自己做一下复习，大神详解https://segmentfault.com/a/1190000012925872#articleHeader15
1 进程和线程 工厂和流水线的关系，厂址是内存和cpu分配的资源
进程是cpu分配的最小单位 线程是cpu调度的最小单位
2 浏览器 多进程（每打开一个tab页就相当于创建一个浏览器进程）
* Browser进程，浏览器主进程，负责浏览器界面的显示，与用户交互 页面管理 网络资源的下载
* renderer进程 （浏览器渲染进程 浏览器内核 ）脚本执行，事件处理 页面渲染
* GPU 3D绘制
* 第三方插件进程：每种类型的插件对应一个进程，仅当使用该插件时才创建
3 浏览器内核各线程之间关系
线程 ：js引擎线程 GUI渲染线程 事件触发线程 定时触发器线程 异步http请求线程
* GUI渲染线程
1>负责浏览器页面渲染，解析html css,以及DOM树和RenderObject树的构建，布局与绘制
2>当页面需要重绘或某些操作引发回流时，该线执行
3>该线程与js引擎互斥，一旦该线程执行，js引擎就会停止
*js引擎线程 解析javaScript脚本，执行代码
* 事件触发线程 管理任务队列，一旦事件被触发，就被添加到任务队列，等待js 引擎执行
* 定时触发器线程有setInterval 和setTimeout 两个函数，setInterval尽量不用，因为太精确了，js单线程注定不能太精确，时间间隔虽然是0，但系统默认最小是4ms
*异步HTTP请求线程 通过浏览器新开一个线程，检测有状态变更后，如果有回调函数，异步线程就产生状态变更事件，将回调函数加入事件队列
4 浏览器内核各进程之间关系
Browse进程和Renderer进程的通信
* Browse进程接收到用户请求，获取页面内容后，通过RenderHost接口传递给Renderer进程
* Renderer进程的Renderer接口收到消息，简单解释后，交给GUI渲染线程，然后开始渲染
渲染线程接收请求，加载网页并渲染网页，这其中可能需要Browser进程获取资源和需要GPU进程来帮助渲染，可能会有js引擎造作DOM导致回流重绘
*Renderer进程将结果返回给Browse进程，Browse接收并绘制
5 Worker
* 创建Worker时，js引擎让浏览器开启了一个子线程，由主线程控制，不能控制DOM
* Worker线程与js引擎通过（postMessage API，需要通过序列化对象来与线程交互特定的数据）通信，不影响js引擎，只在最后将结果传给JS引擎
* WebWorker与SharedWorker
WebWorker只在一个页面内，是Renderer进程的一个线程
SharedWorker所有页面共享，是一个进程
4 浏览器渲染流程
前期工作 浏览器接收到url之后，主进程Brower进程接管，开启一个下载线程，然后通过HTTP请求，等待响应，获取内容，下载资源，再通过RenderHost接口给Renderer进程
渲染流程
1 解析html，构建DOM树
2解析CSS成树形的数据结构+DOM树=Renderer树
3布局Renderer树，计算元素尺寸。位置
4绘制Renderer 树，绘制页面像素信息
5 浏览器将各层信息传给GPU进程，GPU将各层合成，显示在页面中
*普通图层和复合图层（GPU绘制的）
absolute fixed 虽然可以脱离普通文档流，但是仍然属于默认复合层
主要是硬件加速构造复合图层
1>opaicity,注意要用z-index，因为后续元素index层次等级比该元素高，默认为也是复合图层，耗费资源 2>translate3D translateZ 3>will-chang属性与opacity和translate结合使用
5 事件循环
事件触发线程管理task即宏事件，js引擎管理jobs，在一次task之间执行所有jobs