页面从发送http请求到渲染页面全过程页面从发送http请求到渲染页面全过程从发送 HTTP 请求到页面渲染完成，浏览

页面从发送http请求到渲染页面全过程

从发送 HTTP 请求到页面渲染完成，浏览器会经历一系列复杂的步骤。以下是这一过程的详细说明：

1. 输入 URL 并解析

2. DNS 查询

3. 建立 TCP 连接

步骤：
1. 浏览器通过 IP 地址和端口号（默认 80 或 443）与服务器建立 TCP 连接。
2. 如果是 HTTPS，还会进行 TLS 握手，建立加密通道。
结果：
- 建立可靠的网络连接。

4. 发送 HTTP 请求

步骤：
1. 浏览器构造 HTTP 请求报文，包括请求行、请求头和请求体。
2. 请求行包含方法（如 GET）、路径（如 /index.html）和协议版本（如 HTTP/1.1）。
3. 请求头包含客户端信息（如 User-Agent、Accept）、Cookie 等。
4. 请求体包含需要发送的数据（如表单数据、JSON）。
结果：
- 服务器接收到请求并开始处理。

5. 服务器处理请求

步骤：
1. 服务器根据请求路径和方法处理请求。
2. 如果是静态资源（如 HTML、CSS、JS 文件），服务器直接返回文件内容。
3. 如果是动态资源（如 PHP、Node.js），服务器执行相关代码并生成响应内容。
结果：
- 服务器生成 HTTP 响应。

6. 返回 HTTP 响应

步骤：
1. 服务器构造 HTTP 响应报文，包括状态行、响应头和响应体。
2. 状态行包含协议版本（如 HTTP/1.1）、状态码（如 200）和状态描述（如 OK）。
3. 响应头包含服务器信息（如 Server）、内容类型（如 Content-Type）等。
4. 响应体包含返回的数据（如 HTML 内容、JSON 数据）。
结果：
- 浏览器接收到响应并开始解析。

7. 解析 HTML

8. 解析 CSS

步骤：
1. 浏览器解析 CSS 文件，构建 CSSOM（CSS 对象模型）树。
2. 将 CSSOM 与 DOM 结合，生成渲染树（Render Tree）。
结果：
- 生成渲染树。

9. 执行 JavaScript

10. 布局（Layout）

11. 绘制（Paint）

12. 页面加载完成

总结

步骤	描述
输入 URL 并解析	解析 URL，确定目标服务器和资源路径
DNS 查询	获取域名对应的 IP 地址
建立 TCP 连接	与服务器建立可靠的网络连接
发送 HTTP 请求	构造并发送 HTTP 请求报文
服务器处理请求	服务器处理请求并生成响应
返回 HTTP 响应	服务器返回 HTTP 响应报文
解析 HTML	构建 DOM 树
解析 CSS	构建 CSSOM 树，生成渲染树
执行 JavaScript	解析并执行 JavaScript 代码
布局	计算元素的位置和大小
绘制	将布局信息转换为屏幕上的像素
页面加载完成	触发 DOMContentLoaded 和 load 事件

理解页面从发送 HTTP 请求到渲染完成的全过程，有助于优化页面性能和用户体验。

更多vue相关插件及后台管理模板可访问vue admin reference，代码详情请访问github