DNS、TCP/TLS 与从 URL 到页面展示
前半偏 传输层与握手，后半偏 浏览器全链路。
第一部分：DNS 与 TCP 连接
DNS 解析（简流程）
用户输入域名后，解析顺序大致为：浏览器缓存 → 操作系统缓存（含 hosts）→ 递归解析器（本地 DNS）→ 根 / 顶级域 / 权威 逐级查询，得到 IP 后各级可做 TTL 缓存。
实际项目中还可使用 HTTPDNS、CDN CNAME 等优化解析与就近接入。
TCP 三次握手（为何三次）
目的：确认双方收发能力，同步初始序列号，避免历史重复连接请求干扰。
简述：SYN → SYN-ACK → ACK，连接建立后再传 HTTP。
TCP 四次挥手（断开）
一方发起 FIN 表示不再发送数据；另一方确认后可能仍有数据要发，故 全双工关闭 需两端分别释放，常见为 四次 报文交互。
TLS 握手（HTTPS）
在 TCP 之上增加 TLS：协商算法、交换密钥、验证证书，然后才发送加密 HTTP。首次访问延迟主要来自 额外 RTT，可通过 会话恢复、OCSP stapling、HTTP/2 多路复用 等综合优化。
小结
性能排查：DNS 慢 / TCP/TLS RTT 高 会拉长首包时间（TTFB 相关感知）。结合 Network 瀑布图看 排队与握手阶段。
第二部分：从 URL 到页面展示
主链路（浓缩版）
DNS → TCP（+TLS）→ 发 HTTP 请求 → 收响应 → 解析 HTML → 拉取 CSS/JS/图片 → 构建 DOM/CSSOM → 布局绘制 →（可选）长连接或关闭
浏览器侧（提要）
- 导航：输入合法 URL 则请求该地址；否则可能走默认搜索引擎。
- 拿到 HTML：自上而下解析，遇
link/script/img再发起子请求（具体阻塞行为见 前端优化 / 渲染与关键路径）。 - 渲染：DOM + CSSOM → 渲染树 → 布局 → 绘制；JS 默认可能阻塞解析（
defer/async改善）。
「渲染优化」与 HTTP 的关系
- 减少请求体积与次数：缓存、压缩、合并策略（HTTP/2 下合并策略需重新权衡）。
- 优先级：
preload、fetchpriority等影响关键资源加载顺序。
细节见本站 前端优化 专题；本篇保持 全链路时空顺序 心智模型即可。
小结
概述「输入 URL 发生什么」：按 DNS→TCP/TLS→HTTP→解析渲染 分段说明，并点出 无状态协议 + 静态资源瀑布请求 即可展开。