sanbuphy
df51f84ab5
README 更新: - 移除顶部 header.png 横幅图片 - 新增「附录知识库」板块，以 3×3 网格展示 9 大知识领域精选内容 - 附录链接指向部署版网站 (datawhalechina.github.io) - 阶段表格新增「附录」行，突出 80+ 交互式专题 - 章节标题「新手入门 & PM」简化为「零基础入门」 - News 新增 2026-02-25 附录知识库更新条目 新增交互组件: - 异步任务队列 (async-task-queues) 演示组件 - 文件存储 (file-storage) 演示组件 - 项目架构 (project-architecture) 演示组件 - 限流与背压 (rate-limiting) 演示组件 - 搜索引擎 (search-engines) 演示组件 - 计算机基础: AppLaunch/BiosUefi/OSBoot 等启动流程演示组件 新增附录文档: - 前端项目架构 (frontend-project-architecture.md) - 后端项目架构 (backend-project-architecture.md) 内容优化: - 算法思维、数据结构、编程语言、调试艺术等多篇附录内容更新 - HTML/CSS 布局、请求旅程等前后端文档完善 - 附录索引页 (index.md) 同步更新
369 lines
21 KiB
Markdown
369 lines
21 KiB
Markdown
# 从按下电源到访问网站发生了什么
|
||
|
||
::: tip 前言
|
||
你有没有想过，当你按下电脑电源键，到最终在浏览器中看到网页，这中间到底发生了什么？
|
||
|
||
这个过程就像一场**接力赛**——硬件通电后唤醒固件，固件检查完毕后交棒给操作系统，操作系统准备好环境后才能运行浏览器，浏览器再通过网络去远方的服务器取回网页。每一个环节都**依赖上一个环节的成功完成**，任何一棒掉链子，后面的步骤都无法进行。
|
||
|
||
理解这条完整的链路，能帮助你建立对计算机系统的整体认知，也是成为全栈工程师的必经之路。
|
||
:::
|
||
|
||
**你会学到什么？**
|
||
|
||
这篇文章按照事件发生的真实顺序，带你走完从按下电源到看到网页的五个阶段：
|
||
|
||
1. **硬件启动**（第 1 节）→ 电流如何唤醒 CPU
|
||
2. **固件自检**（第 2 节）→ BIOS/UEFI 如何确认硬件正常并找到启动设备
|
||
3. **操作系统启动**（第 3 节）→ 内核如何加载、桌面如何出现
|
||
4. **浏览器启动**（第 4 节）→ 应用程序如何被操作系统运行起来
|
||
5. **网络请求**（第 5 节）→ 从输入 URL 到页面渲染的完整网络之旅
|
||
|
||
每一步都建立在前一步的基础上，缺一不可。
|
||
|
||
---
|
||
|
||
## 1. 按下电源：硬件的觉醒
|
||
|
||
### 1.1 电源启动
|
||
|
||
当你按下电源键，**电源单元（PSU）** 开始工作，把交流电（220V）转换成直流电（12V、5V、3.3V 等），为各个硬件部件供电。
|
||
|
||
```
|
||
电源按钮 → 电源单元(PSU) → 直流电输出 → 供给主板各部件
|
||
```
|
||
|
||
### 1.2 主板芯片组唤醒
|
||
|
||
电源稳定后，**主板芯片组**开始工作，它就像电脑的"总调度员"，负责协调各个硬件部件。
|
||
|
||
### 1.3 CPU 复位
|
||
|
||
CPU 接收到复位信号后，把内部所有寄存器和缓存清零，从一个预设的地址开始执行指令。这个地址通常指向 **BIOS/UEFI** 芯片。
|
||
|
||
<PowerOnDemo />
|
||
|
||
---
|
||
|
||
> **接力第一棒完成** ⛳ 到这里，硬件层面的工作已经完成：电源把交流电转成了稳定的直流电，主板芯片组被唤醒并开始协调各部件，CPU 也完成了复位、清空了寄存器，准备好执行第一条指令。
|
||
>
|
||
> 但请注意——此刻的 CPU 就像一个"刚睁开眼的婴儿"。它虽然能执行指令，却对自己所在的环境一无所知：电脑里装了多少内存？显卡能不能用？硬盘在哪里？该从哪个设备启动操作系统？这些问题 CPU 自己回答不了。
|
||
>
|
||
> 所以，CPU 复位后执行的第一条指令，就是跳转到一个**固定的内存地址**——这个地址指向主板上焊死的 BIOS/UEFI 固件芯片。从这一刻起，控制权从纯硬件交到了固件手中。BIOS/UEFI 的任务很明确：**检查所有硬件是否正常，然后找到操作系统并把它启动起来**。这就是接力赛的第二棒。
|
||
|
||
## 2. BIOS/UEFI：硬件的自检
|
||
|
||
<BiosUefiInteractiveDemo />
|
||
|
||
---
|
||
|
||
> **接力第二棒完成** ⛳ BIOS/UEFI 圆满完成了它的三项使命：通过 POST 自检确认内存、显卡、键盘等硬件全部工作正常；初始化各硬件的工作模式；按照启动顺序找到了硬盘上的启动扇区。
|
||
>
|
||
> 但 BIOS/UEFI 的角色到此为止——它本质上是一个"体检医生 + 调度员"。它能检查硬件健不健康、能决定从哪个设备启动，但它不会管理你的文件，不会运行你的应用程序，也不会给你显示一个漂亮的桌面。这些复杂的任务，需要一个更强大的软件来接管——那就是**操作系统**。
|
||
>
|
||
> 交接的方式很具体：BIOS/UEFI 读取硬盘第一个扇区（启动扇区）里的引导程序代码，把它加载到内存中，然后让 CPU 跳转到这段代码开始执行。从这一刻起，控制权正式从固件交给了操作系统的引导程序。引导程序会一步步把操作系统内核加载进来，启动系统服务，最终呈现出你熟悉的桌面。这条链路中最复杂的一棒，开始了。
|
||
|
||
## 3. 操作系统启动：从内核到桌面
|
||
|
||
<OSBootInteractiveDemo />
|
||
|
||
---
|
||
|
||
> **接力第三棒完成** ⛳ 操作系统已经完全启动，桌面呈现在你眼前。回顾一下这一棒做了什么：引导程序从硬盘读取内核、内核接管了 CPU 和内存的控制权、系统服务逐个启动（网络、音频、安全中心……）、最后图形界面渲染出桌面。
|
||
>
|
||
> 此刻的操作系统就像一座已经通水通电、物业入驻的大楼——**进程管理**负责给每个住户（程序）分配房间，**内存管理**负责分配空间，**文件系统**负责管理仓库，**网络协议栈**负责对外通信。这些"公共服务"是所有应用程序运行的基础设施，没有它们，任何程序都无法启动。
|
||
>
|
||
> 现在你想上网，于是双击了桌面上的浏览器图标。这个简单的动作背后，操作系统要做一系列工作：查找浏览器的可执行文件在硬盘的哪个位置、为它创建一个独立的进程、分配内存空间、加载程序代码……这就是操作系统"进程管理"能力的直接体现。接下来，让我们看看浏览器是如何被启动起来的。
|
||
|
||
## 4. 打开浏览器：应用程序的启动
|
||
|
||
### 4.1 应用程序的启动过程
|
||
|
||
当你双击浏览器图标时，操作系统会：
|
||
|
||
1. **查找可执行文件**：根据文件关联，找到浏览器的 `.exe`（Windows）或可执行文件
|
||
2. **创建进程**：为浏览器创建一个新的**进程**
|
||
3. **加载程序**：把浏览器的代码从硬盘加载到内存
|
||
4. **初始化**：启动浏览器的主线程、渲染引擎、网络引擎等
|
||
|
||
```
|
||
浏览器启动过程：
|
||
┌─────────────────────────────────────┐
|
||
│ 1. 双击图标 │
|
||
│ 2. 操作系统查找浏览器可执行文件 │
|
||
│ 3. 创建浏览器进程 │
|
||
│ 4. 加载浏览器代码到内存 │
|
||
│ 5. 初始化各模块（渲染、网络、JS） │
|
||
│ 6. 显示浏览器窗口 │
|
||
└─────────────────────────────────────┘
|
||
```
|
||
|
||
### 4.2 浏览器的主要组成部分
|
||
|
||
现代浏览器是一个复杂的"操作系统"，主要由以下部分组成：
|
||
|
||
| 模块 | 功能 |
|
||
|-----|------|
|
||
| **用户界面** | 地址栏、标签页、书签等 |
|
||
| **浏览器引擎** | 协调 UI 和渲染引擎 |
|
||
| **渲染引擎** | 解析 HTML/CSS，显示网页 |
|
||
| **JavaScript 引擎** | 执行 JavaScript 代码 |
|
||
| **网络模块** | 发送 HTTP 请求 |
|
||
| **UI 后端** | 绘制基础 UI 组件 |
|
||
| **数据存储** | Cookie、LocalStorage 等 |
|
||
|
||
<BrowserArchitectureDemo />
|
||
|
||
---
|
||
|
||
> **接力第四棒完成** ⛳ 浏览器已经成功启动。操作系统为它创建了独立的进程，分配了内存空间，浏览器自身的各个模块也已初始化完毕：渲染引擎准备好解析 HTML/CSS，JavaScript 引擎准备好执行脚本，网络模块准备好发送和接收数据。
|
||
>
|
||
> 你可以把此刻的浏览器想象成一辆已经发动的汽车——引擎在运转、仪表盘亮起、导航系统就绪，但车还停在原地，因为司机（你）还没有告诉它"去哪里"。浏览器窗口此刻是空白的，地址栏闪烁着光标，等待你的输入。
|
||
>
|
||
> 当你在地址栏敲入 `https://www.example.com` 并按下回车，一场跨越整个互联网的旅程就开始了。浏览器的网络模块会接管这个请求：先解析 URL 的结构，再通过 DNS 把域名翻译成 IP 地址，然后跨越网络与远方的服务器建立 TCP 连接，协商加密通道，发送 HTTP 请求，等待服务器响应，最后把收到的 HTML/CSS/JS 代码交给渲染引擎绘制成你看到的网页。这是整条接力链中步骤最多、涉及协议最丰富的一棒——也是 Web 开发者最需要理解的一段。
|
||
|
||
## 5. 访问 URL：网络请求的全过程
|
||
|
||
### 5.1 什么是 URL？
|
||
|
||
**URL（Uniform Resource Locator）** 是资源的地址，就像生活中的地址一样，用来定位互联网上的资源。
|
||
|
||
```
|
||
URL 的结构：
|
||
┌─────────────────────────────────────────────────────────┐
|
||
│ https:// │ www.example.com │ /path/to/page │ ?query=1 │
|
||
│ 协议 │ 域名 │ 路径 │ 查询 │
|
||
└─────────────────────────────────────────────────────────┘
|
||
```
|
||
|
||
- **协议（Protocol）**：用什么方式访问（http、https、ftp 等）
|
||
- **域名（Domain）**：服务器的地址
|
||
- **路径（Path）**：资源在服务器上的位置
|
||
- **查询（Query）**：额外的参数
|
||
|
||
### 5.2 访问 URL 的完整过程
|
||
|
||
当你访问 `https://www.example.com` 时，发生了这些事情：
|
||
|
||
<URLRequestDemo />
|
||
|
||
#### 第一步：URL 解析
|
||
|
||
浏览器首先**解析 URL**，提取出协议、域名、路径等信息。
|
||
|
||
```
|
||
URL 解析过程：
|
||
https://www.example.com/index.html
|
||
↓
|
||
协议: https
|
||
域名: www.example.com
|
||
路径: /index.html
|
||
```
|
||
|
||
#### 第二步：DNS 解析
|
||
|
||
计算机通过网络访问服务器，但网络用的是 **IP 地址**（如 93.184.216.34），而不是域名。所以需要把域名转换成 IP 地址，这个过程叫 **DNS 解析**。
|
||
|
||
```
|
||
DNS 解析流程：
|
||
┌─────────────────────────────────────────────────────────┐
|
||
│ 浏览器缓存 → hosts 文件 → 本地 DNS 缓存 → DNS 服务器 │
|
||
└─────────────────────────────────────────────────────────┘
|
||
|
||
实际过程：
|
||
1. 浏览器检查缓存（最近访问过吗？）
|
||
2. 操作系统检查 DNS 缓存
|
||
3. 向 DNS 服务器发送查询请求
|
||
4. DNS 服务器返回 IP 地址
|
||
```
|
||
|
||
#### 第三步：建立 TCP 连接
|
||
|
||
拿到 IP 地址后，浏览器要与服务器建立 **TCP 连接**。TCP 是传输层协议，保证数据可靠传输。
|
||
|
||
```
|
||
TCP 三次握手：
|
||
┌─────────────────────────────────────────────────────────┐
|
||
│ 客户端 → 服务器：SYN（同步请求） │
|
||
│ 服务器 → 客户端：SYN-ACK（确认并同步） │
|
||
│ 客户端 → 服务器：ACK（确认） │
|
||
│ ↓ │
|
||
│ 连接建立完成！ │
|
||
└─────────────────────────────────────────────────────────┘
|
||
```
|
||
|
||
如果是 **HTTPS**，还需要进行 **TLS/SSL 握手**，建立加密通道。
|
||
|
||
#### 第四步：发送 HTTP 请求
|
||
|
||
连接建立后，浏览器向服务器发送 **HTTP 请求**：
|
||
|
||
```
|
||
HTTP 请求格式：
|
||
┌─────────────────────────────────────────────────────────┐
|
||
│ GET /index.html HTTP/1.1 │
|
||
│ Host: www.example.com │
|
||
│ User-Agent: Mozilla/5.0... │
|
||
│ Accept: text/html │
|
||
│ │
|
||
│ （空行） │
|
||
└─────────────────────────────────────────────────────────┘
|
||
```
|
||
|
||
常见的 HTTP 方法：
|
||
|
||
| 方法 | 含义 | 用途 |
|
||
|-----|------|-----|
|
||
| **GET** | 获取资源 | 浏览网页 |
|
||
| **POST** | 提交数据 | 登录、提交表单 |
|
||
| **PUT** | 上传资源 | 文件上传 |
|
||
| **DELETE** | 删除资源 | 删除数据 |
|
||
|
||
#### 第五步：服务器处理请求
|
||
|
||
服务器（通常是 **Web 服务器** 如 Nginx、Apache）收到请求后：
|
||
|
||
1. **解析请求**：理解客户端想要什么
|
||
2. **处理业务**：调用后端程序（如 Python、Node.js、Java）
|
||
3. **查询数据库**：获取需要的数据
|
||
4. **生成响应**：把数据组装成 HTML、JSON 等格式
|
||
|
||
```
|
||
服务器处理流程：
|
||
┌─────────────────────────────────────────────────────────┐
|
||
│ 1. Web 服务器接收请求 (Nginx/Apache) │
|
||
│ 2. 根据路径找到对应的处理程序 │
|
||
│ 3. 执行后端代码 (API、业务逻辑) │
|
||
│ 4. 如需查询数据库，获取数据 │
|
||
│ 5. 组装响应 (HTML/JSON/CSS/JS) │
|
||
│ 6. 返回 HTTP 响应 │
|
||
└─────────────────────────────────────────────────────────┘
|
||
```
|
||
|
||
#### 第六步：返回 HTTP 响应
|
||
|
||
服务器返回 **HTTP 响应**，包含状态码、响应头和响应体：
|
||
|
||
```
|
||
HTTP 响应格式：
|
||
┌─────────────────────────────────────────────────────────┐
|
||
│ HTTP/1.1 200 OK │
|
||
│ Content-Type: text/html │
|
||
│ Content-Length: 1234 │
|
||
│ │
|
||
│ <!DOCTYPE html> │
|
||
│ <html>...</html> │
|
||
└─────────────────────────────────────────────────────────┘
|
||
```
|
||
|
||
常见的状态码：
|
||
|
||
| 状态码 | 含义 |
|
||
|-------|------|
|
||
| **200** | 成功 |
|
||
| **301/302** | 重定向 |
|
||
| **404** | 资源未找到 |
|
||
| **500** | 服务器错误 |
|
||
|
||
#### 第七步：浏览器渲染页面
|
||
|
||
浏览器收到响应后，开始**渲染页面**：
|
||
|
||
<RenderingDemo />
|
||
|
||
1. **解析 HTML**：构建 DOM 树
|
||
2. **解析 CSS**：计算样式，构建渲染树
|
||
3. **执行 JavaScript**：执行页面中的 JS 代码
|
||
4. **绘制页面**：把内容显示到屏幕上
|
||
|
||
```
|
||
浏览器渲染过程：
|
||
┌─────────────────────────────────────────────────────────┐
|
||
│ 1. HTML 解析 → DOM 树 │
|
||
│ 2. CSS 解析 → 样式规则 │
|
||
│ 3. DOM + CSS → 渲染树 │
|
||
│ 4. 布局计算 → 每个元素的大小位置 │
|
||
│ 5. 绘制 → 像素显示到屏幕 │
|
||
│ 6. 合成 → 多层合并显示 │
|
||
└─────────────────────────────────────────────────────────┘
|
||
```
|
||
|
||
---
|
||
|
||
> **接力最后一棒完成** ⛳ 网页终于显示在你眼前了！回顾这最后一棒经历了多少环节：浏览器解析 URL 提取出协议和域名，通过 DNS 层层查询把域名翻译成 IP 地址，经过 TCP 三次握手与服务器建立可靠连接，再通过 TLS 握手建立加密通道，然后发送 HTTP 请求，服务器处理业务逻辑、查询数据库、组装响应数据返回，最后浏览器的渲染引擎把 HTML 解析成 DOM 树、CSS 计算成样式规则、两者合并成渲染树、计算布局、逐像素绘制到屏幕上。
|
||
>
|
||
> 现在，让我们把视角拉远，从头到尾审视这场接力赛的全貌。从按下电源键的那一刻算起：电流唤醒硬件（第 1 棒）→ 固件检查设备并找到启动盘（第 2 棒）→ 操作系统从内核到桌面完整启动（第 3 棒）→ 浏览器作为应用程序被操作系统运行起来（第 4 棒）→ 网络请求跨越互联网取回数据并渲染成页面（第 5 棒）。五棒环环相扣，每一棒都建立在前一棒的成果之上，缺少任何一个环节，你都无法看到眼前的这个网页。
|
||
>
|
||
> 接下来，让我们用一张完整的流程图把这五个阶段串在一起，直观地看看它们之间的依赖关系。
|
||
|
||
## 6. 完整流程回顾
|
||
|
||
让我们把整个过程串起来：
|
||
|
||
<FullProcessDemo />
|
||
|
||
```
|
||
从按下电源到访问网站的完整流程：
|
||
|
||
┌──────────────────────────────────────────────────────────────────┐
|
||
│ 1. 按下电源 │
|
||
│ └── 电源启动 → 主板唤醒 → CPU 复位 → 执行 BIOS/UEFI │
|
||
├──────────────────────────────────────────────────────────────────┤
|
||
│ 2. BIOS/UEFI 启动 │
|
||
│ └── 硬件自检 → 寻找启动设备 → 读取引导程序 │
|
||
├──────────────────────────────────────────────────────────────────┤
|
||
│ 3. 操作系统启动 │
|
||
│ └── 引导程序 → 加载内核 → 启动服务 → 显示桌面 │
|
||
├──────────────────────────────────────────────────────────────────┤
|
||
│ 4. 打开浏览器 │
|
||
│ └── 双击图标 → 创建进程 → 加载程序 → 显示窗口 │
|
||
├──────────────────────────────────────────────────────────────────┤
|
||
│ 5. 访问 URL │
|
||
│ └── URL 解析 → DNS 解析 → TCP 连接 → HTTP 请求 │
|
||
│ → 服务器处理 → HTTP 响应 → 浏览器渲染 → 显示网页 │
|
||
└──────────────────────────────────────────────────────────────────┘
|
||
```
|
||
|
||
---
|
||
|
||
> 看完整条链路，你会发现一个有趣的规律：每个阶段解决的问题完全不同，背后涉及的技术领域也截然不同。第 1 棒是**电子工程**的领域——电源转换、电路设计、信号传输；第 2 棒属于**固件编程**——用底层代码直接操控硬件；第 3 棒是**操作系统**的世界——进程调度、内存管理、文件系统，这是计算机科学的核心课题；第 4 棒涉及**应用开发**——如何设计一个像浏览器这样复杂的软件架构；第 5 棒则横跨**计算机网络**和**前端开发**——从 DNS、TCP/IP、HTTP 等网络协议，到 HTML/CSS/JS 的解析与渲染。
|
||
>
|
||
> 这也解释了为什么"全栈工程师"需要广泛的知识面：你写的每一行前端代码，最终都要经过这整条链路才能呈现给用户。理解链路中的每一环，能帮助你在遇到问题时快速定位——是网络层的问题？是服务器的问题？还是浏览器渲染的问题？
|
||
>
|
||
> 下面这张知识地图把这些技术领域梳理清楚，也为你后续的深入学习指明方向。
|
||
|
||
## 7. 知识地图
|
||
|
||
这一章涉及的知识领域：
|
||
|
||
```
|
||
计算机系统概览
|
||
├── 硬件基础
|
||
│ ├── 电源 (PSU)
|
||
│ ├── 主板芯片组
|
||
│ └── CPU
|
||
├── BIOS/UEFI
|
||
│ ├── POST 自检
|
||
│ ├── 启动顺序
|
||
│ └── 引导程序
|
||
├── 操作系统
|
||
│ ├── 内核 (Kernel)
|
||
│ ├── 系统服务
|
||
│ └── 桌面环境
|
||
├── 应用程序
|
||
│ ├── 进程管理
|
||
│ └── 程序加载
|
||
└── 网络通信
|
||
├── DNS 解析
|
||
├── TCP/IP 协议
|
||
├── HTTP 协议
|
||
└── 浏览器渲染
|
||
```
|
||
|
||
::: tip 继续学习
|
||
如果你想深入了解某个环节，可以继续学习：
|
||
|
||
- **从晶体管到 CPU**：了解计算机硬件基础
|
||
- **操作系统（进程/内存/文件系统）**：深入理解操作系统
|
||
- **计算机网络**：深入理解网络协议
|
||
:::
|