一、理解进程和线程
通常在打开Chrome浏览器时，我们可以看到同时有4个进程已启动，同时为了提升性能，采用多线程来处理任务。一个进程可以由多个线程或者单线程组成。
- 线程 在一个程序运行过程中，有主线程和多线程。
- 进程 一个进程就是一个程序的运行实例，当启动一个程序时，操作系统会为这个程序创建一块内存，用来存放运行中的数据和一个执行任务的主线程。
- 进程和线程的特点
- 进程中的任何一个线程出错，会导致整个进程崩溃
- 线程之间会共享进程中的数据
- 当一个进程关闭之后，系统会回收进程所占用的内存
- 进程之间的内容互相隔离
- 在进程中使用多线程能提升运算效率
二、现在的多进程架构
- 浏览器进程 负责页面显示、用户交互、子进程管理、提供存储
- 渲染进程（多个） 排版引擎Blink和Javascript引擎V8都是运行在该进程中。并且默认情况下，Chrome会为每一个Tab标签创建一个渲染进程。渲染进程是运行在沙箱模式下。
- GPU进程
- 网络进程 网络资源加载
- 插件进程（多个） 负责插件运行，因为插件容易崩溃，所以需要通过进程来隔离
三、数据传输
不管是http还是websocket，都是基于TCP/IP协议来传输数据的。如果数据量很大，那么该数据就会被拆分成小的数据包来传输。完整的数据传输过程就包括：1.数据送达主机 2.主机将数据包转交给应用 3.数据完整的送达应用程序
- IP：数据包送达主机 实际上访问任何网站都只是你的计算机向另外一台计算机请求信息。那么ip地址就是识别不同计算机标准。
- UDP：数据包送达应用程序 ip只负责将数据包送给相应的电脑，但是电脑不知道要交给哪个应用程序。所以要基于IP开发能和应用程序通信的协议：用户数据包协议（UDP）。UDP里面最重要的信息就是端口号，用过端口号把数据包分发给不同的程序。同时UDP不提供重发机制，对于错误的数据包，UDP只是丢弃。
- TCP：数据完整送达应用程序 TCP的出现弥补了UDP的不足。TCP是一种面向连接的，可靠的，基于字节流的传输层通信协议。对于丢包情况，TCP提供重传机制，同时TCP支持把无序的数据包组合成完整文件
四、HTTP请求
1.构建请求
2.查找缓存 在真正发起网络请求之前，浏览器会现在缓存中查找是否存在资源副本，如果有就拦截请求，返回该资源副本，并直接结束请求。
3.准备IP地址和端口 由于HTTP协议作为应用层协议，需要TCP/IP作为传输协议来传输数据。那么TCP/IP又是通过IP地址来确定传输目标的。由于IP地址不好记忆，出现了域名地址。同时为了将IP地址与域名地址进行映射，又出现了“DNS”。同时浏览器还提供DNS数据缓存服务。将解析过的域名缓存起来。
4.等待TCP队列因为Chrome有个机制，同一域名最多只能建立6个TCP连接。多出来的其他TCP连接进入排队等待状态。
5.建立TCP连接
6.发送HTTP请求
7.服务器响应
针对不同的业务场景，服务器会返回各种不同的响应头。
- Content-type:告诉浏览器服务器返回的响应体数据是什么类型（Content-type:text/html是HTML格式，Content-type:application/octet-stream是字节流类型，浏览器会按照下载类型还处理请求）
所以不同Content-type的后续处理流程也会不同。如果是下载类型，该请求会提交给浏览器的下载管理器。如果是HTML，那么浏览器会继续进行导航流程。
8.断开连接
通常情况下，一旦服务器向浏览器返回了请求数据，就要关闭TCP连接。不过如果浏览器或者服务器在头信息中加入了。
Connection:Keep-Alive
就可以保持TCP连接，省去下次请求需要建立连接的时间。
9.重定向
响应状态码为301，同时在响应头的location字段中有重定向的地址。浏览器就会使用该地址重新导航。
10.准备渲染进程
默认情况下，Chrome会为每个页面分配一个渲染进程。但是当这些页面同属于一个站点时，那么这些页面会同时运行在一个渲染进程中。（同站点就是根域名，加上协议）
11.提交文档
渲染进程准备好之后，还不能进入文档解析状态，因为此时的文档数据还在网络进程中，提交文档就是将网络进程中的数据提交给渲染进程。
五、页面资源缓存
1.首先浏览器根据响应头中的Cache-Control字段来设置是否缓存该资源。同时还设置Max-age来表示过期时间。
Cache-Control:Max-age=2000
2.如果缓存过期了，浏览器会继续发起网络请求，并在HTTP请求头中携带If-None-Match
If-None-Match:"4f80f-13c-3a1xb12a
六、渲染流程
整个渲染流程大致可以分为：构建DOM树，样式计算，布局阶段，分层，绘制，分块，光栅化和合成。
- 构建DOM树
浏览器没有办法直接理解和使用HTML,所以需要由HTML解析器将HTML转化为DOM树。
- css转为styleSheets,标准化样式计算
通常情况下，我们css样式来源主要有link引用,style标记，style内嵌。这些浏览器是不能识别的。所以需要渲染引擎将css转换成styleSheets。之后再进行标准化计算，例如将red解析成rbg(255,0,0)
- 计算出DOM树中每个节点的具体样式
主要通过css继承规则和层叠规则来计算出每个节点的具体样式并保存在ComputedStyle中。
- 布局：计算几何位置
计算每个元素的具体位置，可见元素生成布局树。
- 分层
对于一些复杂的3D变换，渲染引擎还需要为特定的节点生成专用的图层，并生成一棵图层树。通过这些图层的叠加才合成了最终的页面。并不是每个节点都会单独生成一层图层。
1.拥有上下文属性的元素会被提升为单独一层
2.需要剪裁的地方会被创建为图层
- 图层绘制
通过很多绘制指令来生成绘制列表。最后通过合成线程来进行绘制操作。在合成线程中，基于视口的存在，为了优化一次性渲染长列表，会将图层划分成图块。合成线程会按照视口附近的图块来优先生成位图。这个生成位图的操作就是栅格化。栅格化过程会使用GPU来加速生成。
- 合成显示
所有图块被栅格化后，合成线程会生成一个绘制图块的命令“DrawQuad”，将该命令提交给浏览器进程。通过浏览器中的viz组件，将页面内容绘制到内存中，最后显示在屏幕上。
