从按下电源到访问网站发生了什么
前言
你有没有想过，当你按下电脑电源键，到最终在浏览器中看到网页，这中间到底发生了什么？
这个过程就像一场接力赛——硬件通电后唤醒固件，固件检查完毕后交棒给操作系统，操作系统准备好环境后才能运行浏览器，浏览器再通过网络去远方的服务器取回网页。每一个环节都依赖上一个环节的成功完成，任何一棒掉链子，后面的步骤都无法进行。
理解这条完整的链路，能帮助你建立对计算机系统的整体认知，也是成为全栈工程师的必经之路。
你会学到什么？
这篇文章按照事件发生的真实顺序，带你走完从按下电源到看到网页的五个阶段：
- 硬件启动（第 1 节）→ 电流如何唤醒 CPU
- 固件自检（第 2 节）→ BIOS/UEFI 如何确认硬件正常并找到启动设备
- 操作系统启动（第 3 节）→ 内核如何加载、桌面如何出现
- 浏览器启动（第 4 节）→ 应用程序如何被操作系统运行起来
- 网络请求（第 5 节）→ 从输入 URL 到页面渲染的完整网络之旅
每一步都建立在前一步的基础上，缺一不可。
1. 按下电源：硬件的觉醒
1.1 电源启动
当你按下电源键，电源单元（PSU） 开始工作，把交流电（220V）转换成直流电（12V、5V、3.3V 等），为各个硬件部件供电。
电源按钮 → 电源单元(PSU) → 直流电输出 → 供给主板各部件1.2 主板芯片组唤醒
电源稳定后，主板芯片组开始工作，它就像电脑的"总调度员"，负责协调各个硬件部件。
1.3 CPU 复位
CPU 接收到复位信号后，把内部所有寄存器和缓存清零，从一个预设的地址开始执行指令。这个地址通常指向 BIOS/UEFI 芯片。
接力第一棒完成 ⛳ 到这里，硬件层面的工作已经完成：电源把交流电转成了稳定的直流电，主板芯片组被唤醒并开始协调各部件，CPU 也完成了复位、清空了寄存器，准备好执行第一条指令。
但请注意——此刻的 CPU 就像一个"刚睁开眼的婴儿"。它虽然能执行指令，却对自己所在的环境一无所知：电脑里装了多少内存？显卡能不能用？硬盘在哪里？该从哪个设备启动操作系统？这些问题 CPU 自己回答不了。
所以，CPU 复位后执行的第一条指令，就是跳转到一个固定的内存地址——这个地址指向主板上焊死的 BIOS/UEFI 固件芯片。从这一刻起，控制权从纯硬件交到了固件手中。BIOS/UEFI 的任务很明确：检查所有硬件是否正常，然后找到操作系统并把它启动起来。这就是接力赛的第二棒。
2. BIOS/UEFI：硬件的自检
固件启动流程
接力第二棒完成 ⛳ BIOS/UEFI 圆满完成了它的三项使命：通过 POST 自检确认内存、显卡、键盘等硬件全部工作正常；初始化各硬件的工作模式；按照启动顺序找到了硬盘上的启动扇区。
但 BIOS/UEFI 的角色到此为止——它本质上是一个"体检医生 + 调度员"。它能检查硬件健不健康、能决定从哪个设备启动，但它不会管理你的文件，不会运行你的应用程序，也不会给你显示一个漂亮的桌面。这些复杂的任务，需要一个更强大的软件来接管——那就是操作系统。
交接的方式很具体：BIOS/UEFI 读取硬盘第一个扇区（启动扇区）里的引导程序代码，把它加载到内存中，然后让 CPU 跳转到这段代码开始执行。从这一刻起，控制权正式从固件交给了操作系统的引导程序。引导程序会一步步把操作系统内核加载进来，启动系统服务，最终呈现出你熟悉的桌面。这条链路中最复杂的一棒，开始了。
3. 操作系统启动：从内核到桌面
计算机的"大管家"
接力第三棒完成 ⛳ 操作系统已经完全启动，桌面呈现在你眼前。回顾一下这一棒做了什么：引导程序从硬盘读取内核、内核接管了 CPU 和内存的控制权、系统服务逐个启动（网络、音频、安全中心……）、最后图形界面渲染出桌面。
此刻的操作系统就像一座已经通水通电、物业入驻的大楼——进程管理负责给每个住户（程序）分配房间，内存管理负责分配空间，文件系统负责管理仓库，网络协议栈负责对外通信。这些"公共服务"是所有应用程序运行的基础设施，没有它们，任何程序都无法启动。
现在你想上网，于是双击了桌面上的浏览器图标。这个简单的动作背后，操作系统要做一系列工作：查找浏览器的可执行文件在硬盘的哪个位置、为它创建一个独立的进程、分配内存空间、加载程序代码……这就是操作系统"进程管理"能力的直接体现。接下来，让我们看看浏览器是如何被启动起来的。
4. 打开浏览器：应用程序的启动
4.1 应用程序的启动过程
当你双击浏览器图标时，操作系统会：
- 查找可执行文件：根据文件关联，找到浏览器的
.exe（Windows）或可执行文件 - 创建进程：为浏览器创建一个新的进程
- 加载程序：把浏览器的代码从硬盘加载到内存
- 初始化：启动浏览器的主线程、渲染引擎、网络引擎等
浏览器启动过程：
┌─────────────────────────────────────┐
│ 1. 双击图标 │
│ 2. 操作系统查找浏览器可执行文件 │
│ 3. 创建浏览器进程 │
│ 4. 加载浏览器代码到内存 │
│ 5. 初始化各模块（渲染、网络、JS） │
│ 6. 显示浏览器窗口 │
└─────────────────────────────────────┘4.2 浏览器的主要组成部分
现代浏览器是一个复杂的"操作系统"，主要由以下部分组成：
| 模块 | 功能 |
|---|---|
| 用户界面 | 地址栏、标签页、书签等 |
| 浏览器引擎 | 协调 UI 和渲染引擎 |
| 渲染引擎 | 解析 HTML/CSS，显示网页 |
| JavaScript 引擎 | 执行 JavaScript 代码 |
| 网络模块 | 发送 HTTP 请求 |
| UI 后端 | 绘制基础 UI 组件 |
| 数据存储 | Cookie、LocalStorage 等 |
接力第四棒完成 ⛳ 浏览器已经成功启动。操作系统为它创建了独立的进程，分配了内存空间，浏览器自身的各个模块也已初始化完毕：渲染引擎准备好解析 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 时，发生了这些事情：
第一步：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）收到请求后：
- 解析请求：理解客户端想要什么
- 处理业务：调用后端程序（如 Python、Node.js、Java）
- 查询数据库：获取需要的数据
- 生成响应：把数据组装成 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 | 服务器错误 |
第七步：浏览器渲染页面
浏览器收到响应后，开始渲染页面：
- 解析 HTML：构建 DOM 树
- 解析 CSS：计算样式，构建渲染树
- 执行 JavaScript：执行页面中的 JS 代码
- 绘制页面：把内容显示到屏幕上
浏览器渲染过程：
┌─────────────────────────────────────────────────────────┐
│ 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. 完整流程回顾
让我们把整个过程串起来：
从按下电源到访问网站的完整流程：
┌──────────────────────────────────────────────────────────────────┐
│ 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 协议
└── 浏览器渲染继续学习
如果你想深入了解某个环节，可以继续学习：
- 从晶体管到 CPU：了解计算机硬件基础
- 操作系统（进程/内存/文件系统）：深入理解操作系统
- 计算机网络：深入理解网络协议