输入 URL 到页面展示
面试经典串讲题：把前面所有知识点串成一条链路。答题框架：网络层 + 浏览器层两段，从输入 URL 到页面渲染。
完整链路
URL 到页面: 网络五步 + 渲染五步
网络段（答题重点）
| 步骤 | 要点 |
|---|---|
| 1. URL 解析 | 协议、域名、端口、路径 |
| 2. DNS | 缓存 → 递归/迭代查询（见 DNS 篇） |
| 3. TCP 握手 | 三次握手建立连接（见握手篇） |
| 4. TLS | HTTPS 时：证书验证 + 密钥协商（见 TLS 篇） |
| 5. HTTP 请求 | 请求行/头/体，带 Cookie |
优化点：DNS 预解析、连接复用（keep-alive）、HTTP/2 多路复用（减少连接数）。
渲染段
| 步骤 | 要点 |
|---|---|
| 6. 响应处理 | 状态码、Content-Type、缓存策略（304/缓存命中） |
| 7. 解析 HTML | 构建 DOM 树 + CSSOM 树 |
| 8. 子资源加载 | 脚本阻塞解析（defer/async）、CSS 阻塞渲染 |
| 9. 渲染 | 布局（Layout）→ 绘制（Paint）→ 合成（Composite） |
| 10. 交互 | 事件循环、JS 执行 |
优化视角（加分）
- 关键渲染路径：减少阻塞（脚本放底部/defer、CSS 合并、内联关键 CSS）
- 资源加载：CDN（见 CDN 篇）、压缩、缓存（强缓存/协商缓存）
- 网络：HTTP/2 多路复用、连接复用、DNS 预解析
- 面试话术：分网络和渲染两段讲，每段给一个优化点，展示系统性
面试追问
- 整体流程？ 解析 URL → DNS → TCP 握手 → TLS → HTTP 请求 → 响应 → 解析渲染 → 交互
- 哪个环节最慢？ 通常 DNS + 握手 + 响应体下载。优化：缓存、复用连接、CDN
- 脚本为什么阻塞？ 解析到 script 要下载执行完才继续（可能改 DOM）。defer/async 解决
- 强缓存和协商缓存？ 强缓存（Cache-Control）不发请求直接用；协商缓存（304）发请求确认没变
- 渲染阻塞的因素？ 阻塞脚本、大 CSS、同步请求。关键渲染路径优化