浏览器从输入网址到页面展示的过程

[jannahuang]

1. URL 输入

当在浏览器地址栏输入 URL 并且回车后，浏览器会对输入的信息进行以下判断：

1. 检查输入的内容是否是一个合法的 URL 链接。
2. 是，则判断输入的 URL 是否完整。如果不完整，浏览器可能会对域进行猜测，补全前缀或者后缀。
3. 否，将输入内容作为搜索条件，使用用户设置的默认搜索引擎来进行搜索。

2. DNS 解析

浏览器不能直接通过域名找到对应的服务器 IP 地址，所以需要进行 DNS 解析，查找到对应的 IP 地址进行访问。 DNS 解析流程如下：

1. 在浏览器中输入域名，操作系统检查浏览器缓存和本地的 hosts 文件中，是否有这个网址记录，有则从记录里面找到对应的 IP 地址，完成域名解析。
2. 查找本地 DNS 解析器缓存中，是否有这个网址记录，有则从记录里面找到对应的 IP 地址，完成域名解析。
3. 使用 TCP/IP 参数中设置的 DNS 服务器进行查询。如果要查询的域名包含在本地配置区域资源中，则返回解析结果，完成域名解析。
4. 检查本地 DNS 服务器是否缓存该网址记录，有则返回解析结果，完成域名解析。
5. 本地 DNS 服务器发送查询报文至根 DNS 服务器，根 DNS 服务器收到请求后，用顶级域 DNS 服务器地址进行响应。
6. 本地 DNS 服务器发送查询报文至顶级域 DNS 服务器。顶级域 DNS 服务器收到请求后，用权威 DNS 服务器地址进行响应。
7. 本地 DNS 服务器发送查询报文至权威 DNS 服务器，权威 DNS 服务器收到请求后，用 hzfe.org 的 IP 地址进行响应，完成域名解析。

3. 建立 TCP 连接

世界上几乎所有的 HTTP 通信都是由 TCP/IP 承载的，TCP/IP 是全球计算机及网络设备都在使用的一种常用的分组交换网络分层。 HTTP 的连接实际上就是 TCP 连接以及其使用规则。 –《HTTP 权威指南》

TCP 三次握手

建立连接前双方需要确认对方的收/发消息的能力，以及沟通好要使用的并且双方都支持的协议等，所以要先发起三次握手来确认。

1. 客户端发送 SYN 包（seq = j）到服务器，并进入 SYN_SEND 状态，等待服务器确认。
2. 服务器收到 SYN 包，必须确认客户的 SYN（ACK = k + 1），同时自己也发送一个 SYN 包（seq = k），即 SYN+ACK 包，此时服务器进入 SYN_RECV 状态。
3. 客户端收到服务器的 SYN+ACK 包，向服务器发送确认包 ACK（ACK = k + 1），此包发送完毕，客户端和服务器进入 ESTABLISHED 状态，完成三次握手。

4. 发送 HTTP / HTTPS 请求（建立 TLS 连接）

建立连接后就可以通过 HTTP 进行数据传输。如果使用 HTTPS，会在 TCP 与 HTTP 之间多添加一层协议做加密及认证的服务。HTTPS 使用 SSL（Secure Socket Layer） 和 TLS（Transport Layer Security） 协议，保障了信息的安全。

• SSL

  • 认证用户和服务器，确保数据发送到正确的客户端和服务器。
  • 加密数据防止数据中途被窃取。
  • 维护数据的完整性，确保数据在传输过程中不被改变。

• TLS 用于在两个通信应用程序之间提供保密性和数据完整性。该协议由两层组成：TLS 记录协议（TLS Record）和 TLS 握手协议（TLS Handshake）。

5. 服务器响应请求

当浏览器到 web 服务器的连接建立后，浏览器会发送一个初始的 HTTP GET 请求，请求目标通常是一个 HTML 文件。服务器收到请求后，将发回一个 HTTP 响应报文，内容包括相关响应头和 HTML 正文。 浏览器接收到响应数据之后，如果是 http1.1 以下则直接关闭连接，否则双方都可以根据情况选择关闭 TCP 连接或者保留重用，现在浏览器默认都会保持连接(keep-alive)。

状态码

状态码是由 3 位数组成，第一个数字定义了响应的类别：

• 1xx：指示信息——表示请求已接收，继续处理
• 2xx：成功——表示请求已被成功接收、理解、接受
• 3xx：重定向——要完成请求必须进行更进一步的操作
• 4xx：客户端错误——请求有语法错误或请求无法实现
• 5xx：服务器端错误——服务器未能实现合法的请求

常见的请求头和字段

• Cache-Control：must-revalidate、no-cache、private（是否需要缓存资源）
• Connection：keep-alive（保持连接）
• Content-Encoding：gzip（web 服务器支持的返回内容压缩编码类型）
• Content-Type：text/html；charset=UTF-8（文件类型和字符编码格式）
• Date：Sun， 21 Sep 2021 06:18:21 GMT（服务器消息发出的时间）
• Transfer-Encoding：chunked（服务器发送的资源的方式是分块发送）

6. 浏览器解析渲染页面

不同的浏览器引擎渲染过程有差异，以 chrome 为例。 浏览器不能直接理解和使用 html，所以要先构建 DOM 树，将 html 转为浏览器认识的结构。浏览器同样不认识 CSS 样式文本，所以渲染引擎拿到 CSS 之后，首先格式化CSS 并将其转为一个成浏览器认识的结构。

1. 处理 HTML 标记并构建 DOM 树。
2. 处理 CSS 标记并构建 CSSOM 树。
3. 将 DOM 与 CSSOM 合并成一个渲染树。
4. 根据渲染树来布局，以计算每个节点的几何信息。
5. 将各个节点绘制到屏幕上。

7. HTTP 请求结束，断开 TCP 连接

现在的页面为了优化请求的耗时，默认都会开启持久连接（keep-alive），那么一个 TCP 连接确切关闭的时机，是这个 tab 标签页关闭的时候。这个关闭的过程就是四次挥手。

1. 浏览器先发送 FIN 报文、Seq=初始化序列号 给服务器，并停止发送数据，但仍可以接受服务端响应的数据
2. 服务器收到后，发送 ACK=浏览器序列号+1 给浏览器，表明收到
3. 服务器数据都发完了，给浏览器发送 FIN 报文、Seq=序列号 给浏览器
4. 浏览器收到后，发送 ACK=服务器序列号+1 给服务器，表明收到

以上笔记参考 浏览器从输入网址到页面展示的过程，输入URL到页面显示的前端体系知识