浏览器如何工作：面向初学者的浏览器内部指南
Source: Dev.to
你输入一个 URL。
你按下 Enter 键。
网页出现。
它感觉瞬间完成——毫不费力。没有什么特别的，对吧？
但在幕后，这一次按键会触发一连串精心协同的事件，涉及网络、解析、布局计算和渲染逻辑——所有这些都在 毫秒（甚至更短） 内完成。
大多数初学者认为浏览器的工作很简单：“它打开网站”。
这并不错误，但远远不完整。
浏览器不仅仅是一个查看器。它是一个系统——几乎是一个 操作系统。它 获取文件，理解 HTML、CSS 等语言，将文本转换为结构化数据，计算布局，最后在屏幕上绘制像素。
在本指南中，我们将放慢这一过程。
我们不会深入规范，也不会试图记住各个组件。
相反，我们将通过一个故事——从输入 URL 到看到像素——来进行讲解。
当你按下 Enter 时，浏览器并不会直接跳到绘制页面。
它遵循一个 管道——一系列步骤，每个阶段为下一个阶段准备数据。
到最后，浏览器会让人感觉不再像魔法，而更像是 精心设计的机器，恰如其分地完成它们应有的工作。
什么是浏览器，真的？
在高层次上，浏览器是一个执行四项核心工作的平台：
- 提供用户界面（标签页、地址栏、按钮）。
- 从网络获取资源。
- 理解网页语言（HTML、CSS、JavaScript）。
- 将这些指令转换为屏幕上的像素。
把浏览器想象成一家餐厅：
| 餐厅类比 | 浏览器类比 |
|---|---|
| 菜单和餐桌（你与之交互的部分） | UI（地址栏、标签页、按钮） |
| 厨房（处理原材料） | 网络与渲染引擎 |
| 厨师（遵循指令） | JavaScript 引擎、布局引擎 |
| 成品菜肴（最终上桌的食物） | 渲染后的页面（像素） |
关键要点：
浏览器 不是单一程序；它是多个协同工作的组件的集合，负责将 HTML（及其相关技术）转换为可视化的数据。
Source:
浏览器的主要组成部分
下面列出了现代浏览器内部的主要模块。
1. 用户界面 (UI)
除页面渲染区域之外，你看到的所有内容都属于 UI：地址栏、标签页、刷新按钮、前进/后退按钮等。
- UI 不负责渲染网页。
- 它仅 接受你的输入 并将工作交给其他组件。
- 当你输入 URL 并按 Enter 时，UI 会说：“这是请求，请处理。”
2. 浏览器引擎
通常被称为浏览器的 大脑，它负责协调：
- 导航（后退、前进、重新加载）。
- UI 层与存储子系统之间的 通信。
- 会话管理（跨标签页的状态、历史记录等）。
常见的浏览器引擎有：
- Trident（Internet Explorer、早期 Edge）
- Blink（Chrome、Opera、Brave）
- WebKit（Safari）
- Gecko（Firefox）
3. 渲染引擎
渲染引擎将 HTML/CSS 转换为可视内容。它的核心任务包括：
- 解析 HTML → DOM（文档对象模型）。
- 解析 CSS → CSSOM（CSS 对象模型）。
- 构建 渲染树。
- 执行 布局（回流） 和 绘制。
它会监听来自浏览器引擎的指令（例如重新加载、刷新）。
4. 网络层
当浏览器引擎收到 URL 后，会请求网络层去获取资源。职责包括：
- DNS 解析。
- 建立 TCP/TLS 握手。
- 发送 HTTP/HTTPS 请求。
常见的要获取的资源有：
- HTML 文档
- CSS 样式表
- JavaScript 文件
- 图片、字体、视频等
此阶段浏览器仅在 收集原始材料，还不知道它们最终的呈现方式。
5. JavaScript 引擎（JS 解释器）
JavaScript 引擎负责解析、编译并执行 JavaScript 代码。常见的引擎有：
- V8（Chrome、Node.js）
- SpiderMonkey（Firefox）
- JavaScriptCore（Safari、Bun）
- Chakra（旧版 Edge）
6. UI 后端（图形层）
UI 后端实际在屏幕上绘制像素。渲染引擎生成布局和绘制指令，UI 后端将这些指令转化为光栅图像，由操作系统显示。
7. 存储 / 磁盘 API
提供持久化存储，用于：
- 浏览器缓存
- Cookie
localStorage/sessionStorage- IndexedDB 等
它使用内部方法将数据写入磁盘上的浏览器配置文件夹。
概览图
图：浏览器组件及其职责的高级视图。
浏览器的真实工作原理
让我们深入探讨从 输入 URL 到 看到像素 的整个过程。
- 用户输入 – 在地址栏按下 Enter。
- 浏览器引擎 → 网络层 – 引擎指示网络层解析域名（DNS）。
- DNS 解析 – 网络层获取服务器的 IP 地址。
- 连接握手 – 建立 TCP（可选 TLS）连接。
- HTTP 请求 – 网络层发送 HTTP/HTTPS 请求以获取 HTML 文档。
- 数据到达 – 第一个字节到达后，流式传输到 渲染引擎。
- HTML 解析 – 渲染引擎对 HTML 进行标记化，构建 DOM，并开始构建 渲染树。
- CSS 获取与解析 – 在解析 HTML 时，引擎发现
<link>和<style>标签，向网络层请求 CSS 文件，将其解析为 CSSOM，并与 DOM 合并。 - JavaScript 执行 – 遇到
<script>标签会触发 JavaScript 引擎，它可能修改 DOM/CSSOM，导致进一步的布局工作。 - 布局（回流） – 完整的渲染树准备好后，引擎计算每个节点的几何尺寸。
- 绘制 – 引擎将布局信息转化为绘制指令（图层、纹理）。
- UI 后端 – 这些指令交给图形层进行光栅化，并更新屏幕。
结果：你看到的页面。
快速回顾
| 步骤 | 相关组件 | 发生了什么 |
|---|---|---|
| 1️⃣ | UI、浏览器引擎 | 捕获用户输入 |
| 2️⃣ | 浏览器引擎 → 网络层 | DNS 查询 |
| 3️⃣ | 网络层 | TCP/TLS 握手 |
| 4️⃣ | 网络层 | 发送 HTTP 请求 |
| 5️⃣ | 网络层 → 渲染引擎 | 接收 HTML 流 |
| 6️⃣ | 渲染引擎 | 标记化 → DOM |
| 7️⃣ | 渲染引擎 + 网络层 | 获取并解析 CSS → CSSOM |
| 8️⃣ | JS 引擎 | 执行脚本，可能修改 DOM/CSSOM |
| 9️⃣ | 渲染引擎 | 布局（回流） |
| 🔟 | 渲染引擎 | 绘制 |
| 1️⃣1️⃣ | UI 后端 | 光栅化并显示 |
进一步阅读
- “How Browsers Work” – 由 Tali Garsiel 与 Paul Irish 撰写的详细系列。
- MDN Web Docs – 每个浏览器子系统的优秀参考。
- “Browser Architecture” – 关于现代引擎设计（Blink、Gecko、WebKit）的演讲和文章。
现在，你对将简单 URL 转换为完整渲染网页的隐形机器有了更清晰的认识。
[](https://media2.dev.to/dynamic/image/width=800,height=&fit=scale-down,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Ffas2fanc5chbrn7j2ybr.png)HTML Parsing: From Text to DOM
HTML 以纯文本形式出现。
浏览器此时并不识别“标题”或“章节”——它只看到字符。
于是它会解析 HTML：
- 逐个 token 读取
- 理解标签及其嵌套
随后构建一个称为 DOM 的结构化表示。
什么是 DOM？
文档对象模型 (DOM) 是一种类似树状的结构，其中：
- 每个 HTML 元素都会成为一个节点
- 父子关系得以保留
可以把 DOM 想象成元素的家谱树。
CSS 解析：从样式到 CSSOM
CSS 也从文本开始。
浏览器将 CSS 解析为另一种结构，称为 CSSOM（CSS 对象模型）。
该结构存储：
- 选择器
- 属性
- 值
- 层叠和继承规则
重要说明：
CSSOM 并不决定位置——它仅定义事物应如何呈现。
