网页从输入网址到渲染完成经历的过程

网页从输入网址到渲染完成，主要经历DNS 解析、建立连接、请求响应、页面渲染四大核心阶段，整个过程涉及客户端（浏览器）与服务器的多次交互。

你提的这个问题很关键，搞懂这个流程能帮你更清晰地理解网页加载的原理和优化方向。

一、URL 解析与 DNS 域名解析

这一步的核心是将人类易记的域名（如www.baidu.com）转化为计算机可识别的 IP 地址。

1. URL 解析：浏览器首先解析输入的 URL，提取出协议（如 HTTP/HTTPS）、域名（如www.baidu.com）、端口号（默认 80/443）、路径等信息。
2. DNS 缓存查询：浏览器先查询本地 DNS 缓存（如浏览器缓存、操作系统缓存），若存在该域名对应的 IP，则直接使用；若不存在，继续下一步。
3. DNS 服务器查询：浏览器向本地 DNS 服务器（如路由器分配的 DNS）发送查询请求，本地 DNS 服务器依次向上级 DNS 服务器（根服务器、顶级域服务器、权威 DNS 服务器）查询，最终获取目标服务器的 IP 地址。

二、建立 TCP 连接（三次握手）

在获取 IP 地址后，浏览器通过 TCP 协议与目标服务器建立可靠的网络连接，这一过程称为 “三次握手”。

1. 第一次握手：客户端（浏览器）向服务器发送一个 SYN（同步）报文，请求建立连接，并告知服务器自己的初始序列号。
2. 第二次握手：服务器收到 SYN 报文后，回复一个 SYN+ACK（同步 + 确认）报文，确认收到客户端的请求，并告知自己的初始序列号。
3. 第三次握手：客户端收到服务器的回复后，再发送一个 ACK（确认）报文，确认收到服务器的响应。此时，TCP 连接正式建立。

若使用 HTTPS 协议，在 TCP 连接建立后，还会进行TLS/SSL 握手：客户端与服务器协商加密算法、交换密钥，最终建立加密的通信通道，确保数据传输安全。

三、发送 HTTP 请求与接收响应

连接建立后，浏览器向服务器发送 HTTP 请求，服务器处理后返回响应数据。

1. 发送 HTTP 请求

浏览器根据 URL 解析的信息，构造一个 HTTP 请求报文，包含以下核心内容：

• 请求行：指定请求方法（如 GET、POST）、请求路径、HTTP 协议版本。
• 请求头：包含浏览器信息（User-Agent）、Cookie、接受的数据格式（Accept）、缓存控制（Cache-Control）等。
• 请求体：仅在 POST 等方法中存在，用于传递表单数据、JSON 等请求参数。

2. 服务器处理请求

服务器接收到 HTTP 请求后，根据请求路径和参数，执行对应的业务逻辑（如查询数据库、处理数据），然后构造 HTTP 响应报文。

3. 接收 HTTP 响应

响应报文包含以下核心内容：

• 状态行：包含 HTTP 协议版本、状态码（如 200 OK、404 Not Found）、状态描述。
• 响应头：包含服务器信息（Server）、内容类型（Content-Type）、内容长度（Content-Length）、缓存策略（Expires）等。
• 响应体：服务器返回的核心数据，如 HTML 文档、CSS 文件、JavaScript 文件、图片等。

四、页面渲染（关键渲染路径）

浏览器接收到 HTML 等资源后，开始解析并渲染页面，这是将代码转化为可视化页面的核心过程。

1. 解析 HTML，构建 DOM 树

   • 浏览器逐行解析 HTML 文档，将每个 HTML 标签转化为 DOM（文档对象模型）节点，最终形成一棵完整的 DOM 树，描述页面的结构。

2. 解析 CSS，构建 CSSOM 树

   • 浏览器并行解析 CSS 资源（包括内联 CSS、外部 CSS、style 标签），将 CSS 规则转化为 CSSOM（CSS 对象模型）树，描述页面的样式规则。

3. 构建渲染树（Render Tree）

   • 浏览器将 DOM 树与 CSSOM 树结合，筛选出可见的节点（如隐藏的 display: none 节点会被排除），并为每个可见节点应用对应的 CSS 样式，形成渲染树。渲染树仅包含用于显示的节点和样式信息。

4. 布局（Layout）

   • 根据渲染树，浏览器计算每个节点在页面中的精确位置和大小，这个过程也称为 “回流（Reflow）”。布局结果会生成一个布局树，确定每个元素的坐标和尺寸。

5. 绘制（Painting）

   • 浏览器根据布局树，将每个节点的样式（颜色、背景、边框等）绘制到屏幕上，这个过程也称为 “重绘（Repaint）”。绘制会按层进行，提高效率。

6. 合成（Compositing）

   • 浏览器将绘制好的不同图层，按照正确的顺序合成在一起，最终显示在屏幕上，形成完整的网页。

五、关闭 TCP 连接（四次挥手）

页面渲染完成后，若没有后续请求，浏览器与服务器会通过 “四次挥手” 关闭 TCP 连接。

1. 客户端发送 FIN 报文，请求关闭连接。
2. 服务器回复 ACK 报文，确认收到关闭请求。
3. 服务器处理完剩余数据后，发送 FIN 报文，告知客户端可以关闭连接。
4. 客户端回复 ACK 报文，确认关闭，TCP 连接正式关闭。

网页加载全流程思维导图（核心框架）