前言

当我们在浏览器中输入一段url后，页面最终渲染在我们眼前，这其中发生了哪一些操作呢？在上一篇文章中，我们讲了这些操作的后半段，解析 HTML、生成 DOM 树、CSSOM树、结合生成RendTree, 回流， 重绘。我们附上文章的链接:# 面试常考题： 输入url到页面渲染发生了什么（后半段) 。今天我们接着来聊聊前半段过程中发生了什么。

正文

解析URL

当我们输入一段url后，浏览器首先会对URL进行解析，从而更好地理解URL所指向的资源以及访问该资源的方式。

以下我们输入一个URL：https://www.example.com:8080/path/to/resource?param1=value1&param2=value2#section3

在这个URL中，各部分的含义如下：

• 协议：https://
• 主机名：www.example.com
• 端口号：8080
• 路径：/path/to/resource
• 查询参数：param1=value1&param2=value2
• 片段：#section3

DNS解析

需要确定对方的IP地址, 使用IP协议做DNS解析。DNS（Domain Name System）解析是将域名解析成对应的IP地址的过程。

假设我们去访问腾讯网https://www.qq.com:

1. 去操作系统的本地缓存中查询IP
2. 去系统配置的DNS服务器（缓存）中查询
3. 去根服务器查询
4. 去COM顶级域名的服务器查找
5. 去qq.com这个域名服务器查找

下面我附上一张图，这张图描述的十分的好，大家可以好好参考。

建立TCP连接

提到了TCP连接，我们就不得不说说UDP连接了，这通常也是面试官会问你的问题。UDP（User Datagram Protocol）和TCP（Transmission Control Protocol）是两种常用的传输层协议，它们在数据传输和连接上有一些重要的区别。

• UDP

1. 无连接： 不需要在正式传输数据之前建立双方的链接
   
2. 只是数据报文的搬运工，不会数据报文进行拆分和拼接
   在UDP中，数据报文不会被拆分，这意味着发送的数据将保持原样，并且被封装成UDP数据报文发送到目的地。但是具有高效性。
   

• 特点

• 不可靠性（面向无连接，不会备份数据，没用拥塞控制）
• 高效

3. 传输方式： 一对一，一对多，多对一，多对多
   
4. 使用场景： 直播，游戏，视频通话
   

• 拥塞控制
  

拥塞控制是TCP协议中的一种机制，用于在网络拥塞发生时调整数据传输速率，以避免网络过载和数据丢失。

• TCP

1. 需要握手来建立和断开链接

TCP建立连接和断开连接时都要经过握手这个操作，我们下面会提到

2. 数据传输可靠性

在TCP中，数据流被分割成TCP数据段，并在传输过程中根据网络情况进行拆分和重组。这是因为TCP协议提供了一种可靠的、面向连接的数据传输服务。TCP通过序号、确认、重传等机制来确保数据的可靠传输，而这些机制需要对数据进行拆分和重组。TCP还提供了流量控制和拥塞控制等功能，以避免网络拥塞和数据丢失。

• TCP头部字段

1. Sequence number: 给每一个数据报文都打上序列号
2. Acknowledgement number: 接受端期望接受到的下一个字节的编码是多少
3. 标识符：

1. URG = 1： 数据包的优先级高
2. ACK = 1： 该数据包有效
3. SYN = 1 ，ACK = 0： 连接请求报文
4. SYN = 1 ，ACK = 1： 应答连接报文

三次握手建立连接

1. 客户端发送连接请求到服务端，客户端状态变更进入 SYN-SENT 状态
   
2. 服务端接收到请求连接报文后，返回一个应答（包含ACK序号），服务端进入 SYN-RECEIVED 状态
   
3. 客户端接收到了同意连接的应答后，还要向服务端发送一个确认收到的报文。再进入ESTABLISHED 状态
   

• 为什么一定要三次握手，两次行不行？

不行，假设客户端给服务端发送了一个建立连接请求A，但是因为网络环境差，这个请求A超时了，那么TCP会 启动超时重传机制，再发送一个新的建立连接请求B，服务端接受到B请求后应答，如果此时完成了建立连接的 话，当客户端和服务端通信完成后，便释放了连接，双方都进入Closed状态。假设此时A请求又抵达了服务端， 那么服务端为认为客户端又要建立新的连接从而应答该请求进入ESTABLISHED状态，而此时客户端是Closed状态， 那么服务端就会一直等待，造成资源浪费。但是如果三次握手建立连接时，客户端会进入SYN-RECEIVED状态，服务端收不到客户端的报文之后，会自动关闭。

http请求

http请求负责数据通信

服务端响应请求返回数据

浏览器将页面渲染出来

• 解析 HTML，生成 DOM 树： 浏览器首先会解析 HTML 代码，将其转换为 DOM（文档对象模型）树。DOM 树是由 HTML 元素节点、文本节点和属性节点等组成的树状结构，表示了 HTML 文档的层次结构和元素之间的关系。
  
• 解析 CSS，生成 CSSOM 树： 浏览器接着会解析 CSS 代码，将其转换为 CSSOM（CSS 对象模型）树。CSSOM 树是由 CSS 规则、选择器和属性等组成的树状结构，表示了 CSS 样式表的层次结构和样式规则的应用关系。
  
• 结合 DOM 树和 CSSOM 树，生成 Render Tree： 浏览器会将 DOM 树和 CSSOM 树结合起来，生成渲染树（Render Tree）。渲染树只包含需要显示的可见元素，不包含隐藏的或不可见的元素。渲染树中的每个节点称为渲染对象，它包含了元素的样式和布局信息。
  
• 计算布局，得到每个结点的几何信息： 浏览器根据渲染树中每个渲染对象的样式信息和布局规则，计算出每个节点的几何信息，包括位置、尺寸、边距等。这个过程称为布局或回流。
  
• 绘制页面，GPU 绘制： 最后，浏览器使用计算出的几何信息，将渲染树中的每个节点绘制到屏幕上。浏览器通过 GPU（图形处理单元）来加速绘制过程，将渲染对象转换为图形和像素，最终呈现为可视化的页面。
  

四次挥手断开连接

1. 客户端A向服务端B发送断开请求连接
   
2. B接收到断开请求连接后，告诉应用层释放TCP连接。此时B仍然可以给A发送数据包
   
3. B向A发送最后一个数据包后 进入LAST-ACK状态
   
4. A接收到B的释放连接请求后，向B确认应答