从输入URL到页面呈现都发生了什么？

完整步骤：

1. 输入 URL & 浏览器解析 URL

• 用户在地址栏输入 https://www.example.com:8080/path/to/page?name=ferret&color=purple#section1
• 浏览器拆分出协议、域名、路径等部分

 协议      主机名(域名)   端口
┌─┴──┐ ┌───────┴──────┐ ┌─┴─┐
https://www.example.com:8080/path/to/page?name=ferret&color=purple#section1└┬┘ └──┬──┘ └┬┘     └──────┬─────┘ └───────────┬─────────┘└───┬───┘子域名 二级域名 顶级域名       路径         查询字符串(参数)      片段标识符

2. 浏览器强缓存检查（是否已有缓存的资源可用）

• 如果 Cache-Control: max-age 或 Expires 仍有效 → 直接使用本地缓存 → ✅ 渲染页面，流程结束

3. DNS 缓存查询（有没有域名对应的 IP 地址）

1. 浏览器 DNS 缓存
2. 操作系统 DNS 缓存（包括 hosts 文件）
3. 本地 DNS 解析器缓存（Stub Resolver 缓存）
4. 本地 DNS 服务器缓存（通常由 ISP 提供）
5. 根域名服务器（Root DNS）
6. 顶级域名服务器（TLD DNS，如 .com）
7. 权威域名服务器（Authoritative DNS）

如果命中缓存 → 跳过 DNS 查询阶段，直接得到 IP。

4. 若缓存未命中 → DNS 查询

• 递归 or 迭代方式向 DNS 服务器查询域名对应的 IP 地址
• 得到 IP 地址后返回

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

• 客户端发送 SYN
• 服务器返回 SYN + ACK
• 客户端再发 ACK → 连接建立

6. 如果是 HTTPS，还需 TLS 握手（生成加密会话）

• 交换证书、公钥验证、协商对称密钥等

7. 发起 HTTP 请求（包括协商缓存）

• 请求带有：If-Modified-Since、ETag 等头部
• 服务器判断资源是否变更，返回：
  • 304 Not Modified（协商缓存命中）→ 用缓存
  • 200 OK（资源已变更）→ 返回新内容

8. 浏览器接收响应并渲染页面

• 构建 DOM 树
• 下载 & 解析 CSS（构建 CSSOM）
• 下载 & 执行 JS
• 构建渲染树 → 布局 → 绘制 → 合成 → 呈现页面

9. TCP 四次挥手断开连接（或保持连接）

• 如果是短连接 → 执行四次挥手断开
• 如果是长连接（keep-alive）/ HTTP/2 → 保持连接以便复用