一、整体流程

1. DNS 域名解析（把域名 → IP 地址）
2. 建立 TCP 连接（三次握手）
3. 发起 HTTP/HTTPS 请求
4. 服务器处理请求并返回响应
5. 浏览器解析渲染页面
6. 断开 TCP 连接（四次挥手）

二、详细步骤

1. DNS 域名解析（域名 → IP）

• 浏览器先查浏览器缓存有没有记录过 IP
• 没有 → 查操作系统缓存（hosts 文件）
• 没有 → 查本地 DNS 服务器
• 逐级查询到根 DNS / 顶级 DNS / 权威 DNS
• 最终得到服务器的 IP 地址

2. 建立 TCP 连接（三次握手）

拿到 IP 后，浏览器和服务器建立可靠连接：

1. 浏览器：我可以连接吗？
2. 服务器：可以，你准备好了吗？
3. 浏览器：我准备好了，开始通信！

HTTPS 会在这一步多一层 TLS 握手（加密协商）

3. 浏览器发送 HTTP/HTTPS 请求

请求包含：

• 请求行（方法、URL、协议）
• 请求头（Cookie、User-Agent 等）
• 请求体（POST 等才有）

4. 服务器处理请求，返回响应

• 服务器接收请求
• 处理逻辑（查询数据库、接口等）
• 返回 HTTP 响应：状态码、响应头、HTML 内容

5. 浏览器解析渲染页面（前端最重要！）

这是前端加分项，必须说清楚：

1. 解析 HTML，生成 DOM 树
2. 解析 CSS，生成 CSSOM 树
3. DOM + CSSOM 合成 渲染树（Render Tree）
4. 布局（Layout/Reflow）：计算元素位置、大小
5. 绘制（Paint）：填充颜色、图片、文字
6. 合成（Composite）：合并图层，展示页面

⚠️ 重点注意：

• 遇到 <script> 会阻塞 HTML、CSS 解析，必须等 JS 执行完
• CSS 加载会阻塞 JS 执行，但不阻塞 HTML 解析

6. 关闭 TCP 连接（四次挥手）

数据传输完成，断开连接：

1. 浏览器：我发完了
2. 服务器：收到，我再确认下
3. 服务器：我也发完了
4. 浏览器：收到，关闭连接

三、流程总结

1. 输入网址，DNS 解析域名得到服务器 IP
2. 和服务器三次握手建立 TCP 连接
3. 浏览器发送 HTTP/HTTPS 请求
4. 服务器处理并返回 HTML 等资源
5. 浏览器解析 HTML 生成 DOM、解析 CSS 生成 CSSOM
6. 合成渲染树，执行布局 → 绘制 → 合成
7. 页面完整显示，四次挥手断开连接