从输入 URL 到页面展示完整流程

从输入 URL 到页面展示完整流程示意图

1. 用户输入URL并回车，地址栏会判断输入的关键字是搜索内容，还是请求的 URL；
   1. 如果是搜索内容，地址栏会使用浏览器默认的搜索引擎，来合成新的带搜索关键字的 URL；
   2. 如果判断输入内容符合 URL 规则，那么地址栏会根据规则，把这段内容加上协议，合成为完整的 URL。
2. 浏览器进程会通过进程间通信（IPC）把 URL 请求发送至网络进程；
3. 网络进程接收到URL请求后检查本地缓存是否缓存了该请求资源，如果有则将该资源返回给浏览器进程；
4. 如果在缓存中没有查找到资源，那么直接进入网络请求流程。请求流程如下：
   1. 进行 DNS 解析（或使用DNS缓存），以获取请求域名的服务器 IP 地址；
   2. 如果URL包含端口则用之，没有则用默认端口。HTTP 协议默认是 80 端口，HTTPS则是443；
   3. 利用 IP 地址和服务器建立 TCP 连接；
      1. 建立连接阶段 - 三次握手
      2. 传输数据阶段
         1. 接收端需要对每个数据包进行确认操作
         2. 接收端按照 TCP 头中的序号为其排序
      3. 断开连接阶段 - 四次挥手
   4. 如果请求协议是 HTTPS，那么还需要建立 TLS 连接；
   5. 浏览器端会构建请求行、请求头等信息，并向服务器发送构建的请求信息；
   6. 数据传输。服务器接收到请求信息后，会根据请求信息生成响应数据（包括响应行、响应头和响应体等信息），并发给网络进程。
5. 网络进程解析响应流程：
   1. 检查状态码：
      1. 如果是301/302，则需要重定向，从Location自动中读取地址，重头开始；
      2. 如果不是重定向，首先服务器会根据 请求头中的 If-None-Match 的值来判断请求的资源是否被更新，如果没有更新，就返回304状态码，相当于告诉浏览器之前的缓存还可以使用，就不返回新数据了；
      3. 否则，返回新数据，200的状态码，并且如果想要浏览器缓存数据的话，就在响应头中加入字段：
         Cache-Control:Max-age=2000（缓存过期时间，秒）。
      4. 如果没有找到页面，则会返回 404。
   2. 数据传输完成，TCP四次挥手断开连接。如果，浏览器或者服务器在HTTP头部加上Connection:Keep-Alive，TCP就一直保持连接。保持 TCP 连接可以省去下次请求时需要建立连接的时间，提升资源加载速度。
   3. 响应数据类型 Content-Type 处理：
      1. Content-Type：text/html，HTML 格式，通知浏览器进程准备渲染进程准备进行渲染；
      2. Content-Type：application/octet-stream，字节流类型，就将该请求交给下载管理器，该导航流程结束。
6. 准备渲染进程：
   1. 渲染进程策略
      1. 通常情况下，打开新的页面都会使用单独的渲染进程；
      2. 如果从 A 页面打开 B 页面，且 A 和 B 都属于同一站点的话，那么 B 页面复用 A 页面的渲染进程；如果是其他情况，浏览器进程则会为 B 创建一个新的渲染进程。
7. 提交文档，浏览器进程将网络进程接收到的 HTML 数据提交给渲染进程
   1. 浏览器进程在收到“确认提交”的消息后，会更新浏览器界面状态，包括了安全状态、地址栏的 URL、前进后退的历史状态，并更新 Web 页面。
   2. 等文档数据传输完成之后，渲染进程会返回“确认提交”的消息给浏览器进程；
   3. 渲染进程接收到“提交文档”的消息后，会和网络进程建立传输数据的“管道”；
   4. 浏览器进程在收到“确认提交”的消息后，会更新浏览器界面状态，包括了安全状态、地址栏的 URL、前进后退的历史状态，并更新 Web 页面。
8. 渲染阶段
   1. 渲染进程将 HTML 内容转换为能够读懂的 DOM 树结构；
   2. 渲染引擎将 CSS 样式表转化为浏览器可以理解的 styleSheets，计算出 DOM 节点的样式；
   3. 创建布局树，并计算元素的布局信息；
   4. 对布局树进行分层，并生成分层树；
   5. 为每个图层生成绘制列表，并将其提交到合成线程；
   6. 合成线程将图层分成图块，并在光栅化线程池中将图块转换成位图；
   7. 合成线程发送绘制图块命令 DrawQuad 给浏览器进程；
   8. 浏览器进程根据 DrawQuad 消息生成页面，并显示到显示器上。

以下为参考示意图：

一个 TCP 连接的生命周期

TCP 和 HTTP 的关系示意图

缓存查找流程示意图

完整的渲染流水线示意图