🌐 从输入 URL 到看到页面 — 完整流程
以访问 https://www.example.com 为例
🔒
https://www.example.com/page
↵ Enter
1
🔍 DNS 解析 — 把域名翻译成 IP 地址
查浏览器缓存
— 最近访问过？直接用缓存的 IP
最快
查操作系统缓存
+
/etc/hosts
文件
问 DNS 服务器
（运营商或 8.8.8.8）— 递归查询根域名 → 顶级域 → 权威域名服务器
✅ 得到结果：
www.example.com
→
93.184.216.34
# DNS 查询示意
浏览器 → 本地DNS → 根域名(.）→ .com 域 → example.com 域 ↓ 返回 IP:
93.184.216.34
2
🤝 建立连接 — TCP 三次握手 + TLS 握手
💻
浏览器
临时端口
:54321
SYN
我要连你
好，可以连
SYN+ACK
ACK
收到！
TLS 握手
交换证书 + 密钥
🖥️
服务器
监听端口
:443 (HTTPS)
:80
HTTP（明文）
:443
HTTPS（加密）← 现在大多数网站
:54321
浏览器出发端口（系统随机分配）
3
📤 浏览器发送 HTTP 请求
GET
/page
HTTP/1.1
Host:
www.example.com
User-Agent:
Chrome/124.0 (Macintosh)
Accept:
text/html,application/xhtml+xml
Accept-Language:
zh-CN,zh;q=0.9
Cookie:
session=abc123...
... 其他请求头 ...
💡 如果是 POST（如提交表单），请求体里还会带上表单数据
4
⚙️ 服务器处理 + 返回响应
Web 服务器
（Nginx / Apache）收到请求，路由到应用程序
应用程序
（Node.js / Python / Java...）处理逻辑、查数据库
生成 HTML
，加上响应头，打包返回
HTTP/1.1
200 OK
Content-Type:
text/html; charset=UTF-8
Content-Length:
5432
Cache-Control:
max-age=3600
Set-Cookie:
session=abc123; HttpOnly
<!DOCTYPE html>
<html>
<head>
<link
rel="stylesheet" href="/style.css"
>
</head>
<body>
<img
src="/logo.png"
>
<script
src="/app.js"
></script>
</body>
</html>
5
🎨 浏览器渲染页面
📥 解析 HTML 时发现资源，
再发多个子请求
下载：CSS / JS / 图片 / 字体...
📄
解析 HTML
构建 DOM 树
→
🎨
解析 CSS
构建 CSSOM 树
→
⚡
执行 JS
可修改 DOM/样式
→
🌲
合并渲染树
DOM + CSSOM
↓
📐
Layout（布局）
计算每个元素的
位置和尺寸
→
🖌️
Paint（绘制）
按层绘制颜色
文字、边框、阴影
→
🧩
Composite（合成）
多层合并
GPU 加速输出
🖥️
✅ 页面出现在你眼前了！
整个过程通常在
0.5 ~ 3 秒
内完成（取决于网络和页面复杂度）
🗺️ 一眼看懂 — 完整路径
你输入 URL 敲回车
──▶
DNS 解析
──▶
TCP 握手
──▶
TLS 握手
──▶
发 HTTP 请求
──▶
服务器处理
──▶
返回 HTML
──▶
下载 CSS/JS/图片
──▶
构建 DOM + CSSOM
──▶
Layout → Paint → Composite
──▶
✅ 你看到页面