从 URL 到页面
浏览器把地址变成像素，需要解析 URL、判断缓存、解析主机名、建立 TCP 与 TLS、发送 HTTP、接收字节，再构建 DOM、CSSOM，布局、绘制、合成视口。
URL 只说明目的地，页面还要经过多个阶段。每个阶段向下一阶段交付具体结果：地址、连接、文档、树、布局框，最后才是像素。
URL 怎样变成页面
从 https://vizlearn.app/capstones/projects/url-to-page 可以解析出协议 https、主机 vizlearn.app、路径 /capstones/projects/url-to-page。协议决定使用 HTTPS，主机用于 DNS，路径随后用于 HTTP 请求。
接着判断缓存。本课的热 HTTP 缓存可直接提供 HTML 与样式表，冷缓存则继续网络流程。缓存改变字节来源，不免除渲染：缓存 HTML 仍要变成 DOM、带样式的框和像素。
冷 HTTPS 加载中，DNS 将主机名映射到 IP。TCP 用 SYN、SYN-ACK、ACK 建立可靠字节流；TLS 在其上验证服务器证书并派生密钥；随后 HTTP 发送 GET /capstones/projects/url-to-page，接收 HTML。
HTML 解析成 DOM，CSS 解析成 CSSOM。浏览器结合节点和样式构建渲染结构，计算布局框，绘制内容，再合成视口。依赖链为：URL 部分 → 缓存判断 → IP → socket → TLS 通道 → 请求 → HTML/CSS → DOM/CSSOM → 渲染树 → 框 → 像素。
URL 到页面逐步演示
默认冷加载同一 URL，各主要层都参与。
- 地址栏只有原始 URL，尚未发送网络数据。
- 解析出 https、vizlearn.app 和路径，主机名交给 DNS。
- 检查 DNS、TLS 会话、HTTP 缓存，默认全部未命中。
- 查询 vizlearn.app，收到 IP
203.0.113.10，传输层有了目标地址。 - 向源站发送 SYN，接收 SYN-ACK，再确认 ACK，建立可靠字节流。
- 在流上启动 TLS：ClientHello、服务器证书与密钥协商材料、双方派生会话密钥。HTTP 此时仍等待。
- 通过安全通道发送
GET /capstones/projects/url-to-page。 - 接收 HTML，渲染器可以读文档，但此时还没有最终页面。
- HTML 解析器发现样式表，在同一安全连接获取 CSS，并缓存成功的 HTML/CSS 响应。
- HTML、CSS 分别形成 DOM 和 CSSOM。
- 结合两者构建渲染树。DOM 可以保留不参与布局的节点，例如
display: none；“不可见”不总等于“不占布局”，visibility: hidden是另一种情况。 - 布局计算位置和尺寸，绘制颜色、边框、文本，合成将各绘制层组成最终视口。
底部条带记录带类型的阶段结果，亮起项是下一层要消费的数据。旧网络消息淡出，便于跟踪当前交接内容。
加载时间花在哪里
教学轨迹阶段数固定，真实耗时却取决于往返、资源数、解析、样式复杂度、布局规模、绘制范围和浏览器调度。网络与渲染是不同瓶颈。当前简化场景中，完整缓存命中可省网络阶段，仍不能省去 DOM、CSSOM、布局、绘制、合成。
| 阶段 | 可能主导成本的因素 |
|---|---|
| DNS | 缓存未命中、解析器延迟、查询失败 |
| TCP/TLS | 往返、丢包、证书处理、协议选择 |
| HTTP | 服务器延迟、响应大小、附加资源 |
| 解析与样式 | DOM 大小、规则数、选择器匹配 |
| 布局与绘制 | 框数量、字体、图片、失效区域 |
| 合成 | 图层、变换、滚动面、GPU 上传 |
页面慢可能是等待 IP、服务器、下载、CSS，也可能是重新布局或绘制成本。诊断时先找出哪个阶段的结果迟到了。
边界情况
- 热缓存：本课 HTML、CSS 都本地命中，跳过 DNS/TCP/TLS/HTTP，仍运行渲染。
- DNS 失败：没有 IP，不联系源站，浏览器显示本地错误页，不是服务器响应。
- 连接被拒绝：DNS 已得到 IP，但源站拒绝 TCP，无法形成 socket，也不进入 TLS、HTTP、页面渲染。它与名称解析失败是不同故障。
- 过期缓存：真实浏览器可能用条件请求验证，本课将热缓存视为可直接使用的命中。
- 重定向：301、302 可能替换 URL 并重走部分链路，默认不包含。
- CSS 缺失或延迟：浏览器可以呈现无样式 HTML，后续样式变化会引发更新；样式表也可能阻塞首绘。本课只用一个样式表展示依赖。
常见错误
- 把 URL 当 HTTP 请求。先解析地址，在当前冷 HTTPS 模型完成 DNS、TCP、TLS 后才发送 GET。
- DNS 失败就说源站失败。没有地址时还没联系源站。
- 认为缓存跳过渲染。缓存提供字节，不自动提供 DOM、布局和像素。
- 混淆 TCP、TLS。前者提供可靠流，后者在流上提供认证与加密。
- 把 DOM 当最终页面。DOM 是结构，还需样式、布局、绘制、合成。
模型范围
本课展示 TCP 上的 HTTPS 和压缩后的渲染流程。TCP 三次握手逐项显示，TLS 合成一个节拍，证书交换可看专门 TLS 课。省略 HTTP/3、QUIC、重定向、Service Worker、流式 HTML、预加载扫描、JavaScript 执行、字体加载、图片解码、缓存验证和 GPU 细节。真实浏览器会重叠执行多项工作，这里分开以显示依赖。