共计 1741 个字符，预计需要花费 5 分钟才能阅读完成。
从输出 URL 到页面展现残缺流程
介绍完后面所须要的三个基本知识背景后（HTTP 申请流程包含了 TCP 连贯），当初只须要将其串起来就能答复从输出 URL 到页面展现残缺流程。
同样，先给出从输出 URL 到页面展现残缺流程示意图：
由图中不难发现，最外层是三种 Chrome 过程，而网络过程所执行的操作就是 HTTP 申请流程并且渲染过程所执行的操作就是渲染流程。
上面，先给出此流程图精简版的形容：
1. 首先，浏览器过程接管到用户输出的 URL 申请，浏览器过程便将该 URL 转发给网络过程。
2. 而后，在网络过程中发动真正的 URL 申请。
3. 接着网络过程接管到了响应头数据，便解析响应头数据，并将数据转发给浏览器过程。
4. 浏览器过程接管到网络过程的响应头数据之后，发送“提交导 (CommitNavigation)”音讯到渲染过程。
5. 渲染过程接管到“提交导航”的音讯之后，便开始筹备接管 HTML 数据，接收数据的形式是间接和网络过程建设数据管道。
6. 最初渲染过程会向浏览器过程“确认提交”，这是通知浏览器过程：“曾经筹备好承受和解析页面数据了”。
7. 浏览器过程接管到渲染过程“提交文档”的音讯之后，便开始移除之前旧的文档，而后更新浏览器过程中的页面状态。
上面还有一个联合后面基础知识的更具体的流程形容：
用户输出
1. 用户在地址栏按下回车，查看输出（关键字 or 合乎 URL 规定），组装残缺 URL；
2. 回车前，以后页面执行 onbeforeunload 事件；
3. 浏览器进入加载状态。
URL 申请
- 浏览器过程通过 IPC 把 URL 申请发送至网络过程；
- 查找资源缓存（有效期内）；
- DNS 解析（查问 DNS 缓存）；
- 进入 TCP 队列（单个域名 TCP 连贯数量限度）；
- 创立 TCP 连贯（三次握手）；
- HTTPS 建设 TLS 连贯（client hello, server hello, pre-master key 生成『对话密钥』）；
- 发送 HTTP 申请（申请行 [办法、URL、协定]、申请头 Cookie 等、申请体 POST）；
-
承受申请（响应行 [协定、状态码、状态音讯]、响应头、响应体等）；
状态码 301 / 302，依据响应头中的 Location 重定向；状态码 200，依据响应头中的 Content-Type 决定如何响应（下载文件、加载资源、渲染 HTML）。
筹备渲染过程
依据是否同一站点（雷同的协定和根域名），决定是否复用渲染过程。
提交文档
1. 浏览器过程承受到网路过程的响应头数据，向渲染过程发送『提交文档』音讯；
2. 渲染过程收到『提交文档』音讯后，与网络过程建设传输数据『管道』；
3. 传输实现后，渲染过程返回『确认提交』音讯给浏览器过程；
4. 浏览器承受『确认提交』音讯后，移除旧文档、更新界面、地址栏，导航历史状态等；
5. 此时标识浏览器加载状态的小圆圈，从此前 URL 网络申请时的逆时针抉择，行将变成顺时针旋转（进入渲染阶段）。
渲染
渲染流水线
构建 DOM 树
1. 输出：HTML 文档；
2. 解决：HTML 解析器解析；
3. 输入：DOM 树。
款式计算
1. 输出：CSS 文本；
2. 解决：属性值标准化，每个节点具体款式（继承、层叠）；
3. 输入：styleSheets(CSSOM)。
布局 (DOM 树中元素的打算地位)
1.DOM & CSSOM 合并成渲染树；
2. 布局树（DOM 树中的可见元素）；
3. 布局计算。
分层
1. 特定节点生成专用图层，生成一棵图层树（层叠上下文、Clip，相似 PhotoShop 里的图层）；
2. 领有层叠上下文属性（明确定位属性、通明属性、CSS 滤镜、z-index 等）的元素会创立独自图层；
3. 没有图层的 DOM 节点属于父节点图层；
4. 须要剪裁的中央也会创立图层。
绘制指令
1. 输出：图层树；
2. 渲染引擎对图层树中每个图层进行绘制；
3. 拆分成绘制指令，生成绘制列表，提交到合成线程；
4. 输入：绘制列表。
分块
合成线程会将较大、较长的图层（整个屏显示不完，大部分不在视口内）划分为图块（tile, 256256, 512512）。
光栅化（栅格化）
1. 在光栅化线程池中，将视口左近的图块优先生成位图（栅格化执行该操作）；
2. 疾速栅格化：GPU 减速，生成位图（GPU 过程）。
合成绘制
1. 绘制图块命令——DrawQuad，提交给浏览器过程；
2. 浏览器过程的 viz 组件，依据 DrawQuad 命令，绘制在屏幕上。
