资料来源
1、chrome浏览器的进程结构
进程与线程
进程介绍：
一个进程就是一个程序的运行实例。启动一个程序的时候，操作系统会为该程序创建一块内存，
用来存放代码、运行中的数据和一个执行任务的主线程，我们把这样的一个运行环境叫进程。
线程介绍：
线程依附于进程，一个进程里面有多个线程。
之间的关系：
1. 进程中的任意一线程执行出错，都会导致整个进程的崩溃。
2. 线程之间共享进程中的数据。
3. 当一个进程关闭之后，操作系统会回收进程所占用的内存。
4. 进程之间的内容相互隔离，如果需要通讯的话需要使用ipc机制。
浏览器进程
主要负责界面显示、用户交互、子进程管理，同时提供存储等功能。
n个渲染进程(每有一个网页，就有一个渲染进程)
核心任务是将 HTML、CSS 和 JavaScript 转换为用户可以与之交互的网页，
默认情况下，Chrome 会为每个 Tab 标签创建一个渲染进程。
出于安全考虑，渲染进程都是运行在沙箱模式下。
以下为渲染进程里面的线程说明
- 渲染线程
负责渲染浏览器界面,当界面需要重绘（Repaint）或由于某种操作引发回流(reflow)时，该线程就会执行。
注意：该线程与js引擎线程互斥。
- js线程
负责解析js脚本、运行代码。当同步代码执行完毕后，js会一直等待`消息队列`中任务的到来。
注意：该线程与gui渲染线程互斥。
- 事件触发线程
将异步任务的回调函数推入`消息队列`，常见的有
setTimeout、setInterval;
各种事件
ajax异步请求
这个线程只是负责接受回调函数以及推入消息队列，具体它们的产生由别的线程完成。
- 定时器触发线程
setTimeout、setInterval的定时计数是由该线程完成的。
- 异步http请求线程
发送http请求
复制代码
- 合成线程
绘制、光栅化、合成和显示
- IO线程
用来和其他进程进行通信，例如：
用户点击页面的操作，第一位接受到信息的是浏览器进程。
GPU进程
实现 3D CSS 的效果
网络进程
主要负责页面的网络资源加载
插件进程
主要是负责插件的运行
2、使用不同协议传输数据的过程
ip传输
udp传输
IP 通过 IP 地址信息把数据包发送给指定的电脑，而 UDP 通过端口号把数据包分发给正确的程序
tcp传输
3、http请求的流程
Chrome 有个机制，同一个域名同时最多只能建立 6 个 TCP 连接，如果在同一个域名下同时有 10 个请求发生，那么其中 4 个请求会进入排队等待状态，直至进行中的请求完成。
4、缓存处理过程
5、导航流程
6、渲染流程（每一帧）
- 渲染进程将html转化成dom树
渲染阻塞
当在构建dom树的过程中遇到了如下标签
<scrpit src="url"></script>
则会停止dom树的构建直到js文件下载并执行完毕。
如果js文件前面有css文件，且css文件还没有下载或解析完成，则会等待完成后再下载与执行js脚本。
优化策略：
如果js文件没有操作dom相关代码，则可以通过设置 async 和 defer 来将其异步化。
- 渲染引擎将css转化成styleSheets，并计算每个dom节点的具体样式，保存在computedStyle中。
- 结合dom树与styleSheets生成布局树
- 对布局树进行分层，生成图层树
- 为图层树的每个图层节点生成绘制列表，并将其交给合成线程
- 合成线程是真正绘制图层树的，它将图层分成图块，在光栅化线程池中将图块全部转成位图
- 浏览器进程接收到渲染进程中合成线程位图完成的指令后将内容显示在屏幕上。
重排
当修改了元素的几何属性，例如更改高度，则会触发如下的阶段：
重绘
当修改了元素的绘制属性，例如更改背景颜色，则会触发如下的阶段：
可见,跳过了布局阶段
优化
- 当改变几何元素的时候，考虑使用transfrom属性
- 当在短时间内多次改变元素的几何属性时，考虑用添加class的方式一次性处理。
