面试题：从输入URL到页面加载的过程？

àì夳堔傛蜴生んèń 2023-02-27 12:26 51阅读 0赞

### 目录 ###

*   *   *  1. DNS解析
         *   *  1.1 DNS解析过程
             *  1.2 递归和迭代查询
             *  1.3 DNS缓存机制
         *  2. TCP连接
         *  3. 发送HTTP请求
         *   *  3.1 HTTP请求过程
             *  3.2 HTTP缓存机制
             *  3.3 协议层传输过程
         *  4. 服务器处理请求并返回HTTP报文
         *  5. TCP断开
         *  6. 浏览器解析渲染页面
         *   *  6.1 渲染解析过程
             *  6.2 CSSOM
             *  6.3 JavaScript解析
             *  6.4 构建渲染树

**在浏览器中输入URL到页面加载的过程？** 这已经是老生常谈的问题了，但是答案可简可繁，涉及到的知识点还很多。总的来说，主要是有以下几个过程：

*  DNS解析
 *  TCP连接
 *  发送HTTP请求
 *  服务器处理请求并返回HTTP报文
 *  TCP断开
 *  浏览器解析渲染页面

下面就来整理一下这些过程的具体内容。

### 1. DNS解析 ###

#### 1.1 DNS解析过程 ####

DNS解析的过程实际上就是寻找我们所需要的资源的所在位置的过程。

浏览器输入的URL发送给DNS服务器，DNS会查询与域名所对应的IP地址，然后将其返回给浏览器。之后，浏览器将根据IP地址发送HTTP请求。

在上述过程中，最重要的就是DNS服务器解析域名的过程：

*  首先会在**浏览器的缓存**中查找对应的IP地址，如果查找到直接返回，若找不到继续下一步
 *  在**操作系统缓存**中进行查询，如果查找到直接返回，若找不到继续下一步
 *  将请求发送给本地域名服务器，在**本地域名服务器缓存**中查询，如果查找到，就直接将查找结果返回，若找不到继续下一步
 *  本地域名服务器向**根域名服务器**发送请求，根域名服务器会返回一个所查询域的顶级域名服务器地址
 *  本地域名服务器向**顶级域名服务器**发送请求，接受请求的服务器查询自己的缓存，如果有记录，就返回查询结果，如果没有就返回相关的下一级的域名服务器的地址
 *  本地域名服务器向**域名服务器**发送请求，域名服务器返回对应的结果
 *  本地域名服务器将返回结果保存在缓存中，便于下次使用
 *  本地域名服务器将返回结果返回给浏览器

#### 1.2 递归和迭代查询 ####

实际上，DNS解析是一个包含**迭代查询**和**递归查询**的过程。

**迭代查询：** 客户端只发送一次请求，需要对方给出结果，而返回的结果只有两种可能：查询成功和查询失败。**客户端向本地DNS服务器发送请求属于递归查询。**

**迭代查询：** 客户端发送一次请求，对方没有授权回答，就会返回一个能解答这个查询的相关的服务器的地址，客户端再次向该地址发送请求，直到找到需要的结果为止，这就是迭代查询的过程。**本地DNS服务器向其他DNS服务器发送属于迭代查询。**

#### 1.3 DNS缓存机制 ####

一个域名的DNS会在本地进行两次缓存：**浏览器缓存**和**操作系统缓存**。在浏览器你访问URL的时候，会优先在浏览器缓存中进行查找，未找到则去操作系统的缓存中查找，如果还未找到，再去DNS服务器进行查找。

在DNS缓存中会有一个值叫做TTL（Time To Live），单位为秒，大致意思就是这条缓存的有效期是多长时间。操作系统缓存会参考这个TTL值，但是不完全相等；浏览器缓存跟这个值无关，每个浏览器的缓存的有效时间都是一个固定的值。

### 2. TCP连接 ###

在客户端发送请求之前，要先发起TCP的三次握手，以此来同步客户端和服务端的序列号和确认号，并交换TCP窗口大小信息。

为确保数据传输服务的可靠性，TCP协议采用了三次握手的策略：

*  客户端首先发送一个带有SYN标志的数据包给服务端，这一步的目的是**让服务端知道客户端能发送数据**
 *  服务端收到之后，回传一个带有SYN/ACK标志的数据包以传达确认信息，这一步的目的是**让客户端知道服务端能够接收结合发送数据**
 *  客户端再次发送一个带有ACK标志的数据包，握手结束，这一步的目的是**让服务端知道客户端能够接收数据**

![在这里插入图片描述][20200720193522462.png]

其中：

*  ACK: 应答
 *  SYN： 同步，表示开始会话请求
 *  seq：一个数据段的第一个序列号

对于上图中的握手过程：

*  **第一次握手**：客户端A将标志位SYN置为1，随机产生一个值为seq=X（X的取值范围为=1234567）的数据包到服务器，客户端A进入SYN\_SENT状态，等待服务端B确认
 *  **第二次握手**：服务端B收到数据包后由标志位SYN=1知道客户端A请求建立连接，服务端B将标志位SYN和ACK都置为1，ack=X+1，随机产生一个值seq=Y，并将该数据包发送给客户端A以确认连接请求，服务端B进入SYN\_RCVD状态
 *  **第三次握手**：客户端A收到确认后，检查ack是否为X+1，ACK是否为1，如果正确则将标志位ACK置为1，ack=Y+1，并将该数据包发送给服务端B，服务端B检查ack是否为Y+1，ACK是否为1，如果正确则连接建立成功，客户端A和服务端B进入ESTABLISHED状态，完成三次握手，随后客户端A与服务端B之间可以开始传输数据了

### 3. 发送HTTP请求 ###

HTTP协议属于TCP/IP族协议，它用于主机之间的网络通信。

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

其中，请求头中包含请求方式，请求资源的路径（URL），HTTP版本号等信息。

#### 3.1 HTTP请求过程 ####

HTTP发送请求的过程：

*  首选会在浏览器的缓存中查找是否有所需的数据
 *  如果有就返回相应数据，如果没有就向服务器发送请求
 *  服务器会返回需要的数据以及缓存规则
 *  浏览器将接收数据，并按照缓存规则将数据进行缓存

#### 3.2 HTTP缓存机制 ####

HTTP的缓存主要分为两种：

*  **强缓存**：请求的资源在缓存中没有过期时，不与服务器进行交互，直接使用缓存中的数据
 *  **协商缓存**：当强缓存过期未命中或者`Cache-Control`中有`must-revalidate`标识表示每次都需要验证资源状态时，使用协商缓存去处理缓存文件。从缓存数据库中取出缓存的标识，向服务器发送请求，验证请求的数据是否更新，如果已更新，则返回新的数据，如果未更新，则使用缓存中的数据。

缓存的过程如下：  
![在这里插入图片描述][20200720211146978.png]

#### 3.3 协议层传输过程 ####

TCP/IP是一套用于网络通信的协议集合或者系统。TCP/IP协议模型就有OSI模型分为7层。但其实一般我们所谈到的都是四层的TCP/IP协议栈。  
![在这里插入图片描述][20200720213503278.png]  
四层协议主要功能如下：

*  **应用层**负责处理应用程序的逻辑
 *  **传输层**为两台主机上的应用程序提供端到端的通信。它只关心通信的起始端和目的端，而不在乎数据包的中转过程。
 *  **网络层**实现数据包的选路和转发。
 *  **数据链路层**实现了网卡接口的网络驱动程序，以处理数据在物理媒介上的传输。

在利用TCP/IP协议族进行网络通信时，会通过分层顺序与对方进行通信。发送端从应用层往下走，接收端则往应用层往上走。

![在这里插入图片描述][20200720214203428.png]

对于上图，过程大致如下：

*  首先是发送端在应用层（HTTP协议）发出HTTP请求，应用层将数据转发给传输层
 *  在传输层（TCP协议）将收到的数据进行分割，并将各个报文打上标记序号及端口号之后转发给网络层
 *  在网络层（IP协议），增加作为通信目的地的MAC地址后，转发给链路层
 *  接收端的服务器在链路层接收到数据，按顺序往上层发送，直到应用层

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

服务器收到请求后会发出应答，即响应数据。HTTP响应与HTTP请求相似， HTTP响应报文格式：**状态行+响应头+空行+消息体**，状态行包括HTTP版本号、状态码、状态说明等。

返回状态码标识请求的结果：

*  2XX：请求被正常处理
 *  3XX：浏览器需要执行某些特殊的处理以正确处理请求
 *  4XX：客户端发生错误，请求未能成功
 *  5XX：服务器端发生错误，请求未能成功

以下状态码具有代表性：

*  200：该请求的被成功处理，请求的资源送回客户端
 *  204：该请求的被成功处理，但响应的报文信息不含主体内容( 客户端想服务端发送消息，而不需要返回新信息内容时使用 )
 *  206：范围请求(Content-Range)
 *  301：永久重定向
 *  302：临时重定向( 短链接 )
 *  304：缓存( 下面有详细说明 )
 *  307：临时重定向(类似302) - 更加严谨(不会从POST变成GET)
 *  400：客户端请求有误( 请求报文存在错误语法，修改后重新发送 )
 *  401：请求未经授权
 *  403：禁止访问( 未获得访问权限、访问权限出现问题… )
 *  404：资源未找到
 *  500：服务器内部错误( 执行时发生错误、Bug、某些临时故障… )
 *  503：服务器不可用( 服务器处于超负载或停机维护状态 )

### 5. TCP断开 ###

在关闭连接时，TCP通信的双方共需要进行四次握手：

*  客户端向服务端发送FIN标记的报文
 *  服务端收到客户端发送的报文之后，发送一个包含确认序号的ACK报文
 *  服务端向客户端发送FIN标记的报文
 *  客户端收到FIN标记的报文后，会向服务端发送确认序号ACK报文，然后经过两个MSL时间后断开连接

其中MSL指的是最大报文生存时间，指报文发送和接收的最长时间。

![在这里插入图片描述][20200720220125392.png]  
上图中的过程如下：

*  客户端向服务端发送报文，Fin、Ack、Seq，表示已经没有数据传输了。并进入 FIN\_WAIT\_1 状态。这一步的作用就是**客户端请求服务端释放连接**
 *  服务端向客户端发送报文，Ack、Seq，表示同意关闭请求。此时主机发起方进入 FIN\_WAIT\_2 状态。这一步的作用就是**服务端告诉客户端收到了断开连接的请求**
 *  服务端向客户端发送报文段，Fin、Ack、Seq，请求关闭连接。并进入 LAST\_ACK 状态。这一步的作用就是**服务端告诉客户端已经准备好释放连接了**
 *  客户端向服务端发送报文段，Ack、Seq。然后进入等待 TIME\_WAIT 状态。被动方收到发起方的报文段以后关闭连接。发起方等待一定时间未收到回复，则正常关闭。这一步的作用就是**客户端告诉服务端收到了准备好释放连接的信号了**

### 6. 浏览器解析渲染页面 ###

#### 6.1 渲染解析过程 ####

浏览器收到服务器返回的数据，就要开始渲染页面了。页面渲染的步骤如下：

*  解析HTML文件，构建DOM树
 *  解析CSS文件，构建CSSOM树
 *  将DOM树和CSSOM树进行合并，生成渲染树
 *  计算渲染树的布局，这实际上是**回流**的过程
 *  将布局渲染到屏幕上，这实际上是**重绘**的过程

#### 6.2 CSSOM ####

CSSOM（CSS对象模型）定义了媒体查询、选择器以及CSS本身的一系列API（包括一般的解析和序列化规则）。它是对附在DOM结构树上的样式的表达，与DOM树的呈现方式相似，只是每个节点都会带上样式属性，包括明确定义和隐式继承的样式。  
![在这里插入图片描述][20200720223805692.png]

CSS是一种**渲染阻塞资源**(render blocking resource)，**它需要完全被解析完毕之后才能进入生成渲染树的环节。**

由于CSS有些属性具有继承性，后面定义的样式可能会覆盖或修改前面的样式，所以只有当所有的CSS代码都执行渲染完之后才能进入下一个环节。在CSSOM构建完成之前，页面都会处于白屏状态，所以，一般都是在文件的头部引入CSS文件。

#### 6.3 JavaScript解析 ####

由于JavaScript可以操作DOM元素，所以在解析DOM的过程中，如果遇到script标签，就要等执行完这部分代码，再继续解析DOM。

现在的浏览器对这一方面做了一些优化，在执行脚本的过程中，会继续下载其他资源，但是解析DOM的过程依然是阻塞的，只优化了资源下载的过程。所以我们一般将script标签放在页面的最底部。

#### 6.4 构建渲染树 ####

当DOM树与CSSOM树构建完成后，浏览器会将两者进行结合，生成渲染树。这棵树包含了页面所有可见元素及其渲染信息。

![在这里插入图片描述][2020072022495448.png]

从输入URL到页面加载的过程大致就是上面的内容了。实际上，这些内容还涉及到很多的知识点，需要我们在平时去积累。

[20200720193522462.png]: /images/20230209/7e0775d175fd44d18e64443450c48259.png?
[20200720211146978.png]: https://img-blog.csdnimg.cn/20200720211146978.png?
[20200720213503278.png]: https://img-blog.csdnimg.cn/20200720213503278.png?
[20200720214203428.png]: https://img-blog.csdnimg.cn/20200720214203428.png?
[20200720220125392.png]: https://img-blog.csdnimg.cn/20200720220125392.png?
[20200720223805692.png]: https://img-blog.csdnimg.cn/20200720223805692.png?
[2020072022495448.png]: https://img-blog.csdnimg.cn/2020072022495448.png?