面试官：说说从输入 URL 到页面显示发生了什么？我：从键盘说起...

输入 URL → DNS → TCP → TLS → HTTP → 浏览器解析 → 渲染 → 交互
↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓
校验 缓存 三次 握手 请求 HTML→ 构建 事件
补全 查询 握手 加密 响应 DOM+CSS 渲染树 绑定

URL 解析与补全

// 你输入的
baidu

// 浏览器自动补全
https://www.baidu.com // 默认 https，加 www

DNS 查询（层层缓存）

浏览器缓存 → OS 缓存 → hosts → 本地 DNS → 根域名 → 顶级域 → 权威域
1ms 1ms 0ms 10-100ms 100ms+ 100ms+ 100ms+

// Chrome 看 DNS 缓存
chrome://net-internals/#dns

好的，来一篇：
面试官：说说从输入 URL 到页面显示发生了什么？我：从键盘说起...
经典八股文，但 90% 的人答不到点子上。这篇把网络、浏览器、渲染讲透。
太长不看版
plain
复制
输入 URL → DNS → TCP → TLS → HTTP → 浏览器解析 → 渲染 → 交互
↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓
校验 缓存 三次 握手 请求 HTML→ 构建 事件
补全 查询 握手 加密 响应 DOM+CSS 渲染树 绑定
第一阶段：导航（Navigation）

1. URL 解析与补全
   JavaScript
   复制
   // 你输入的
   baidu

// 浏览器自动补全
https://www.baidu.com // 默认 https，加 www
HSTS 预加载列表：浏览器内置强制 https 的域名，跳过 http 尝试。
2. DNS 查询（层层缓存）
plain
复制
浏览器缓存 → OS 缓存 → hosts → 本地 DNS → 根域名 → 顶级域 → 权威域
1ms 1ms 0ms 10-100ms 100ms+ 100ms+ 100ms+

// Chrome 看 DNS 缓存
chrome://net-internals/#dns
DNS 预解析优化：