输入一个URL之后到浏览器显示页面期间发生了什么

左手的ㄟ右手 2023-02-23 03:54 18阅读 0赞

## 输入一个URL之后到浏览器显示页面期间发生了什么 ##

> 笔者参加的很多场面试都有问到这个问题，有时候回答的不是很好，今天来总结一下  
> 参考了敖丙的文章[https://mp.weixin.qq.com/s/I6BLwbIpfGEJnxjDcPXc1A][https_mp.weixin.qq.com_s_I6BLwbIpfGEJnxjDcPXc1A]

### 1. HTTP ###

#### 1.1 URL ####

URL称为统一资源定位符，也就是通过这个定位符我们找到网络中的资源，浏览器拿到这个资源进行解析。  
那么URL包括什么呢？看下图  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzE1NTg2Ng_size_16_color_FFFFFF_t_70]

#### 1.2 DNS解析 ####

举个例子，百度的服务器有自己的IP地址，但是IP地址一半都是\*\*\*\*.**.**.\*\*\*\*的形式，我们不方便记忆，所以问们使用域名来代替IP地址。我们访问百度的时候只需要输入[https://www.baidu.com/][https_www.baidu.com]就可以访问到百度的服务器。可以看到我们并没有输入IP地址，但是HTTP请求是一定要有IP地址才能访问到服务器的，那么这里为什么只需要域名就能访问百度呢？其实就是DNS在帮助我们，DNS通过域名解析，拿到真实的IP地址，HTTP就通过此IP地址进行访问。  
DNS 服务器就是专门保存了 Web 服务器域名与 IP 的对应关系的服务器。  
域名的层级关系表示域名服务器的层级  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzE1NTg2Ng_size_16_color_FFFFFF_t_70 1]  
**域名解析的工作流程**

1.  客户端首先会发出一个 DNS 请求，问 www.server.com 的 IP 是什么，并发给本地 DNS 服务器（也就是客户端的 TCP/IP 设置中填写的 DNS 服务器地址）。
2.  本地域名服务器收到客户端的请求后，如果缓存里的表格能找到 www.server.com，则它直接返回 IP 地址。如果没有，本地 DNS 会去问它的根域名服务器：“老大， 能告诉我 www.server.com 的 IP 地址吗？” 根域名服务器是最高层次的，它不直接用于域名解析，但能指明一条道路。
3.  根 DNS 收到来自本地 DNS 的请求后，发现后置是 .com，说：“www.server.com 这个域名归 .com 区域管理”，我给你 .com 顶级域名服务器地址给你，你去问问它吧。”
4.  本地 DNS 收到顶级域名服务器的地址后，发起请求问“老二， 你能告诉我 www.server.com 的 IP 地址吗？”
5.  顶级域名服务器说：“我给你负责 www.server.com 区域的权威 DNS 服务器的地址，你去问它应该能问到”。
6.  本地 DNS 于是转向问权威 DNS 服务器：“老三，www.server.com对应的IP是啥呀？” server.com 的权威 DNS 服务器，它是域名解析结果的原出处。为啥叫权威呢？就是我的域名我做主。
7.  权威 DNS 服务器查询后将对应的 IP 地址 X.X.X.X 告诉本地 DNS。
8.  本地 DNS 再将 IP 地址返回客户端，客户端和目标建立连接。  
    至此整个DNS解析获得IP地址的流程就完成了，下面这个图更加清晰  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzE1NTg2Ng_size_16_color_FFFFFF_t_70 2]

#### 1.3 TCP传输层协议 ####

通过DNS解析拿到IP地址之后，就可以向服务器发送HTTP请求，建立HTTP请求后就通过传输层协议TCP/IP进行数据传输。其中包含了TCP三次握手的过程。

### 2. 服务器处理 ###

服务器接收到HTTP请求之后，找到相对应得资源，生成HTTP响应，返回到客户端。

### 3. 服务端（浏览器）解析 ###

浏览器接收到HTTP响应之后，显示接收到得HTML页面，同时发送请求拿到嵌入到HTML中得js与图片资源。

[https_mp.weixin.qq.com_s_I6BLwbIpfGEJnxjDcPXc1A]: https://mp.weixin.qq.com/s/I6BLwbIpfGEJnxjDcPXc1A
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzE1NTg2Ng_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200705102629486.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzE1NTg2Ng==,size_16,color_FFFFFF,t_70
[https_www.baidu.com]: https://www.baidu.com/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzE1NTg2Ng_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200705103530730.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzE1NTg2Ng==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzE1NTg2Ng_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20200705104303551.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzE1NTg2Ng==,size_16,color_FFFFFF,t_70