浏览器渲染

问题：用户输入一个 URL，浏览器如何把一堆字节变成屏幕上可交互的页面？

收到 HTML 字节流 → ？？？ → 屏幕像素

解决：渲染流程（Rendering Pipeline）

  HTML 字节流 → Token → DOM 树
  CSS 字节流 → Token → CSSOM 树
  DOM + CSSOM → 渲染树（只含可见节点）
  渲染树 → Layout（几何计算）→ Paint（绘制指令）→ Composite（GPU 合成）

┌──────────────┐     ┌──────────────┐     ┌──────────────┐
│ 地址栏输入   │ →   │ URL 解析     │ →   │ 导航开始     │
│              │     │ 补全协议     │     │ 通知网络进程 │
└──────────────┘     └──────────────┘     └──────────────┘

┌──────────┐    ┌──────────┐    ┌──────────┐    ┌──────────┐
│ 浏览器   │ →  │ 本地DNS  │ →  │ 根DNS    │ →  │ 权威DNS  │
│ 缓存     │    │ 服务器   │    │ (.com)   │    │(example) │
└──────────┘    └──────────┘    └──────────┘    └──────────┘
   先查自己       再查 114        查黄页目录      找到电话号码

客户端                          服务器
  │                               │
  │──── SYN (Seq=x) ────────────→│  1. 客户端：我要连接
  │                               │
  │←─── SYN+ACK (Seq=y,Ack=x+1) ─│  2. 服务器：好的，我也准备好了
  │                               │
  │──── ACK (Ack=y+1) ──────────→│  3. 客户端：确认，连接建立
  │                               │

客户端                          服务器
  │                               │
  │──── FIN ─────────────────────→│  1. 客户端：我发完了
  │                               │
  │←─── ACK ──────────────────────│  2. 服务器：知道了（但我可能还有数据没发完）
  │                               │
  │←─── FIN ──────────────────────│  3. 服务器：我也发完了
  │                               │
  │──── ACK ─────────────────────→│  4. 客户端：确认，连接关闭
  │                               │

HTTP/1.1: 一次一个请求，排队等待
  请求1 → 响应1 → 请求2 → 响应2 → ...（队头阻塞）

HTTP/2: 多路复用，一个连接并行传输
  请求1 ──→ 响应1
  请求2 ──→ 响应2    （同一 TCP 连接，Stream ID 交错）
  请求3 ──→ 响应3

HTTP/3: 每个流独立处理丢包（QUIC/UDP）
  流1 ──→ 响应1（丢包只影响流1）
  流2 ──→ 响应2（不受影响）
  流3 ──→ 响应3（不受影响）

┌──────────────────────────────────────────────┐
│ 请求 → 强缓存命中？ → 是 → 直接用缓存（200 from cache）│
│         │                                      │
│         否                                     │
│         ▼                                      │
│     协商缓存命中？ → 是 → 304 Not Modified      │
│         │                                      │
│         否                                     │
│         ▼                                      │
│     服务器返回新资源（200 OK）                   │
└──────────────────────────────────────────────┘

简单请求：直接发送，浏览器自动加 Origin 头
  GET/POST/HEAD + 简单头部 → 服务器返回 Access-Control-Allow-Origin

预检请求：先发 OPTIONS 请求确认服务器是否允许
  非简单请求 → OPTIONS 预检 → 服务器返回允许的头部和方法 → 实际请求

HTML 字节流 → Token → DOM 树 ─┐
                               ├→ 渲染树（只含可见节点）
CSS 字节流 → Token → CSSOM 树 ─┘

<!-- 内联关键 CSS -->
<style>
  /* 首屏需要的关键样式，控制在 14KB 以内 */
  .header { ... }
  .hero { ... }
</style>

<!-- 异步加载非关键 CSS -->
<link
  rel="preload"
  href="non-critical.css"
  as="style"
  onload="this.onload=null;this.rel='stylesheet'"
/>
<noscript><link rel="stylesheet" href="non-critical.css" /></noscript>

<!-- 阻塞 DOM 解析 -->
<script src="app.js"></script>

<!-- 不阻塞 DOM 解析，DOM 解析完后按顺序执行 -->
<script defer src="app.js"></script>

<!-- 不阻塞 DOM 解析，下载完立即执行 -->
<script async src="analytics.js"></script>

<!-- ES Module，默认 defer 行为 -->
<script type="module" src="app.js"></script>

渲染树 → Layout（几何计算）→ Paint（绘制指令）→ Composite（GPU 合成）→ 屏幕

// 只触发 Composite，不触发 Layout 和 Paint
element.style.transform = "translateX(100px)";
element.style.opacity = 0.5;

// 触发 Layout + Paint + Composite，性能差
element.style.left = "100px";
element.style.width = "200px";

普通 <script>：阻塞 DOM 解析，下载完立即执行
<script async>：不阻塞 DOM 解析，下载完立即执行（不保证顺序）
<script defer>：不阻塞 DOM 解析，DOM 解析完后按顺序执行
<script type="module">：默认 defer 行为

// LocalFrame::ScheduleVisualUpdate() 触发一帧渲染
void LocalFrame::ScheduleVisualUpdate() {
  // 通知合成器需要更新
  if (GetDocument().IsActive()) {
    GetPage()->GetChromeClient().ScheduleAnimationUpdate();
  }
}

// 每一帧的执行顺序（简化）
void LocalFrame::BeginMainFrame() {
  // 1. Style Calculation
  GetDocument().UpdateStyle();
  // 2. Layout
  GetDocument().UpdateLayout();
  // 3. Paint
  GetDocument().UpdatePaint();
  // 4. Composite（由合成线程执行）
}