从浏览器输入URL到页面显示：完整流程详解
这是前端/后端/网络面试最经典的题目，我把整个流程拆分成8个核心步骤，用最清晰、好记、能直接背的方式讲给你，面试/工作都能用。
整体流程总览
- DNS域名解析（把域名 → IP地址）
- 建立TCP连接（三次握手）
- 发起HTTPS/HTTP请求
- 服务器处理请求并返回响应
- 浏览器接收响应数据
- 解析HTML构建DOM树
- 渲染页面（布局 → 绘制 → 合成）
- 关闭TCP连接（四次挥手）
逐步骤详细说明
1. URL解析与检查
浏览器先处理你输入的地址：
- 判断是URL还是搜索关键词
- 补全协议（默认
http/https） - 解析出：协议、域名、端口、路径、参数
例：https://www.baidu.com/index
- 协议：https
- 域名：www.baidu.com
- 路径：/index
2. DNS 域名解析（核心：域名 → IP）
浏览器不知道 baidu.com 在哪，必须转成IP地址才能通信。
查询顺序：
- 浏览器缓存（之前访问过直接用）
- 系统缓存（hosts文件）
- 路由器缓存
- ISP DNS 服务器（运营商）
- 根域名服务器 → 顶级域名服务器 → 权威域名服务器
最终得到：服务器的公网IP
3. 建立 TCP 连接（三次握手）
拿到IP后，浏览器和服务器建立可靠连接：
- 客户端：我可以发数据吗？
- 服务器：可以，你能收吗？
- 客户端：我能收，开始通信！
✅ 目的：保证双方收发都正常，避免丢包。
4. HTTPS 加密握手（如果是HTTPS）
HTTPS = HTTP + TLS/SSL 加密
- 交换证书
- 验证服务器身份
- 生成会话密钥
- 后续所有数据加密传输
5. 浏览器发送 HTTP 请求
请求包含：
- 请求行（方法GET/POST、URL、协议）
- 请求头（Cookie、User-Agent、缓存等）
- 请求体（POST才有）
服务器收到后开始处理。
6. 服务器处理并返回响应
服务器（Nginx/Node/Java/Python等）：
- 路由匹配
- 读取静态资源/查询数据库
- 生成响应内容（HTML/CSS/JS/JSON）
- 返回状态码：200成功、304缓存、404找不到等
响应包含：
- 响应头
- 响应体（网页内容）
7. 浏览器解析与渲染（最关键）
浏览器拿到HTML后开始渲染页面：
① 解析HTML → 生成 DOM 树
② 解析CSS → 生成 CSSOM 树
③ DOM + CSSOM → 生成 渲染树(Render Tree)
④ 布局(Layout/Reflow)
计算每个元素的位置、大小
⑤ 绘制(Paint)
填充颜色、图片、文字、边框
⑥ 合成(Composite)
把多层绘制结果合并显示
8. 执行 JavaScript
JS会阻塞解析和渲染
- CSS 也会阻塞 JS 执行
- 所以建议：
- CSS放头部
- JS放底部 / 加 async/defer
9. 关闭 TCP 连接（四次挥手）
数据传输完成后断开连接：
- 客户端：我发完了
- 服务器：收到，我再检查下
- 服务器：我也发完了
- 客户端：收到，关闭
超简版记忆口诀（面试专用）
DNS → 三次握手 → HTTPS → 请求 → 响应 → 解析HTML → 渲染 → 四次挥手
总结
- 整个过程分为网络通信和浏览器渲染两大阶段
- DNS负责找服务器，TCP保证可靠传输，HTTPS保证安全
- 浏览器核心工作：解析 → 布局 → 绘制 → 合成