URL 到页面显示的完整过程

从输入 URL 到页面渲染的每个步骤

问题

描述从浏览器输入 URL 到页面显示的完整过程，包括 DNS 解析、TCP 连接、HTTP 请求、HTML 解析和页面渲染。

解答

1. URL 解析

浏览器解析输入的 URL，提取协议、域名、端口、路径等信息。

https://www.example.com:443/path?query=1#hash
  │          │           │    │      │     │
协议       域名        端口  路径   查询   哈希

2. DNS 解析

将域名解析为 IP 地址，查找顺序：

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

递归查询过程：

本地 DNS → 根 DNS → 顶级域 DNS (.com) → 权威 DNS → 返回 IP

3. TCP 连接（三次握手）

客户端                    服务器
   │                        │
   │──── SYN=1, seq=x ─────→│  第一次：客户端发起连接
   │                        │
   │←─ SYN=1, ACK=1 ───────│  第二次：服务器确认并发起连接
   │   seq=y, ack=x+1       │
   │                        │
   │─── ACK=1 ─────────────→│  第三次：客户端确认
   │   seq=x+1, ack=y+1     │

4. TLS 握手（HTTPS）

客户端                           服务器
   │                               │
   │──── Client Hello ────────────→│  支持的加密套件、随机数
   │←─── Server Hello ─────────────│  选择的加密套件、证书、随机数
   │──── 验证证书、生成预主密钥 ───→│  用服务器公钥加密
   │←─── Finished ─────────────────│  双方生成会话密钥

5. HTTP 请求与响应

// 请求
GET /path HTTP/1.1
Host: www.example.com
User-Agent: Mozilla/5.0
Accept: text/html

// 响应
HTTP/1.1 200 OK
Content-Type: text/html
Content-Length: 1234

<!DOCTYPE html>
<html>...

6. HTML 解析与 DOM 构建

// 解析过程（简化示意）
字节流 → 字符 → Token → 节点 → DOM 树

// 遇到不同资源的处理
<script>        // 阻塞解析，下载并执行
<script async>  // 异步下载，下载完立即执行
<script defer>  // 异步下载，HTML 解析完后执行
<link>          // 异步下载 CSS，但会阻塞渲染
<img>           // 异步下载，不阻塞

7. 渲染流程

        HTML                CSS
          │                  │
          ↓                  ↓
       DOM 树            CSSOM 树
          │                  │
          └────────┬─────────┘
                   ↓
              Render 树
                   │
                   ↓
          Layout（布局/回流）
                   │
                   ↓
          Paint（绘制）
                   │
                   ↓
          Composite（合成）

各阶段说明：

// Layout - 计算元素位置和大小
// 触发回流的操作：
element.offsetWidth    // 读取布局属性
element.style.width    // 修改几何属性

// Paint - 绘制像素
// 触发重绘的操作：
element.style.color    // 修改颜色
element.style.visibility

// Composite - 合成图层
// 只触发合成的操作（性能最好）：
element.style.transform
element.style.opacity

8. TCP 断开（四次挥手）

客户端                    服务器
   │                        │
   │──── FIN=1 ────────────→│  第一次：客户端请求断开
   │←─── ACK=1 ─────────────│  第二次：服务器确认
   │←─── FIN=1 ─────────────│  第三次：服务器请求断开
   │──── ACK=1 ────────────→│  第四次：客户端确认

完整流程图

输入 URL
    │
    ↓
URL 解析
    │
    ↓
DNS 解析 ──→ 获取 IP
    │
    ↓
TCP 三次握手
    │
    ↓
TLS 握手（HTTPS）
    │
    ↓
发送 HTTP 请求
    │
    ↓
服务器处理并返回响应
    │
    ↓
解析 HTML → 构建 DOM
    │
    ↓
解析 CSS → 构建 CSSOM
    │
    ↓
合并为 Render 树
    │
    ↓
Layout → Paint → Composite
    │
    ↓
页面显示

关键点

DNS 解析：多级缓存（浏览器→系统→路由器→ISP），递归查询获取 IP
TCP 三次握手：确保双方收发能力正常，建立可靠连接
渲染阻塞：CSS 阻塞渲染，JS 阻塞 HTML 解析（async/defer 可优化）
渲染流程：DOM + CSSOM → Render 树 → Layout → Paint → Composite
性能优化方向：DNS 预解析、TCP 复用、资源压缩、减少回流重绘、使用 transform/opacity