从输入 URL 到页面显示，发生了什么？

核心答案

从输入 URL 到页面显示是一个复杂的过程，涉及 DNS 解析、TCP 连接、HTTP 请求、服务器响应、浏览器渲染 等多个步骤。

完整流程

1. 输入 URL 并解析

用户输入：在地址栏输入 URL
浏览器解析：解析协议、域名、路径等
安全检查：检查 URL 是否安全（HSTS、恶意网站等）

2. DNS 域名解析

过程：将域名转换为 IP 地址
查询顺序：
1. 浏览器缓存
2. 操作系统缓存（hosts 文件）
3. 本地 DNS 服务器
4. 根 DNS 服务器
5. 顶级域名服务器
6. 权威 DNS 服务器

www.example.com → DNS 查询 → 192.168.1.1

DNS 优化：

DNS 预解析：<link rel="dns-prefetch" href="//example.com">
DNS 缓存：减少查询时间

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

第一次握手：客户端发送 SYN 包（seq=x）
第二次握手：服务器发送 SYN+ACK 包（seq=y, ack=x+1）
第三次握手：客户端发送 ACK 包（ack=y+1）

客户端 → SYN → 服务器
客户端 ← SYN+ACK ← 服务器
客户端 → ACK → 服务器

目的：确认双方都能正常收发数据

4. 如果是 HTTPS，进行 TLS 握手

客户端发送：支持的 TLS 版本、加密套件、随机数
服务器响应：选择的 TLS 版本、证书、随机数
客户端验证：验证证书有效性
密钥交换：生成会话密钥
加密通信：使用会话密钥加密数据

5. 发送 HTTP 请求

请求行：方法（GET/POST）、URL、HTTP 版本
请求头：Host、User-Agent、Accept、Cookie 等
请求体：POST 请求的数据

GET /index.html HTTP/1.1
Host: www.example.com
User-Agent: Mozilla/5.0...
Accept: text/html,application/xhtml+xml
Cookie: session_id=123

6. 服务器处理请求

接收请求：Web 服务器接收 HTTP 请求
路由处理：根据 URL 路由到对应的处理程序
业务逻辑：执行相应的业务逻辑
生成响应：生成 HTML、JSON 等响应内容

7. 服务器返回 HTTP 响应

状态行：HTTP 版本、状态码、状态描述
响应头：Content-Type、Content-Length、Set-Cookie、Cache-Control 等
响应体：HTML、JSON、图片等资源

HTTP/1.1 200 OK
Content-Type: text/html; charset=utf-8
Content-Length: 1234
Cache-Control: max-age=3600

<html>...</html>

8. 浏览器接收响应并解析

接收数据：接收服务器返回的数据
解析 HTML：构建 DOM 树
解析 CSS：构建 CSSOM 树
执行 JavaScript：解析和执行 JS 代码

9. 构建渲染树并渲染

构建渲染树：合并 DOM 和 CSSOM
布局：计算元素位置
绘制：绘制页面
合成：合成图层显示

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

第一次挥手：客户端发送 FIN 包
第二次挥手：服务器发送 ACK 包
第三次挥手：服务器发送 FIN 包
第四次挥手：客户端发送 ACK 包

客户端 → FIN → 服务器
客户端 ← ACK ← 服务器
客户端 ← FIN ← 服务器
客户端 → ACK → 服务器

完整流程图

输入 URL
  ↓
DNS 解析（域名 → IP）
  ↓
TCP 三次握手
  ↓
HTTPS TLS 握手（如果是 HTTPS）
  ↓
发送 HTTP 请求
  ↓
服务器处理请求
  ↓
返回 HTTP 响应
  ↓
浏览器解析 HTML/CSS/JS
  ↓
构建渲染树
  ↓
布局和绘制
  ↓
显示页面
  ↓
TCP 四次挥手

延伸追问

1. DNS 查询的详细过程？

回答：DNS 查询过程：

1. 递归查询 vs 迭代查询

递归查询（客户端 → 本地 DNS）：

客户端向本地 DNS 服务器查询
本地 DNS 服务器负责查询并返回结果

迭代查询（本地 DNS → 其他 DNS）：

本地 DNS 向根 DNS 查询
根 DNS 返回顶级域名服务器地址
本地 DNS 向顶级域名服务器查询
依次查询直到获得 IP 地址

2. DNS 查询示例

客户端 → 本地 DNS：www.example.com 的 IP？
本地 DNS → 根 DNS：.com 的权威服务器？
根 DNS → 本地 DNS：.com 服务器地址
本地 DNS → .com 服务器：example.com 的权威服务器？
.com 服务器 → 本地 DNS：example.com 服务器地址
本地 DNS → example.com 服务器：www.example.com 的 IP？
example.com 服务器 → 本地 DNS：192.168.1.1
本地 DNS → 客户端：192.168.1.1

2. TCP 三次握手为什么是三次？

回答：三次握手的原因：

1. 防止失效的连接请求

如果只有两次握手，失效的连接请求可能被服务器误认为是新的连接
三次握手确保双方都能确认对方可以正常收发数据

2. 确认双方的收发能力

第一次：客户端 → 服务器（客户端能发，服务器能收）
第二次：服务器 → 客户端（服务器能收发，客户端能收）
第三次：客户端 → 服务器（客户端能收发，服务器能收）

3. 同步序列号

双方交换初始序列号（ISN）
确保数据包按顺序传输

3. HTTPS 的 TLS 握手过程？

回答：TLS 握手步骤：

1. Client Hello

客户端发送：TLS 版本、支持的加密套件、随机数 A

2. Server Hello

服务器发送：选择的 TLS 版本、加密套件、随机数 B、服务器证书

3. 证书验证

客户端验证证书的有效性（CA 签名、域名匹配、有效期）

4. 密钥交换

客户端生成随机数 C（Pre-Master Secret）
使用服务器公钥加密 Pre-Master Secret 发送给服务器

5. 生成会话密钥

双方使用随机数 A、B、C 生成会话密钥（Master Secret）

6. 加密通信

使用会话密钥加密后续通信

4. HTTP/1.1 和 HTTP/2 的区别？

回答：主要区别：

HTTP/1.1：

文本协议：请求和响应都是文本格式
队头阻塞：同一连接上请求必须按顺序响应
多连接：浏览器通常为每个域名建立 6 个连接

HTTP/2：

二进制协议：使用二进制帧传输
多路复用：一个连接可以并行处理多个请求
头部压缩：使用 HPACK 压缩请求头
服务器推送：服务器可以主动推送资源

性能对比：

HTTP/1.1：串行请求，需要多个连接
HTTP/2：并行请求，单个连接，性能更好

5. 如何优化页面加载速度？

回答：优化策略：

1. DNS 优化

<link rel="dns-prefetch" href="//cdn.example.com">

2. TCP 优化

使用 HTTP/2
启用 Keep-Alive
使用 CDN（就近连接）

3. 资源优化

压缩资源（Gzip、Brotli）
图片优化（WebP、懒加载）
代码分割（Code Splitting）
资源预加载

4. 渲染优化

关键 CSS 内联
延迟加载非关键资源
使用 async/defer 加载脚本

5. 缓存策略

设置合适的 Cache-Control
使用 ETag
浏览器缓存静态资源

（注：文档部分内容可能由 AI 生成）

输入 URL 到页面显示的过程