目录
[1. 处理 URL](#1. 处理 URL)
[2. DNS 域名解析（域名 → IP）](#2. DNS 域名解析（域名 → IP）)
[3. 建立 TCP 连接（三次握手）](#3. 建立 TCP 连接（三次握手）)
[4. HTTPS 建立 TLS 加密（HTTPS 才走这步）](#4. HTTPS 建立 TLS 加密（HTTPS 才走这步）)
[5. 发送 HTTP 请求](#5. 发送 HTTP 请求)
[6. 服务器处理请求](#6. 服务器处理请求)
[7. 服务器返回 HTTP 响应](#7. 服务器返回 HTTP 响应)
[8. 关闭 TCP 连接（四次挥手）](#8. 关闭 TCP 连接（四次挥手）)
[9. 浏览器解析 HTML，构建 DOM 树](#9. 浏览器解析 HTML，构建 DOM 树)
[10. 解析 CSS，生成 CSSOM 树](#10. 解析 CSS，生成 CSSOM 树)
[11. 生成渲染树 Render Tree](#11. 生成渲染树 Render Tree)
[12. 布局 Layout（回流/重排）](#12. 布局 Layout（回流/重排）)
[13. 绘制 Paint（重绘）](#13. 绘制 Paint（重绘）)
[14. 合成 Composite Layers](#14. 合成 Composite Layers)
[15. 加载其他资源](#15. 加载其他资源)
[16. 页面加载完成](#16. 页面加载完成)
[3.1 作用](#3.1 作用)
[3.2 图解](#3.2 图解)
[3.3 通俗解释](#3.3 通俗解释)
[3.4 为什么是三次不是两次？](#3.4 为什么是三次不是两次？)
[4.1 作用](#4.1 作用)
[4.2 图解](#4.2 图解)
[3.3 通俗解释](#3.3 通俗解释)
[3.4 为什么是四次不是三次？](#3.4 为什么是四次不是三次？)
[Q1： 输入url浏览器会发生什么](#Q1： 输入url浏览器会发生什么)
[Q3：为什么客户端最后要等 2MSL？](#Q3：为什么客户端最后要等 2MSL？)
[Q4：TCP 和 UDP 的区别？](#Q4：TCP 和 UDP 的区别？)
[Q5：说说 TCP 的三次握手和四次挥手？](#Q5：说说 TCP 的三次握手和四次挥手？)
一、完整流程图
┌─────────────────────────────────────────────────────────────────────┐
│ 输入 URL 到页面呈现 │
├─────────────────────────────────────────────────────────────────────┤
│ │
│ 1. 处理 URL ──→ 2. DNS 解析 ──→ 3. TCP 三次握手 ──→ 4. TLS 握手 │
│ │
│ 5. 发送请求 ──→ 6. 服务器处理 ──→ 7. 返回响应 ──→ 8. 四次挥手 │
│ │
│ 9. 解析 HTML → DOM 树 │
│ 10. 解析 CSS → CSSOM 树 │
│ 11. 合并 → 渲染树 │
│ 12. 布局（回流） │
│ 13. 绘制（重绘） │
│ 14. 合成 │
│ 15. 加载资源 + 执行 JS │
│ 16. 页面加载完成 │
│ │
└─────────────────────────────────────────────────────────────────────┘二、详细步骤解析
1. 处理 URL
浏览器判断是搜索关键字还是 URL，补全协议（默认 HTTP/HTTPS）
最终格式：协议 + 域名 + 端口 + 路径 + 参数
https://www.example.com:443/path?id=1232. DNS 域名解析（域名 → IP）
浏览器要找到服务器在哪，必须把域名转成 IP。
查找顺序（从上到下）：
-
浏览器 DNS 缓存
-
操作系统 hosts 文件 / 系统缓存
-
路由器缓存
-
ISP 运营商 DNS 服务器
-
根域名服务器 → 顶级域名服务器 → 权威 DNS
3. 建立 TCP 连接（三次握手）
浏览器与服务器建立可靠传输通道。
客户端 ──SYN──→ 服务器
客户端 ←─SYN+ACK─ 服务器
客户端 ──ACK──→ 服务器4. HTTPS 建立 TLS 加密（HTTPS 才走这步）
-
交换加密套件
-
服务器出示证书
-
客户端验证证书合法性
-
生成会话密钥
5. 发送 HTTP 请求
请求行：GET /path HTTP/1.1
请求头：User-Agent、Cookie、Host、Connection
请求体：POST 才有（表单、JSON）6. 服务器处理请求
-
反向代理（Nginx）接收请求
-
负载均衡分发
-
后台应用处理
-
查询数据库
-
生成响应内容
7. 服务器返回 HTTP 响应
状态行：HTTP/1.1 200 OK
响应头：Content-Type、Cache-Control、Set-Cookie
响应体：HTML、CSS、JS、图片8. 关闭 TCP 连接（四次挥手）
客户端 ──FIN──→ 服务器
客户端 ←─ACK─── 服务器
客户端 ←─FIN─── 服务器
客户端 ──ACK──→ 服务器9. 浏览器解析 HTML，构建 DOM 树
-
从上到下解析标签
-
遇到
<link CSS>：异步加载，不阻塞 HTML 解析 -
遇到
<script JS>：默认阻塞解析，等 JS 下载执行完再继续（加 defer/async 可改变行为）
10. 解析 CSS，生成 CSSOM 树
-
把所有样式（外链、内联、默认样式）合并
-
CSSOM 会阻塞渲染，但不阻塞 HTML 解析
11. 生成渲染树 Render Tree
-
DOM + CSSOM 结合
-
只保留可见节点（display:none 不进渲染树）
12. 布局 Layout（回流/重排）
-
计算每个元素的几何信息（位置、宽高、边距）
-
布局改变会触发回流
13. 绘制 Paint（重绘）
-
根据布局信息绘制像素（颜色、背景、阴影、文字）
-
只变样式不变结构 → 重绘
14. 合成 Composite Layers
-
将页面分成多个图层分别绘制
-
合并图层，最终输出到屏幕
-
transform/opacity只触发合成，性能最高
15. 加载其他资源
-
图片、字体、视频在解析 HTML 时就开始加载
-
不阻塞绘制，绘制完加载回来再补上
16. 页面加载完成
-
DOMContentLoaded：DOM 解析完成 -
load：所有资源加载完成
三、三次握手（建立连接）
3.1 作用
保证客户端和服务器双方发送、接收能力都正常，再开始传输数据。
3.2 图解
text
客户端（Client） 服务器（Server）
│ │
│ 1. SYN（我要连接你） │
│ ─────────────────────────────→ │
│ │
│ 2. SYN + ACK（可以，你能收到我吗？）│
│ ←───────────────────────────── │
│ │
│ 3. ACK（收到了，连接建立） │
│ ─────────────────────────────→ │
│ │
│ 开始传输数据 │3.3 通俗解释
| 步骤 | 通俗说法 | 技术术语 |
|---|---|---|
| 第1次 | 客户端：在吗？ | SYN |
| 第2次 | 服务器：在的，你能听到我吗？ | SYN + ACK |
| 第3次 | 客户端：能听到，开始说话吧 | ACK |
3.4 为什么是三次不是两次？
两次握手的问题：
客户端发送 SYN → 服务器回复 SYN+ACK
如果这个回复丢失了，客户端以为没连上，服务器以为连上了
→ 服务器白白等待，浪费资源
三次握手：
客户端最后再回复一次 ACK，双方都确认对方没问题
→ 可靠建立连接四、四次挥手（断开连接）
4.1 作用
保证双方数据都发完、处理完，安全关闭连接，不丢数据。
4.2 图解
客户端（Client） 服务器（Server）
│ │
│ 1. FIN（我数据发完了，准备关闭） │
│ ─────────────────────────────→ │
│ │
│ 2. ACK（收到，等我处理完） │
│ ←───────────────────────────── │
│ │
│ 服务器继续发送剩余数据 │
│ │
│ 3. FIN（我也发完了，可以关了） │
│ ←───────────────────────────── │
│ │
│ 4. ACK（收到，关闭连接） │
│ ─────────────────────────────→ │
│ │
│ 连接关闭 │3.3 通俗解释
| 步骤 | 通俗说法 | 技术术语 |
|---|---|---|
| 第1次 | 客户端：我说完了，想挂电话了 | FIN |
| 第2次 | 服务器：知道了，等我把我这边说完 | ACK |
| 第3次 | 服务器：我也说完了，挂吧 | FIN |
| 第4次 | 客户端：好的，挂断 | ACK |
3.4 为什么是四次不是三次？
为什么不能三次？
客户端发 FIN（我要关了）
服务器回 ACK（知道了）
服务器回 FIN（我也关了）
客户端回 ACK（好的）
问题：第2次和第3次不能合并吗？
不能！因为服务器收到 FIN 后，可能还有数据没发完
所以先回 ACK（收到请求），等数据发完再回 FIN（可以关了）
如果合并：服务器还没发完数据就关了 → 数据丢失五、问答
Q1： 输入url浏览器会发生什么
-
输入 URL，浏览器解析 URL
-
DNS 域名解析，将域名转为服务器 IP
-
进行 TCP 三次握手建立连接
-
HTTPS 网站进行 TLS 握手加密
-
浏览器发送 HTTP 请求
-
服务器处理请求并返回 HTTP 响应
-
TCP 四次挥手断开连接
-
浏览器解析 HTML 生成 DOM 树，解析 CSS 生成 CSSOM 树
-
结合生成渲染树，进行布局（回流）、绘制（重绘）、图层合成
-
加载资源、执行 JS，页面最终展示
Q2：为什么握手是三次，挥手是四次？
答：
握手三次：因为双方需要确认彼此的发送和接收能力正常。客户端发 SYN，服务器回 SYN+ACK，客户端再回 ACK，三次就够了。
挥手四次：因为断开时，双方可能还有数据没发完。客户端发 FIN 表示自己没数据了，服务器先回 ACK 表示收到，等自己的数据发完后再发 FIN，客户端最后回 ACK。所以比握手多一次。
Q3：为什么客户端最后要等 2MSL？
答：
2MSL（Maximum Segment Lifetime）是为了保证最后一个 ACK 能到达服务器。如果 ACK 丢失，服务器会重发 FIN，客户端在 2MSL 内还能响应。
Q4：TCP 和 UDP 的区别？
答：
| 对比 | TCP | UDP |
|---|---|---|
| 连接 | 面向连接（三次握手） | 无连接 |
| 可靠性 | 可靠（确认重传） | 不可靠 |
| 速度 | 慢 | 快 |
| 场景 | HTTP、文件传输 | 视频通话、直播 |
Q5**：说说 TCP 的三次握手和四次挥手？**
答：
三次握手（建立连接）：
客户端发 SYN，表示请求连接
服务器回 SYN+ACK，表示同意连接
客户端回 ACK，连接建立
四次挥手（断开连接）：
客户端发 FIN，表示没数据要发了
服务器回 ACK，表示收到
服务器发 FIN，表示也没数据了
客户端回 ACK，连接关闭
为什么握手三次、挥手四次？
握手时双方没有数据要发，三次就够了
挥手时服务器可能还有数据没发完，所以 ACK 和 FIN 要分开发，需要四次