浏览器是如何工作的：面向初学者的浏览器内部指南
Source: Dev.to
请提供您希望翻译的具体文本内容（文章正文），我将为您翻译成简体中文，并保持原有的 Markdown 格式和技术术语不变。谢谢！
当你输入 www.twitter.com 并按回车时，实际发生了什么？
你可能已经在浏览器中输入 www.twitter.com 数千次。
Twitter 几乎瞬间打开……但你是否曾好奇 在那几毫秒内浏览器内部到底发生了什么？
浏览器并不仅仅是“打开一个网站”。它会进行一次快速而复杂的旅程，获取、解析、组织，最终在屏幕上显示页面。在本指南中，我们将一步步拆解这段旅程——不使用不必要的行话。
什么是浏览器？
A browser 是一个应用程序，允许用户通过在 user 与 server 之间充当桥梁来访问互联网上的信息。
常用浏览器包括：
- Google Chrome
- Safari
- Firefox
- Microsoft Edge
- Brave
- Opera
当您在这些浏览器中搜索或打开网站时，很多事情会 在幕后毫秒级完成。
浏览器的主要组成部分（高级）
将浏览器想象成一支团队，每个成员都有特定职责。
1. 用户界面（UI）
您交互的所有内容：
- 地址栏
- 标签页
- 后退/前进按钮
- 书签
注意： UI 并不显示网站本身——它仅用于交互。
2. 浏览器引擎
将 UI 与渲染引擎连接起来，并指示其他组件何时以及如何工作 的 协调者。
3. 渲染引擎
将原始 HTML 和 CSS 转换为您看到的可视网页的 艺术家。
- Chrome → Blink
- Firefox → Gecko
- Safari → WebKit
4. JavaScript 引擎
执行 JavaScript 代码并处理逻辑、事件和动态行为的 专家。
- Chrome → V8
- Firefox → SpiderMonkey
5. 网络
负责从服务器获取 HTML、CSS、JavaScript、图像、字体等所有所需资源的 交付团队。
6. 数据存储
保存以下内容的 储物间：
- 缓存
- Cookie
- 本地存储 (LocalStorage)
- 会话存储 (SessionStorage)
这有助于加快后续访问速度。
7. 图形 / UI 后端
使用底层图形 API 在屏幕上绘制文字、图像、形状和布局的 画家。
高层浏览器流程
UI
↓
Browser Engine
↓
Rendering Engine + JavaScript Engine
↓
Networking
↓
Storage
↓
Screen网络：获取网站
当你输入 URL 并按下 Enter：
- 缓存检查 —— 如果存在有效的副本，页面可能会立即加载。
- 如果没有，浏览器会执行 DNS 查询，将
twitter.com转换为 IP 地址。 - 浏览器向该 IP 发送 HTTP 请求。
- 服务器返回 HTML、CSS、JavaScript 以及其他资源。
现在浏览器拥有了原始文件——但仍然无法显示它们。
HTML 解析与 DOM 创建
浏览器 解析 HTML 并将其转换为 DOM（文档对象模型），这是一种类似树状结构，表示页面内容。
示例 HTML
<!DOCTYPE html>
<html>
<head>
<title>Hello</title>
</head>
<body>
<h1>Hello</h1>
<p>Welcome</p>
</body>
</html>DOM 树（解析后）
HTML
└── BODY
├── H1
│ └── "Hello"
└── P
└── "Welcome"解析仅仅是指将标记拆分为有意义的片段，以便浏览器能够理解它们。
CSS 解析与 CSSOM 创建
CSS 被单独解析。浏览器将 CSS 转换为 CSSOM（CSS 对象模型），它定义颜色、字体、尺寸和布局规则。当 DOM 描述 存在哪些元素 时，CSSOM 描述 这些元素应如何呈现。
DOM + CSSOM = 渲染树
浏览器将 DOM（结构）和 CSSOM（样式）结合，创建 渲染树，它：
- 只包含可见元素
- 充当绘制页面的蓝图
布局（回流），绘制和显示
一旦渲染树准备就绪，浏览器会进行三个最终阶段。
1. 布局（回流）
计算每个元素的精确位置、宽度和高度，确定所有内容在屏幕上的布局位置。
2. 绘制
为文本、颜色、图像、边框、阴影等填充像素。
3. 显示（合成）
将所有已绘制的图层合并，并在屏幕上显示最终图像。这就是你实际看到网页的时刻。
完整流程（全局视图）
URL typed
↓
DNS lookup + HTTP request
↓
HTML → DOM
CSS → CSSOM
↓
DOM + CSSOM → Render Tree
↓
Layout (Reflow)
↓
Paint
↓
Pixels on screen最终思考
不要专注于记忆组件名称。专注于旅程：
获取 → 理解 → 组织 → 绘制
每次打开网站时，浏览器都会在毫秒级别运行整个流程——安静、高效且反复进行。这正是让网页感觉瞬时的原因。🚀