下面是 第 20 题：从输入 URL 到页面渲染全过程
这是前端最最最经典、最全面的高频面试题。
我会用：结构化 + 流程图思维 + 要点总结 + 速记卡片 来讲解。
✅ 第 20 题：从输入 URL 到页面渲染发生了什么？
📘 一、整体流程（面试官希望你说出这些关键步骤）
DNS 解析 → 建立 TCP 连接 → 发送 HTTP 请求 → 服务器处理 → 返回 HTTP 响应
→ 浏览器解析响应 → 构建 DOM → 构建 CSSOM → 渲染树 Render Tree
→ Layout 排版 → Paint 绘制 → Composite 合成 → 页面呈现面试官听到这些就知道你掌握程度不错。
下面详细展开。
📘 二、第一步：URL 解析
用户在地址栏输入 URL：
- 补全 scheme（如省略 http://）
- 判断是否是搜索查询（例如输入"abc"）
📘 三、第二步：DNS 域名解析
浏览器要将域名解析成 IP 地址。
DNS 查找顺序（从快到慢）：
- 浏览器缓存
- 系统 Hosts
- 本地 DNS 服务器缓存
- 递归 DNS 查询（. → 顶级域名 → 权威域名）
解析成功后得到服务器实际 IP。
📘 四、第三步：建立 TCP 连接（三次握手）
经典三次握手：
- SYN：浏览器 → 服务器
- SYN + ACK：服务器 → 浏览器
- ACK：浏览器 → 服务器
建立连接后才可以发送数据。
⚠️ HTTPS 多了一步：TLS/SSL 握手
（交换证书、对称加密密钥、验证身份）
📘 五、第四步：发送 HTTP 请求
浏览器发送：
- 请求行：GET / POST
- 请求头：cookie、cache-control
- 请求体（POST 才有）
📘 六、第五步：服务器处理请求
服务器进行：
- 鉴权（token, cookie）
- 路由匹配
- 业务逻辑处理
- 操作数据库
- 返回数据（HTML、JSON、静态文件）
📘 七、第六步：浏览器接收响应
服务器返回 HTTP 响应：
- 状态码（200 / 301 / 302 / 304 / 404 / 500 等）
- 响应头（cache-control、content-type）
- 响应体（HTML / CSS / JS / 图片 / json）
如果是 HTML，则进入下一阶段：解析渲染。
📘 七、浏览器渲染阶段（最重要的部分）
浏览器开始解析响应的 HTML。
📌 1. 构建 DOM 树
解析 HTML → 从上到下生成 DOM。
注意：
- 碰到
<script>会阻塞 DOM 构建（同步 script） - 除非 script 设置
defer / async
📌 2. 构建 CSSOM 树
解析所有 CSS 文件、style 标签、内联样式。
CSSOM 构建也会阻塞渲染，因为 JS 可能依赖样式计算。
📌 3. 合并 DOM + CSSOM -> 渲染树（Render Tree）
Render Tree 只包含：
- 可见元素
- 可见部分的样式
例如：
- display:none 元素不会进入渲染树
📌 4. Layout（重排）
计算各元素：
- 大小
- 位置
- 盒模型
📌 5. Paint（重绘）
绘制颜色、字体、边框、阴影等。
📌 6. Composite（合成）
GPU 将图层进行合成（Compositor）。
使用 transform / opacity 会创建合成层，避免重排 → 提高性能。
📘 八、页面绘制完成，但之后会继续触发渲染
用户滚动、JS 更新 DOM 等都会触发：
- Reflow（重排）
- Repaint（重绘）
你上一题已经学过。
📘 九、可能的加分环节：缓存
浏览器缓存可分为：
1. 强缓存（200 from disk/memory）
- Expires
- Cache-Control
2. 协商缓存（304 Not Modified）
- ETag
- Last-Modified
前端必须掌握缓存策略。
📘 十、最终版 10 秒速记卡片（模板可背）
css
输入 URL →
DNS 解析 →
TCP/HTTPS 握手 →
发送 HTTP 请求 →
服务器处理返回 →
浏览器解析 HTML →
构建 DOM →
构建 CSSOM →
合成渲染树 →
Layout →
Paint →
Composite →
页面呈现加分内容：
- script 的 async / defer
- 页面资源缓存
- HTTP2 多路复用
- GPU 合成层（transform/opacity）
下一题继续吗？
第 21 题：HTTP 状态码 & 缓存机制（强缓存 vs 协商缓存）