从输入URL到页面展示，这中间发生了什么？

从输入URL到页面展示，这中间发生了什么？

1. 用户输入关键词，地址栏判断是搜索内容还是url地址。
   如果是搜索内容，会使用浏览器默认搜索引擎加上搜索内容合成url；
   如果是域名会加上协议（如https）合成完整的url。

2. 然后按下回车。浏览器进程通过IPC（进程间通信）把url传给网络进程（网络进程接收到url才发起真正的网络请求）。

3. 网络进程接收到url后，先查找有没有缓存。
   有缓存，直接返回缓存的资源。
   没有缓存。（进入真正的网络请求）。首先获取域名的IP，系统会首先自动从hosts文件中寻找域名对应的 IP 地址，一旦找到，和服务器建立TCP连接；如果没有找到，则系统会将网址提交 DNS 域名解析服务器进行 IP 地址的解析。

4. 利用IP地址和服务器建立TCP连接（3次握手）。

5. 建立连接后，浏览器构建数据包（包含请求行，请求头，请求正文，并把该域名相关Cookie等数据附加到请求头），然后向服务器发送请求消息。

6. 服务器接收到消息后根据请求信息构建响应数据（包括响应行，响应头，响应正文），然后发送回网络进程。

7. 网络进程接收到响应数据后进行解析。
   如果发现响应行的返回的状态码为301，302，说明服务器要我们去找别人要数据，找谁呢？找响应头中的Location字段要，Location的内容是需要重定向的地址url。获取到这个url一切重新来过。
   如果返回的状态码为200，说明服务器返回了数据。

8. 好了，获取到数据以什么方式打开呢？打开的方式不对的话也不行。打开的方式就是 Content-Type。这个属性告诉浏览器服务器返回的数据是什么类型的。如果返回的是网页类型则为 text/html，如果是下载文件类型则为 application/octet-stream 等等。打开的方式不对，则得到的结果也不对。
   如果是下载类型，则该请求会被提交给浏览器的下载管理器，同时该请求的流程到此结束。
   如果是网页类型，那么浏览器就要准备渲染页面了。

9. 渲染页面开始。浏览器进程发出“提交文档”（文档是响应体数据）消息给渲染进程，渲染进程接收到消息后会和网络进程建立传输数据的通道，网络进程将“文档”传输给渲染进程。

10. 一旦开始传输，渲染进程便开始渲染界面

11. 渲染流程：

• 构建 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. 输出：绘制列表。
• 分块
  1. 合成线程会将较大、较长的图层（一屏显示不完，大部分不在视口内）划分为图块（tile, 256256, 512512）。
• 光栅化（栅格化）
  1. 在光栅化线程池中，将视口附近的图块优先生成位图（栅格化执行该操作）；
  2. 快速栅格化：GPU 加速，生成位图（GPU 进程）。
• 合成绘制
  1. 绘制图块命令——DrawQuad，提交给浏览器进程；
  2. 浏览器进程的 viz 组件，根据DrawQuad命令，绘制在屏幕上。

11. 传输完毕，渲染进程会发出“确认提交”消息给浏览器进程。

12. 浏览器在接收到“确认提交”消息后，更新浏览器界面状态（包括地址栏信息，仟前进后退历史，web页面和网站安全状态）。

13. 页面此时可能还没有渲染完毕，而一旦渲染完毕，渲染进程会发送一个消息给浏览器进程，浏览器接收到这个消息后会停止标签图标的加载动画。

• 自此，一个完整的页面形成了。