从输入 URL 到页面渲染：浏览器做了什么？

在我们每天开发网页时，是否想过：用户在浏览器输入一个网址，按下回车后，到页面最终展现，这中间到底发生了什么？

本文将系统梳理这个过程，从网络协议到浏览器渲染机制，一次讲清。

🧭 1. 用户输入 URL

当用户在地址栏输入 https://example.com/index.html：

浏览器自动补全协议（如省略 https://）
判断输入的是 URL 还是搜索词（如 github）
查询历史记录与书签提供建议

🌍 2. 解析 URL

浏览器将 URL 拆解为结构：

部分	示例
协议	`https`
主机名	`example.com`
路径	`/index.html`
查询参数	`?q=123`
片段（锚点）	`#section1`

🧠 3. DNS 查询

为了连接服务器，浏览器需要知道 example.com 对应的 IP 地址。

查找顺序：

浏览器 DNS 缓存
系统 DNS 缓存
hosts 文件
本地路由器 DNS 缓存
网络运营商 DNS / 公共 DNS（如 8.8.8.8）

可使用 <link rel="dns-prefetch"> 提前解析 DNS。

🔒 4. 建立连接（TCP + TLS）

TCP 三次握手：

客户端与服务器建立连接：

客户端：SYN
服务端：SYN-ACK
客户端：ACK

HTTPS 额外执行：

TLS 握手：协商加密算法、交换证书、建立加密通道

📡 5. 发送 HTTP 请求

浏览器构建并发送 HTTP 请求：

http 复制代码

GET /index.html HTTP/1.1
Host: example.com
User-Agent: Chrome/120 ...
Accept: text/html

可能包含 Cookie、Referer、Authorization 等头部。

🏭 6. 服务器响应

服务器处理请求，返回 HTML 或数据：

http 复制代码

HTTP/1.1 200 OK
Content-Type: text/html
Content-Length: 1536

<html>...</html>

也可能返回：

301/302 重定向
304 缓存命中
401/403/404/500 错误状态

📥 7. 浏览器接收响应并处理重定向

如是重定向（3xx），浏览器自动重新发起请求
HTML 内容则立即进入解析流程（Streaming Parser，边下载边解析）

🧱 8. 构建页面渲染树（渲染关键路径）

📌 浏览器的 Critical Rendering Path（关键渲染路径）：

1. HTML → DOM 树

解析 HTML，构建 DOM（文档对象模型）

2. CSS → CSSOM 树

加载与解析 CSS，构建 CSSOM（样式结构）

3. DOM + CSSOM → Render Tree

生成只包含可见元素的渲染树

4. Layout（回流）

计算每个节点的位置与大小

5. Paint（重绘）

将像素绘制到图层中

6. Compositing（合成）

合成多个图层，送入 GPU 渲染帧缓冲区

🖼️ 9. 加载子资源

页面中 <script>、<img>、<link> 等标签引发：

并发加载资源
JS 可设置 defer 或 async 避免阻塞渲染
图片可懒加载（loading="lazy"）

✅ 10. 页面完成渲染

浏览器触发两个重要事件：

事件	含义
`DOMContentLoaded`	DOM 树构建完成，不等待图片
`window.onload`	所有资源（图片/iframe）加载完成

🧠 整体流程总结

text 复制代码

用户输入 URL
 ↓
URL 解析
 ↓
DNS 查询
 ↓
建立 TCP/TLS 连接
 ↓
发送 HTTP 请求
 ↓
服务器处理并响应
 ↓
浏览器接收 HTML
 ↓
HTML → DOM，CSS → CSSOM
 ↓
Render Tree → Layout → Paint
 ↓
加载其他资源
 ↓
页面可交互 ✅

🔧 开发者关注点（性能优化）

阶段	优化建议
DNS 查询	使用 CDN + DNS 预解析
请求阶段	Gzip 压缩、缓存控制
渲染阶段	控制 DOM 复杂度、懒加载图像
JavaScript	分包、Tree Shaking、合理使用 defer/async
图片资源	WebP/AVIF 格式、Lazyload、占位图优化

📎 补充阅读

✅ 总结一句话

"浏览器从输入网址到页面渲染，跨越了网络、协议、解析、布局与绘制，作为前端开发者，理解这一过程，是性能优化与工程质量的基石。"

如果你觉得这篇笔记有用，欢迎点赞收藏，后续我会写一篇**"浏览器渲染性能瓶颈分析与优化技巧"**，欢迎关注！