流程

浏览器从输入网址到渲染页面主要分为以下几个过程

  • URL输入
  • DNS解析
  • 建立TCP连接
  • 发送 HTTP / HTTPS 请求（建立 TLS 连接）
  • 服务器响应请求
  • 浏览器解析渲染页面
  • HTTP请求结束，TCP断开连接

深入

1.URL输入

https://wn244.com:443/2022/04/07/hello-world?search=true

https(protocol-协议)

wn233.com(hostname-主机名)

443(port端口号)

/2022/04/07/hello-world(pathname)

?search=true(search)

URL（统一资源定位符，Uniform Resource Locator）用于定位互联网上资源，俗称网址。

当我们在浏览器中输入wn244.com的网址后敲下回车，浏览器会对输入的信息进行判断：

  1. 检查输入的地址是否是一个合法的URL。
  2. 如果是，浏览器会判断URL是否完整，然后根据历史记录和书签对输入的网址进行猜测并给出智能提示。
  3. 如果不是，通常会将输入的内容作为搜索条件，用浏览器默认的搜索引擎进行搜索。
2.DNS解析

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

  1. 在浏览器中输入 wn244.cn 域名，操作系统检查浏览器缓存和本地的 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 服务器收到请求后，用 wn244.cn 的 IP 地址进行响应，完成域名解析。
3.建立TCP连接

当浏览器获取到服务器的 IP 地址后，浏览器会用一个随机的端口（1024 < 端口 < 65535）向服务器 80 端口发起 TCP 连接请求（注：HTTP 默认约定 80 端口，HTTPS 为 443 端口）。这个连接请求到达服务端后，通过 TCP 三次握手，建立 TCP 的连接。

3.1分层模型
7 应用层 应用层 HTTP
6 表示层
5 会话层
4 传输层 传输层 TCP TLS
3 网络层 网络层
2 数据链路层 链路层 IP
1 物理层
[OSI] [TCP/IP]
3.2TCP三次握手

# SYN 是建立连接时的握手信号，TCP 中发送第一个 SYN 包的为客户端，接收的为服务端
# TCP 中，当发送端数据到达接收端时，接收端返回一个已收到消息的通知。这个消息叫做确认应答 ACK

假设有客户端A，服务端B。我们要建立可靠的数据传输。
SYN(=j) // SYN: A 请求建立连接
A —————> B
|
ACK(=j+1) | // ACK: B 确认应答 A 的 SYN
SYN(=k) | // SYN: B 发送一个 SYN
A <————-
|
| ACK(=k+1)
—————–> B // ACK: A 确认应答 B 的包

  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 状态，完成三次握手。

为什么需要第三次通信 ？

第一次通信中，客户端A向服务端B发送消息，服务端B收到消息，此时服务端B可知客户端A发送消息正常，服务端B接收消息正常

第二次通信中，服务端B向客户端A发送应答消息，客户端A收到消息，此时客户端A可知客户端A发送消息正常，客户端A接收消息正常，服务端B接收消息正常，服务端B发送消息正常

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）。较低的层为 TLS 记录协议，位于某个可靠的传输协议（例如 TCP）上面。
5.服务器响应

当浏览器到 web 服务器的连接建立后，浏览器会发送一个初始的 HTTP GET 请求，请求目标通常是一个 HTML 文件。服务器收到请求后，将发回一个 HTTP 响应报文，内容包括相关响应头和 HTML 正文。 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<head>
    <meta charset="UTF-8" />
    <title>我的博客</title>
    <link rel="stylesheet" src="styles.css" />
    <scrIPt src="index.js"></scrIPt>
</head>

<body>
    <h1 class="heading">首页</h1>
    <p>A paragraph with a <a href="https://hzfe.org/">link</a></p>
    <scrIPt src="index.js"></scrIPt>
</body>

</html>
5.1状态码

状态码是由 3 位数组成，第一个数字定义了响应的类别，且有五类可能取值

  • 1xx：指示信息——表示请求已接收，继续处理
  • 2xx：成功——表示请求已被成功接收、理解、接受
  • 3xx：重定向——要完成请求必须进行更进一步的操作
  • 4xx：客户端错误——请求有语法错误或请求无法实现
  • 5xx：服务器端错误——服务器未能实现合法的请求
5.2常见的请求头和字段
  • 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（服务器发送的资源的方式是分块发送）
5.3HTTP响应报文

响应报文由四部分组成（响应行 + 响应头 + 空行 + 响应体）

  • 状态行：HTTP 版本 + 空格 + 状态码 + 空格 + 状态码描述 + 回车符（CR） + 换行符（LF）
  • 响应头：字段名 + 冒号 + 值 + 回车符 + 换行符
  • 空行：回车符 + 换行符
  • 响应体：由用户自定义添加，如 post 的 body 等
6.浏览器解析并绘制

不同的浏览器引擎渲染过程都不太一样，这里以 Chrome 浏览器渲染方式为例。

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

现在的页面为了优化请求的耗时，默认都会开启持久连接（keep-alive），那么一个 TCP 连接确切关闭的时机，是这个 tab 标签页关闭的时候。这个关闭的过程就是四次挥手。关闭是一个全双工的过程，发包的顺序是不一定的。一般来说是客户端主动发起的关闭。