前言

当我们在浏览器中输入一段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:

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

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

建立TCP连接

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

UDP
1. 无连接：不需要在正式传输数据之前建立双方的链接
2. 只是数据报文的搬运工，不会数据报文进行拆分和拼接
  
  在UDP中，数据报文不会被拆分，这意味着发送的数据将保持原样，并且被封装成UDP数据报文发送到目的地。但是具有高效性。
- 特点
  - 不可靠性（面向无连接，不会备份数据，没用拥塞控制）
  - 高效
1. 传输方式：一对一，一对多，多对一，多对多
2. 使用场景：直播，游戏，视频通话
拥塞控制

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

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

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

数据传输可靠性

在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：应答连接报文

三次握手建立连接

客户端发送连接请求到服务端，客户端状态变更进入 SYN-SENT 状态
服务端接收到请求连接报文后，返回一个应答（包含ACK序号），服务端进入 SYN-RECEIVED 状态
客户端接收到了同意连接的应答后，还要向服务端发送一个确认收到的报文。再进入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（图形处理单元）来加速绘制过程，将渲染对象转换为图形和像素，最终呈现为可视化的页面。

四次挥手断开连接

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

面试常考题：输入url到页面渲染发生了什么？（前半段）

前言

正文