feat(appendix): 添加多个交互式演示组件，完善 AI/Infra 等章节内容
- 新增 Vibe Coding 全栈相关演示组件 (DeveloperSkillShift, FrontendTriad, BackendCore 等) - 新增 RAG 相关组件 (RAGPipeline, ChunkingStrategy, Retrieval 等) - 新增 Embedding & Vector 相关组件 (EmbeddingConcept, VectorSimilarity 等) - 新增 AI Native App 设计组件 (AINativeArch, PromptDesign 等) - 新增 Infrastructure as Code 组件 (IaCConcept, TerraformWorkflow 等) - 新增 DNS & HTTPS 演示组件 (DnsResolution, HttpsHandshake 等) - 新增 Model Finetuning 组件 (FinetuningPipeline 等) - 更新多个章节的 markdown 内容，集成交互式演示
This commit is contained in:
sanbuphy
@@ -0,0 +1,452 @@
|
||||
# 从按下电源到访问网站发生了什么
|
||||
|
||||
::: tip 前言
|
||||
你有没有想过，当你按下电脑电源键，到最终在浏览器中看到网页，这中间到底发生了什么？
|
||||
|
||||
这个过程涉及**硬件启动**、**操作系统加载**、**网络通信**等多个环节。理解这个过程，能帮助你建立对计算机系统的整体认知，也是成为全栈工程师的必经之路。
|
||||
:::
|
||||
|
||||
**你会学到什么？**
|
||||
|
||||
- 电脑从通电到显示桌面的完整过程
|
||||
- 操作系统是如何启动的
|
||||
- 浏览器是如何工作的
|
||||
- 当你访问一个 URL 时，网络请求是如何完成的
|
||||
|
||||
---
|
||||
|
||||
## 1. 按下电源：硬件的觉醒
|
||||
|
||||
### 1.1 电源启动
|
||||
|
||||
当你按下电源键，**电源单元（PSU）** 开始工作，把交流电（220V）转换成直流电（12V、5V、3.3V 等），为各个硬件部件供电。
|
||||
|
||||
```
|
||||
电源按钮 → 电源单元(PSU) → 直流电输出 → 供给主板各部件
|
||||
```
|
||||
|
||||
### 1.2 主板芯片组唤醒
|
||||
|
||||
电源稳定后，**主板芯片组**开始工作，它就像电脑的"总调度员"，负责协调各个硬件部件。
|
||||
|
||||
### 1.3 CPU 复位
|
||||
|
||||
CPU 接收到复位信号后，把内部所有寄存器和缓存清零，从一个预设的地址开始执行指令。这个地址通常指向 **BIOS/UEFI** 芯片。
|
||||
|
||||
<PowerOnDemo />
|
||||
|
||||
---
|
||||
|
||||
## 2. BIOS/UEFI：硬件的自检
|
||||
|
||||
### 2.1 什么是 BIOS/UEFI？
|
||||
|
||||
**BIOS（Basic Input/Output System）** 是电脑启动后第一个运行的程序，存储在主板的一个**只读芯片**中。
|
||||
|
||||
**UEFI（Unified Extensible Firmware Interface）** 是 BIOS 的升级版，更安全、更现代。现在的电脑大多使用 UEFI。
|
||||
|
||||
### 2.2 BIOS/UEFI 做了什么？
|
||||
|
||||
1. **硬件自检（POST）**：检查内存、显卡、键盘等部件是否正常
|
||||
2. **初始化硬件**：设置硬件工作模式
|
||||
3. **启动顺序**：按照设定顺序，尝试从硬盘/U 盘/网络启动
|
||||
|
||||
```
|
||||
BIOS/UEFI 工作流程：
|
||||
┌─────────────────────────────────────┐
|
||||
│ 1. 硬件自检 (POST) │
|
||||
│ - 检查内存是否正常 │
|
||||
│ - 检查显卡是否正常 │
|
||||
│ - 检查键盘/鼠标是否正常 │
|
||||
├─────────────────────────────────────┤
|
||||
│ 2. 初始化硬件 │
|
||||
│ - 设置硬件工作模式 │
|
||||
│ - 配置中断向量表 │
|
||||
├─────────────────────────────────────┤
|
||||
│ 3. 寻找启动设备 │
|
||||
│ - 按启动顺序查找可启动设备 │
|
||||
│ - 读取启动扇区 │
|
||||
└─────────────────────────────────────┘
|
||||
```
|
||||
|
||||
如果发现问题，主板会发出**蜂鸣声**（不同次数代表不同错误）。
|
||||
|
||||
### 2.3 启动顺序
|
||||
|
||||
BIOS/UEFI 会按照设定的**启动顺序**查找启动设备：
|
||||
|
||||
1. 硬盘（最常见）
|
||||
2. U 盘/光盘（重装系统时用）
|
||||
3. 网络（ PXE 启动，企业批量部署用）
|
||||
|
||||
找到第一个可启动设备后，读取它的**启动扇区（Boot Sector）**，把控制权交给操作系统。
|
||||
|
||||
---
|
||||
|
||||
## 3. 操作系统启动：从内核到桌面
|
||||
|
||||
### 3.1 什么是操作系统？
|
||||
|
||||
**操作系统（Operating System，简称 OS）** 是管理计算机硬件和软件资源的程序集合。它就像一个"大管家"，帮我们管理内存、CPU、文件等资源，让我们不需要直接和硬件打交道。
|
||||
|
||||
常见的操作系统：
|
||||
|
||||
| 操作系统 | 特点 | 典型设备 |
|
||||
|---------|------|---------|
|
||||
| **Windows** | 生态丰富，兼容性好 | 桌面电脑、笔记本 |
|
||||
| **macOS** | 苹果生态，流畅稳定 | Mac 电脑 |
|
||||
| **Linux** | 开源免费，服务器首选 | 服务器、嵌入式设备 |
|
||||
| **Android** | 移动端 Linux | 手机、平板 |
|
||||
| **iOS** | 苹果移动端 | iPhone、iPad |
|
||||
|
||||
### 3.2 操作系统的启动过程
|
||||
|
||||
当你从硬盘启动时，操作系统的启动过程如下：
|
||||
|
||||
<BootProcessDemo />
|
||||
|
||||
#### 第一步：引导程序（Bootloader）
|
||||
|
||||
硬盘的第一个扇区存放着**引导程序（Bootloader）**，它的任务是把操作系统内核加载到内存中。
|
||||
|
||||
- **Windows**：Bootloader 叫 `bootmgr`
|
||||
- **Linux**：常见的引导程序有 `GRUB`、`rEFInd` 等
|
||||
|
||||
```
|
||||
引导程序工作流程：
|
||||
┌─────────────────────────────────────┐
|
||||
│ 1. 读取硬盘分区表 │
|
||||
│ 2. 找到操作系统分区 │
|
||||
│ 3. 加载操作系统内核到内存 │
|
||||
│ 4. 跳转到内核入口点 │
|
||||
└─────────────────────────────────────┘
|
||||
```
|
||||
|
||||
#### 第二步：内核加载（Kernel）
|
||||
|
||||
操作系统**内核（Kernel）** 是操作系统的核心，负责管理内存、CPU、进程等核心功能。
|
||||
|
||||
```
|
||||
内核的主要功能：
|
||||
┌─────────────────────────────────────┐
|
||||
│ • 进程管理 - 创建/调度进程 │
|
||||
│ • 内存管理 - 分配/回收内存 │
|
||||
│ • 文件系统 - 管理文件存储 │
|
||||
│ • 设备驱动 - 控制硬件设备 │
|
||||
│ • 网络通信 - 处理网络协议 │
|
||||
└─────────────────────────────────────┘
|
||||
```
|
||||
|
||||
#### 第三步：系统服务启动
|
||||
|
||||
内核加载后，会启动各种**系统服务**：
|
||||
|
||||
- **Windows 服务**：更新服务、安全中心、打印机服务
|
||||
- **Linux 服务**：SSH 服务、网络服务、图形界面（GNOME、KDE）
|
||||
|
||||
```
|
||||
Windows 启动过程：
|
||||
BIOS → MBR → bootmgr → winload.exe → ntoskrnl.exe → 系统服务 → 桌面
|
||||
|
||||
Linux 启动过程：
|
||||
BIOS → GRUB → vmlinuz (内核) → systemd → 系统服务 → 桌面环境
|
||||
```
|
||||
|
||||
#### 第四步：显示桌面
|
||||
|
||||
最后，操作系统启动**图形界面（GUI）**，显示桌面：
|
||||
|
||||
- **Windows**：explorer.exe（资源管理器）显示桌面
|
||||
- **Linux**：GNOME、KDE、XFCE 等桌面环境
|
||||
- **macOS**：Finder 显示桌面
|
||||
|
||||
```
|
||||
桌面出现的过程：
|
||||
┌─────────────────────────────────────┐
|
||||
│ 1. 显卡驱动加载 │
|
||||
│ 2. 显示服务器启动 │
|
||||
│ (Windows: Desktop Window Manager)│
|
||||
│ (Linux: X Server / Wayland) │
|
||||
│ 3. 桌面环境启动 │
|
||||
│ 4. 显示桌面背景和图标 │
|
||||
└─────────────────────────────────────┘
|
||||
```
|
||||
|
||||
<DesktopDemo />
|
||||
|
||||
---
|
||||
|
||||
## 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 />
|
||||
|
||||
---
|
||||
|
||||
## 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. 合成 → 多层合并显示 │
|
||||
└─────────────────────────────────────────────────────────┘
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 6. 完整流程回顾
|
||||
|
||||
让我们把整个过程串起来：
|
||||
|
||||
<FullProcessDemo />
|
||||
|
||||
```
|
||||
从按下电源到访问网站的完整流程：
|
||||
|
||||
┌──────────────────────────────────────────────────────────────────┐
|
||||
│ 1. 按下电源 │
|
||||
│ └── 电源启动 → 主板唤醒 → CPU 复位 → 执行 BIOS/UEFI │
|
||||
├──────────────────────────────────────────────────────────────────┤
|
||||
│ 2. BIOS/UEFI 启动 │
|
||||
│ └── 硬件自检 → 寻找启动设备 → 读取引导程序 │
|
||||
├──────────────────────────────────────────────────────────────────┤
|
||||
│ 3. 操作系统启动 │
|
||||
│ └── 引导程序 → 加载内核 → 启动服务 → 显示桌面 │
|
||||
├──────────────────────────────────────────────────────────────────┤
|
||||
│ 4. 打开浏览器 │
|
||||
│ └── 双击图标 → 创建进程 → 加载程序 → 显示窗口 │
|
||||
├──────────────────────────────────────────────────────────────────┤
|
||||
│ 5. 访问 URL │
|
||||
│ └── URL 解析 → DNS 解析 → TCP 连接 → HTTP 请求 │
|
||||
│ → 服务器处理 → HTTP 响应 → 浏览器渲染 → 显示网页 │
|
||||
└──────────────────────────────────────────────────────────────────┘
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 7. 知识地图
|
||||
|
||||
这一章涉及的知识领域：
|
||||
|
||||
```
|
||||
计算机系统概览
|
||||
├── 硬件基础
|
||||
│ ├── 电源 (PSU)
|
||||
│ ├── 主板芯片组
|
||||
│ └── CPU
|
||||
├── BIOS/UEFI
|
||||
│ ├── POST 自检
|
||||
│ ├── 启动顺序
|
||||
│ └── 引导程序
|
||||
├── 操作系统
|
||||
│ ├── 内核 (Kernel)
|
||||
│ ├── 系统服务
|
||||
│ └── 桌面环境
|
||||
├── 应用程序
|
||||
│ ├── 进程管理
|
||||
│ └── 程序加载
|
||||
└── 网络通信
|
||||
├── DNS 解析
|
||||
├── TCP/IP 协议
|
||||
├── HTTP 协议
|
||||
└── 浏览器渲染
|
||||
```
|
||||
|
||||
::: tip 继续学习
|
||||
如果你想深入了解某个环节，可以继续学习：
|
||||
|
||||
- **从晶体管到 CPU**：了解计算机硬件基础
|
||||
- **操作系统（进程/内存/文件系统）**：深入理解操作系统
|
||||
- **计算机网络**：深入理解网络协议
|
||||
:::
|
||||
Reference in New Issue
Block a user