从 URL 输入到页面渲染全过程详解
核心流程
从用户输入 URL 到页面最终呈现在屏幕上，主要分为 网络阶段 和 渲染阶段。
- 网络阶段：解决“如何获取资源”的问题。
- 渲染阶段：解决“如何展示资源”的问题。
一、图解全流程：从输入到呈现
这一过程涉及浏览器进程、网络进程、渲染进程等多个模块的协作。
二、第一阶段：网络请求（获取资源）
详细原理请参考：
- URL 解析：浏览器判断输入的是搜索关键词还是合法 URL。
- DNS 解析：查询域名对应的 IP 地址（递归查询 + 迭代查询，多级缓存）。
- 建立连接：TCP 三次握手建立连接，如果是 HTTPS 还需要 TLS 握手（1.2/1.3 协议）。
- 发送请求：浏览器构造 HTTP 请求报文并发送。
- 接收响应：服务器处理请求并返回响应报文。如果是
301/302重定向，则重新跳转。
三、第二阶段：关键渲染路径 (CRP)
当渲染进程接收到 HTML 字节流后，开始执行 关键渲染路径（Critical Rendering Path）。
1. 构建 DOM 树 (DOM Tree)
- 原理：将 HTML 文本解析为浏览器可理解的对象模型（Node 节点）。
- 特性：
- 增量构建：边下载边解析，无需等待整个文件。
- 预加载扫描器：提前识别外部资源（图片、脚本）并异步请求。
- 阻塞性：遇到
<script>（无async/defer）会暂停解析，直到脚本执行完毕。
2. 构建 CSSOM 树 (CSSOM Tree)
- 原理：解析 CSS 文件，计算每个节点的最终样式（层叠性、继承性、单位换算）。
- 特性：CSS 加载不阻塞 DOM 解析，但会阻塞 DOM 渲染和 JS 执行。
3. 生成渲染树 (Render Tree)
- 原理：合并 DOM 树和 CSSOM 树，仅包含 可见元素。
- 注意：
display: none的元素会被过滤，但visibility: hidden的元素会保留。
4. 布局 (Layout / Reflow)
- 任务：计算渲染树中每个节点在视口内的 确切位置和几何尺寸（坐标、宽、高）。
5. 绘制 (Paint / Repaint)
- 任务：将布局后的节点转化为实际的 像素点（颜色、背景、边框、阴影等）。
6. 合成 (Composite)
- 任务：将多个图层（Layer）按照正确顺序叠加，利用 GPU 加速 最终呈现。
四、重难点剖析：重排与重绘
面试中最常考查的是对性能损耗的理解。
1. 重排 (Reflow)
- 定义：当元素的 几何属性（如宽、高、位置）改变时，浏览器需要重新计算布局。
- 代价：极高。会触发后续的绘制和合成，可能导致整个文档的布局重新计算。
- 触发：修改
width/height/margin、窗口大小改变、读取offsetTop等。
2. 重绘 (Repaint)
- 定义：当元素的 视觉属性（如颜色、背景色）改变，但不影响布局时。
- 代价：中等。跳过布局阶段，直接进入绘制阶段。
- 触发：修改
color/background-color/box-shadow等。
五、面试通关：性能优化核心
面试官：如何优化关键渲染路径以提高首屏速度？
标准回答：
- 减少资源体积：Gzip/Brotli 压缩、精简代码、压缩图片。
- 优化资源加载：
- 关键 CSS 内联：将首屏必须的样式直接写在
<style>中。- JS 延迟加载：使用
defer（异步下载，DOM 构建完执行）或async（异步下载，下载完立即执行）。- 预加载：使用
<link rel="preload">提前获取核心资源。- 减少重排重绘：
- 批量操作 DOM：使用
DocumentFragment或离线修改。- GPU 加速：使用
transform、opacity属性做动画，它们会跳过布局和绘制，直接在合成线程执行。- 读写分离：避免在循环中连续读写 DOM 几何属性（防止强制同步布局）。
六、总结记忆口诀
📝 输入网址查 DNS
🤝 TCP/TLS 握手忙
📤 发送请求收响应
🌳 构建 DOM 与 CSSOM
🎨 渲染树上布局绘
✨ 合成加速显屏幕
🚀 性能优化减排绘