一句话答案

URL 解析→DNS 解析→TCP 连接→TLS 握手→HTTP 请求→服务器处理→响应返回→浏览器渲染（DOM/CSSOM/Layout/Paint）。

核心要点

完整流程（10步）：

1. URL 解析

解析 URL 各部分：协议（https）、域名（www.example.com）、路径（/page）、参数
判断是否有效 URL；无效则作为搜索关键词提交到搜索引擎

2. 检查缓存

浏览器缓存 → 操作系统缓存 → 路由器缓存 → ISP DNS 缓存
命中缓存：直接返回缓存的 IP，跳过 DNS 查询

3. DNS 解析（将域名解析为 IP）

本地 hosts 文件 → 本地 DNS 缓存 → 递归查询 DNS 服务器

递归 DNS 查询过程：
  本地 DNS 服务器 → 根域名服务器（返回 .com 的 NS）
                   → .com 顶级域名服务器（返回 example.com 的 NS）
                   → example.com 权威 DNS 服务器（返回 www.example.com 的 IP）
  → 缓存 IP，返回给浏览器

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

客户端 → SYN → 服务端
客户端 ← SYN-ACK ← 服务端
客户端 → ACK → 服务端
连接建立（约 1 RTT）

5. TLS 握手（HTTPS 时）

TLS 1.2：额外 2 RTT
TLS 1.3：额外 1 RTT（优化）
建立加密通道

6. 发送 HTTP 请求

构造 HTTP 请求报文：
GET /page HTTP/1.1
Host: www.example.com
Cookie: ...
Accept: text/html
User-Agent: ...

7. 服务端处理请求并返回响应

Web 服务器（Nginx）接收请求
→ 反向代理到后端（Tomcat/Spring Boot）
→ 应用层处理（Controller → Service → DB → Cache）
→ 构造 HTTP 响应报文返回

8. 浏览器解析 HTML

解析 HTML → 构建 DOM 树
解析 CSS → 构建 CSSOM 树
DOM + CSSOM → Render Tree（渲染树）

遇到 <script>：
  默认阻塞解析（等脚本加载执行完）
  async：异步加载，加载完立即执行（不阻塞解析）
  defer：异步加载，HTML 解析完后执行（不阻塞）

9. 页面渲染

布局（Layout / Reflow）：计算每个元素的位置和大小
绘制（Paint）：将元素绘制到位图
合成（Composite）：多层合并，输出最终页面

10. 关闭 TCP 连接（四次挥手）或保持连接（Keep-Alive）

追问与易错

追问方向：

• 每个阶段可以优化什么？（DNS 预解析/CDN/HTTP2/缓存/异步加载）
• 浏览器渲染流程？（DOM→CSSOM→Render Tree→Layout→Paint→Composite）
• 输入不完整的 URL 会怎样？（浏览器补全/搜索引擎）

易错点：

• ❌ 漏掉某个关键环节（DNS/TCP/TLS 是不同的阶段）
• ❌ "浏览器直接请求服务器"——可能经过代理/CDN/负载均衡

💡 记忆锚点

十步口诀"解析找路建连加密，请求处理回传渲染"：URL解析→DNS查IP→TCP三握→TLS加密→发HTTP请求→服务端处理→响应返回→解析HTML建DOM/CSSOM→布局绘制合成→四挥或保活。每一步都是一个可深挖的面试考点，从宏观流程讲起再逐步细化。