从七层网络模型到输入 URL 会发生什么

OSI七层模型与TCP/IP 四/五层模型

OSI 模型是从上往下的，越底层越接近硬件，越往上越接近软件，这七层模型分别是:

• 物理层： 底层数据传输，如网线、网卡标准。
• 数据链路层： 定义数据的基本格式，如何传输、标识，如网卡MAC地址。
• 网络层： 定义IP编址，定义路由功能，如不同设备的数据转发。
• 传输层： 端到端传输数据的基本功能，如 TCP、UDP。
• 会话层： 控制应用程序之间会话能力，如不同软件数据分发给不同软件。
• 标识层： 数据格式标识，基本压缩加密功能。
• 应用层： 各种应用软件，包括 Web 应用，其中http协议属于应用层

TCP/IP 四/五层模型

• 网络接口层： 物理层、数据链路层（可合并）
• 网络层
• 传输层
• 应用层包含会话层、标识层

输入 url 会发生什么

• 判断 url 合法性
• DNS 解析
• 建立 TCP 连接
• 发送 HTTP / HTTPS 请求（建立 TLS 连接）
• 服务器响应请求
• 浏览器收到响应，并解析渲染页面
• HTTP 请求结束，断开 TCP 连接

DNS 解析

• 检查浏览器缓存
• 检查操作系统缓存（本地的 hosts 文件）
• 检查本地 DNS 服务器是否缓存该网址记录
• 本地 DNS 服务器发送查询报文至根 DNS 服务器，根 DNS 服务器收到请求后，用顶级域 DNS 服务器地址进行响应。
• 本地 DNS 服务器发送查询报文至顶级域 DNS 服务器。顶级域 DNS 服务器收到请求后，用权威 DNS 服务器地址进行响应。
• 本地 DNS 服务器发送查询报文至权威 DNS 服务器，权威 DNS 服务器收到请求后，用 hzfe.org 的 IP 地址进行响应，完成域名解析。

查询通常遵循以上流程，从请求主机到本地 DNS 服务器的查询是递归查询 （帮你问别人），DNS 服务器获取到所需映射的查询过程是迭代查询（告诉你问谁）

建立 TCP 连接

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

1.客户端主动请求连接，发送 SYN 包（seq = j）到服务器，并进入 SYN_SEND 状态，等待服务器确认。

2.服务器收到请求，给客户端确认信息并请求连接，即收到 SYN 包，必须确认客户的 SYN（ACK = j + 1），同时自己也发送一个 SYN 包（seq = k），即 SYN+ACK 包，此时服务器进入 SYN_RECV 状态。

3.客户端收到服务器的请求，向服务器发送确认连接，即发送包 ACK（ACK = k + 1），此包发送完毕，客户端和服务器进入 ESTABLISHED 状态，完成三次握手。

发送 HTTP 请求

客户端构建一个HTTP请求，其中包含以下信息：

• 请求方法（GET、POST、PUT、DELETE等）
• 请求的资源路径（Uniform Resource Identifier，URI）
• HTTP版本号
• 请求头（包含一些元数据，如User-Agent、Content-Type等）
• 请求体（对于POST和PUT请求，可能包含请求的实际数据）

在发送http请求时会先进行缓存查询（get请求），分为强制缓存和协商缓存，强制缓存如果生效，不需要再和服务器发生交互，而协商缓存不管是否生效，都需要与服务端发生交互

状态码

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

1xx：指示信息------表示请求已接收，继续处理

• 100 Continue： 请求的初始部分已被接收，客户端应继续发送其余部分

2xx：成功------表示请求已被成功接收、理解、接受

• 200 OK： 请求成功。常用于GET和POST请求。
• 201 Created： 请求已经被实现，而且有一个新的资源已经依据请求的需要而建立。
• 204 No Content： 服务器成功处理了请求，但没有返回任何内容。

3xx：重定向------要完成请求必须进行更进一步的操作

• 301 Moved Permanently： 被请求的资源已永久移动到新位置。
• 302 Found： 请求的资源现在临时从不同的 URI 响应请求。
• 304 Not Modified： 资源未被修改，可以使用缓存的版本。

4xx：客户端错误------请求有语法错误或请求无法实现

• 400 Bad Request： 服务器无法理解请求的语法。
• 401 Unauthorized： 请求要求身份验证。
• 403 Forbidden： 服务器拒绝请求。
• 404 Not Found： 服务器找不到请求的资源。

5xx：服务器端错误------服务器未能实现合法的请求

• 500 Internal Server Error： 服务器遇到了一个未曾预料的状况，导致了它无法完成对请求的处理。

• 502 Bad Gateway： 服务器作为网关或代理，从上游服务器收到无效响应。

• 503 Service Unavailable： 服务器当前不能处理请求（可能是暂时的情况）。

HTTPS

如果使用 HTTPS，会在 TCP 与 HTTP 之间多添加一层协议做加密及认证的服务。HTTPS 使用 SSL（Secure Socket Layer） 和 TLS（Transport Layer Security） 协议，保障了信息的安全。 客户端和服务器之间需要进行握手协议，完成加密算法的协商和会话密钥的传递，然后进行安全数据传输。 其简要过程如下：

1.服务器的公钥和私钥： 服务器生成一对公钥和私钥。公钥用于加密，私钥用于解密。

2.服务器向客户端发送公钥： 服务器在握手阶段将自己的公钥发送给客户端。

3.加密对称密钥： 客户端使用服务器的公钥，将生成的对称密钥进行加密，并将其发送给服务器。

4.解密对称密钥： 服务器使用自己的私钥，解密客户端发送过来的加密的对称密钥。

5.建立对称密钥通信： 此时，服务器和客户端都拥有相同的对称密钥，用于加密和解密实际的通信内容。

浏览器解析并绘制

1.解析 HTML ：解析整个html内的所有内容，输出DOM和CSSOM树

2.样式计算 ：合并DOM和CSSOM树，计算得到初步的样式

3.布局 ：将render树通过计算相对大小、位置等信息，得到layout树

4.分层：在这一步将得到最终样式的树进行分层处理，方便后面有操作或更新时的最小影响

5.绘制：将已经分层的内容生成指令集，每个指令代表本层是如何进行绘制，到此渲染主线程任务结束

6.分块：将已经分层好的内容进行颗粒度再小的分块，此时交由合成线程，合成线程会开辟多个线程同时进行

7.光栅化 ： 在此步骤将我们已经分块好的内容交由GPU进行光栅化，这一步会得到一个一个的位图块儿

8.画：将我们得到的一堆位图块进行最终合并画到屏幕上

注： CSS不会阻塞 HTML 的解析，但是会阻塞渲染；js会阻塞html解析，因此可以给script设置 defer（即会先异步下载js文件，完成html解析后再执行）

四次挥手断开 TCP 连接

1.请求断开连接，主动关闭方发送一个 FIN，用来关闭主动方到被动关闭方的数据传送，也就是主动关闭方告诉被动关闭方：我已经不会再给你发数据了（在 FIN 包之前发送出去的数据，如果没有收到对应的 ACK 确认报文，主动关闭方依然会重发这些数据），但此时主动关闭方还可以接受数据。

2.被动关闭方收到 FIN 包后，发送一个 ACK 给对方，确认收到请求序号为收到序号+1（与 SYN 相同，一个 FIN 占用一个序号）。

3.发送断开连接请求，被动关闭方发送一个 FIN，用来关闭被动关闭方到主动关闭方的数据传送，也就是告诉主动关闭方，我的数据也发送完了，不会再给你发数据了。

4.主动关闭方收到 FIN 后，发送一个 ACK 给被动关闭方，确认断开序号为收到序号+1，至此，完成四次挥手。