# 从按下电源到访问网站发生了什么

::: 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**：了解计算机硬件基础
- **操作系统（进程/内存/文件系统）**：深入理解操作系统
- **计算机网络**：深入理解网络协议
:::