学习浏览器原理之前，首先弄明白两个概念：进程和线程
一：进程VS线程
概念
- 进程就是一个程序的运行实例。详细解释就是，启动一个程序的时候，操作系统会为该程序创建一块内存，用来存放代码、运行中的数据和一个执行任务的主线程，我们把这样一个运行环境叫进程。
- 线程是指操作系统中能够进行运算调度的最小单位。线程依附于进程，是进程中的实际运作单位。
特点
- 进程中的任意一线程执行出错，都会导致整个进程的崩溃
- 线程之间共享进程中的数据
- 进程之间的内容相互隔离
- 当一个进程关闭后，操作系统会回收进程所占用的内存
二：Chrome多进程架构
了解完进程与线程概念后，现在我们来看一下目前Chrome多进程架构，如下图：
- 浏览器进程：主要负责界面显示、用户交互、子进程管理，同时提供存储等功能
- 渲染进程：核心任务是将HTML、CSS和JavaScript转换为用户可与之交互的网页，排版引擎Blink和JavaScript V8引擎都是运行在渲染进程中，默认情况下，Chrome会为每一个Tab标签创建一个渲染进程。出于安全考虑，渲染进程都是运行在沙箱模式下
- GPU进程：渲染绘制UI界面，实现图形、视频和3D的渲染
- 网络进程：主要负责页面的网络资源加载
- 插件进程：主要负责插件的运行，因为插件容易崩溃，所以需要通过插件进程来隔离，以保证插件进程崩溃不会对浏览器和页面造成影响
三：浏览器HTTP请求流程
在浏览器地址栏输入网址，分别经历以下步骤：
1.浏览器构建请求行信息
GET /index.html HTTP1.1
2.查找缓存
在真正发起网络请求之前，浏览器会现在浏览器缓存中查询是否有要请求的资源。其中，浏览器缓存是一种在本地保存资源的副本，当发现请求的资源已经在浏览器缓存中存有副本，它会拦截请求，返回该资源副本，并结束请求，不会再去服务器请求资源。缓存的好处：缓解服务器压力，提升性能，实现资源快速加载
3.准备IP地址和端口
浏览器先查询本地DNS数据缓存服务，如果有域名和对应的IP，则返回该IP地址，如果DNS缓存服务中没有，则请求DNS进行域名解析，返回IP地址。如果URL没有指明端口，则HTTP默认是80端口，HTTPS默认是443端口
4.等待TCP队列
Chrome有个机制，同一域名下最多只能建立6个TCP连接，如果在同一域名下同时有10个请求发生，那么其中4个请求会进入排队等待状态。如果当前请求数量少于6，则会直接进行下一步，通过三次握手建立TCP连接
5.建立TCP连接
三次握手，建立TCP连接
6.发送HTTP请求
浏览器会向服务器发送请求行，它包括请求方法、请求URI和HTTP协议版本，如果是POST请求，还会发送请求体。
7.服务器处理HTTP请求
返回响应头和响应体
8.断开TCP连接
通常情况下，一旦服务器向客户端返回了请求数据，它就要关闭TCP连接，如果浏览器或服务器在其头中加入：Connection:Keep-Alive 那么TCP会处于保持连接状态，省去下次请求是建立连接时间，提升资源加载速度
总结：如下图
四：从URL输入到页面展示
1.从输入 URL 到页面展示完整流程示意图：
- 浏览器进程主要负责用户交互、子进程管理和文件储存等功能
- 网络进程是面向渲染进程和浏览器进程等提供网络下载功能
- 渲染进程的主要职责是把从网络下载的 HTML、JavaScript、CSS、图片等资源解析为可以显示和交互的页面。因为渲染进程所有的内容都是通过网络获取的，会存在一些恶意代码利用浏览器漏洞对系统进行攻击，所以运行在渲染进程里面的代码是不被信任的。这也是为什么 Chrome 会让渲染进程运行在安全沙箱里，就是为了保证系统的安全。
2.过程可以大致描述为如下：
- 首先，用户从浏览器进程里输入请求信息
- 然后，网络进程发起URL请求
- 服务器响应URL请求后，浏览器进程开始准备渲染进程
- 渲染进程准备好后，需要先向渲染进程提交页面数据，该阶段为提交文档阶段
- 渲染进程接收完文档信息后，开始解析页面和加载子资源，完成页面渲染
在这里主要描述解析HTML、CSS和JavaScript，到渲染成页面的过程
- 首先浏览器自上而下逐行解析HTML内容，经过词法分析、语法分析构建DOM树
- 解析 CSS 内容，经过词法分析、语法分析，构建 CSSOM 树
- 渲染进程结合 DOM 树和 CSSOM 树构建布局树，并计算布局树节点的坐标位置，将这些信息保存在布局树中。
- 对布局树进行分层，并生成分层树
- 为每个图层生成绘制列表，并将其提交到合成线程。
- 合成线程会将图层划分为图块，然后进行栅格化处理，所谓栅格化，是指将图块转换为位图。格化过程都会使用 GPU 来加速生成，使用 GPU 生成位图的过程叫快速栅格化，或者 GPU 栅格化，生成的位图被保存在 GPU 内存中。
- 一旦所有图块都被光栅化，合成线程就会生成一个绘制图块的命令——“DrawQuad”，然后将该命令提交给浏览器进程，浏览器进程执行该命令后，将其页面内容绘制到内存中，最后再将内存显示在屏幕上
PS：重排、重绘与合成
重排：更新了元素的几何属性，通过 JavaScript 或者 CSS 修改元素的几何位置属性，例如改变元素的宽度、高度等，那么浏览器会触发重新布局，解析之后的一系列子阶段，这个过程就叫重排。
重绘：如果修改了元素的背景颜色，那么布局阶段将不会被执行，因为并没有引起几何位置的变换，所以就直接进入了绘制阶段，然后执行之后的一系列子阶段，这个过程就叫重绘。
合成：渲染引擎将跳过布局和绘制，只执行后续的合成操作，我们把这个过程叫做合成。
