面试必问题：七步详解浏览器输入URL到回车发生了什么

男娘i 2022-11-21 11:33 148阅读 0赞

### 文章目录 ###

*   *   *  【流程概括】
         *  1. URL解析
         *  2. DNS解析
         *  3. TCP三次握手建立连接
         *  4. 浏览器向web服务器发送HTTP请求
         *  5. 服务器处理请求并返回HTTP报文
         *  7. TCP四次挥手断开连接

### 【流程概括】 ###

1.  URL解析：解析HTTP协议、端口、资源地址
2.  DNS解析：将域名解析为IP地址，并且通过ARP协议根据IP地址寻找MAC地址
3.  建立TCP连接：TCP三次握手
4.  发送HTTP请求
5.  服务器处理HTTP请求并返回响应
6.  浏览器解析并渲染页面
7.  断开连接：TCP四次挥手

--------------------

### 1. URL解析 ###

`https://www.baidu.com/`

URL遵循的规则：

scheme://host.domain:port/path/filename

*  `scheme`：定义应用层协议类型，如HTTP、HTTPS、FTP
 *  `host`：定义域主机（HTTP默认为www）
 *  `domain`：定义域名
 *  `port`：主机端口号（HTTP默认80，HTTPS默认443）
 *  `path`：服务器上的资源路径
 *  `filename`：资源名称

--------------------

### 2. DNS解析 ###

1.  浏览器缓存：先查找你本地浏览器的缓存，看是否有相关的映射
2.  操作系统缓存：查看本机**host**文件是否有相关纪录
3.  路由缓存：检查路由器的DNS缓存
4.  **ISP的DNS服务器**：向本地DNS服务器【网络运营商（电信、移动、联通）】发起查询请求。

*  本地DNS服务器收到请求后，ISP先会查询自己的缓存记录，如果查询到就直接返回；
 *  未查询到，本地DNS服务器向 **DNS根域名服务器** 发起查询请求

1.  根域名服务器收到请求后，发现是`.com`域名，递归向下请求`.com` **顶级域名服务器**
2.  本地 DNS 服务器接到回信后，向 `.com` 的 **顶级域名服务器** 发起查询请求，发现为`baidu.com`，进入下一级查找
3.  `baidu.com` **权威域名服务器** 接收到请求后，确认了是自己管理的域名，把 www.baidu.com 的 IP地址告诉了 **本地DNS服务器**
4.  本地DNS服务器接收到回信后，将IP地址返回给本机，并做缓存

--------------------

### 3. TCP三次握手建立连接 ###

TCP/IP分模型建立连接

【应用层】：发送HTTP请求

【传输层】：传输TCP报文，建立TCP连接

【网络层】：IP协议 查询MAC地址（ARP寻址），进行数据传输、路由选择

【数据链路层】：以太网协议将数据分为以“帧”为单位的数据包进行发送

【物理层】：转化为0101的光电信号传输

**三次握手：**

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzIzMjk1NQ_size_16_color_FFFFFF_t_70_pic_center]  
**【握手阶段】**

1.  建立链接前需要 Server 端先监听端口，因此 Server 端建立链接前的初始状态就是 LISTEN 状态，这时 Client 端准备建立链接。在第一次消息发送中，Client随机选取一个序列号作为自己的初始序号发送给Server，Client 端的链接状态变成了 SYN\_SENT 状态；
2.  **Server收到了来自Client的连接请求，如果在资源条件合理的情况下，服务器为该TCP连接分配缓存和变量**。Server使用ACK对A的数据包进行确认，因为已经收到了序列号为`x`的数据包，准备接收序列号为 `x+1` 的包，所以 `ack=x+1`，同时B告诉A自己的初始序列号，就是`seq=y`；发送完 ACK 和 SYN 后，Server 端的链接状态就变成了 SYN\_RCVD
3.  Client 收到 Server 的 ACK 后，Client 端的链接状态就变成了 ESTABLISHED 状态。同时，Client 向 Server 端发送 ACK，回复 Server 端的 SYN 请求。Client回复 `seq=x+1`、`ack=y+1` ，Client为该TCP连接分配缓存和变量

--------------------

### 4. 浏览器向web服务器发送HTTP请求 ###

TCP三次握手之后，开始发送HTTP请求报文至服务器

HTTP请求报文格式：`请求行` \+ `请求头` \+ `空行` \+ `消息体`

请求行包括请求方式（GET/POST/DELETE/PUT）、请求资源路径（URL）、HTTP版本号；

【默认GET请求，默认HTTP1.1，默认长连接`Connection:keep-alive`】

![在这里插入图片描述][202011011123036.png_pic_center]

--------------------

### 5. 服务器处理请求并返回HTTP报文 ###

浏览器拿到响应文本后，解析HTML代码，请求js，css等资源，最后进行页面渲染，呈现给用户。

页面渲染一般分为以下几个步骤：

1.  根据HTML文件解析出DOM Tree
2.  根据CSS解析出 CSSOM Tree(CSS规则树)
3.  将 DOM Tree 和 CSSOM Tree合并，构建Render tree(渲染树)
4.  reflow(重排)：根据Render tree进行节点信息计算（Layout）
5.  repaint(重绘)：根据计算好的信息绘制整个页面（Painting）

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzIzMjk1NQ_size_16_color_FFFFFF_t_70_pic_center 1]

--------------------

### 7. TCP四次挥手断开连接 ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzIzMjk1NQ_size_16_color_FFFFFF_t_70_pic_center 2]

**【挥手阶段】**

1.  Client请求关闭连接。首先主动向Server发送一个 TCP 首部 `FIN` 标志位被置为 `1` 的报文，Client随机选取一个序列号`seq=u`作为自己的初始序号发送给Server，之后客户端进入 `FIN_WAIT_1` 状态。
2.  Server回应`ACK`对Client的数据包进行确认，回复确认号`ack=u+1`，同时Server告诉Client自己的初始序列号`seq=v`；客户到服务器这个方向的连接就成了一一半关闭 CLOSED\_WAIT 状态。由于Server可能还与他客户端同时在通信，或者可能此时对A的数据没有发送完，这次不会回复`FIN`标志位。
3.  第三条消息Server告诉Client可以断开连接，数据已传输完，。回复`FIN=1`，`ACK=1`确认。Server依然恢复第二次的确认号`ack=u+1`，因为这段时间A处于半关闭状态，并没有在发送数据 。并且回复`seq =v`服务端进入 LAST\_ACK状态
4.  Clint收到Server的反馈后，回送`ACK=1`，由于要断开连接不再发送数据了，`seq=u+1`（序号为上次Server回复Client的ack），`ack=w+1`。发送完后Clinet进入 **TIME\_WAIT**状态。客户端在等待**2MSL**后，确保Server收到第四条消息后，自动进入 CLOSE状态。服务器收到第四条消息后进入了 CLOSE状态。至此客户端也完成连接的关闭。

--------------------

先说说我对这个问题的看法：

面试官一旦问到了这个问题，基本是对网络协议一个整体的考察。因为基本常见的网络协议都会涉及到，如果展开来讲的话内容真的很多。当然，容易被问到的细节问题也有很多，前方很多隐藏坑待你去踩！

**大致关联到的知识点有：**

1.  HTTP协议相关知识点
2.  HTTP不同版本之间的差别
3.  HTTPS的加密过程
4.  DNS域名解析
5.  ARP协议
6.  TCP三次握手和四次挥手
7.  Ping命令

TCP/IP里面的各种面试问题还有很多，需要细细梳理，这里不做赘述。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzIzMjk1NQ_size_16_color_FFFFFF_t_70_pic_center]: /images/20221120/ae0589b507e941bdad2544e72ead13e0.png
[202011011123036.png_pic_center]: /images/20221120/24378db3545a492598d55223a4530485.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzIzMjk1NQ_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221120/fdd0928faeae4a40b8317d6002feada3.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzIzMjk1NQ_size_16_color_FFFFFF_t_70_pic_center 2]: /images/20221120/3e0a61f7a3ec44319696c2e29fa88530.png