feat(docs): update computer fundamentals content and demos
- Refactor frontend framework demo descriptions for clarity - Remove interactive features from triad and field map demos - Add new computer organization and DSL documentation links - Split type systems and compilers into separate pages - Enhance power-on-to-web article with relay race analogy - Add new interactive demos for type systems and compilation - Improve visual presentation of boot process and hardware flow - Introduce new Vibe Coding flow demo component
This commit is contained in:
sanbuphy
@@ -3,15 +3,22 @@
|
||||
::: tip 前言
|
||||
你有没有想过，当你按下电脑电源键，到最终在浏览器中看到网页，这中间到底发生了什么？
|
||||
|
||||
这个过程涉及**硬件启动**、**操作系统加载**、**网络通信**等多个环节。理解这个过程，能帮助你建立对计算机系统的整体认知，也是成为全栈工程师的必经之路。
|
||||
这个过程就像一场**接力赛**——硬件通电后唤醒固件，固件检查完毕后交棒给操作系统，操作系统准备好环境后才能运行浏览器，浏览器再通过网络去远方的服务器取回网页。每一个环节都**依赖上一个环节的成功完成**，任何一棒掉链子，后面的步骤都无法进行。
|
||||
|
||||
理解这条完整的链路，能帮助你建立对计算机系统的整体认知，也是成为全栈工程师的必经之路。
|
||||
:::
|
||||
|
||||
**你会学到什么？**
|
||||
|
||||
- 电脑从通电到显示桌面的完整过程
|
||||
- 操作系统是如何启动的
|
||||
- 浏览器是如何工作的
|
||||
- 当你访问一个 URL 时，网络请求是如何完成的
|
||||
这篇文章按照事件发生的真实顺序，带你走完从按下电源到看到网页的五个阶段：
|
||||
|
||||
1. **硬件启动**（第 1 节）→ 电流如何唤醒 CPU
|
||||
2. **固件自检**（第 2 节）→ BIOS/UEFI 如何确认硬件正常并找到启动设备
|
||||
3. **操作系统启动**（第 3 节）→ 内核如何加载、桌面如何出现
|
||||
4. **浏览器启动**（第 4 节）→ 应用程序如何被操作系统运行起来
|
||||
5. **网络请求**（第 5 节）→ 从输入 URL 到页面渲染的完整网络之旅
|
||||
|
||||
每一步都建立在前一步的基础上，缺一不可。
|
||||
|
||||
---
|
||||
|
||||
@@ -37,6 +44,12 @@ CPU 接收到复位信号后，把内部所有寄存器和缓存清零，从一
|
||||
|
||||
---
|
||||
|
||||
> **接力第一棒完成** ⛳ 到这里，硬件层面的工作已经完成：电源把交流电转成了稳定的直流电，主板芯片组被唤醒并开始协调各部件，CPU 也完成了复位、清空了寄存器，准备好执行第一条指令。
|
||||
>
|
||||
> 但请注意——此刻的 CPU 就像一个"刚睁开眼的婴儿"。它虽然能执行指令，却对自己所在的环境一无所知：电脑里装了多少内存？显卡能不能用？硬盘在哪里？该从哪个设备启动操作系统？这些问题 CPU 自己回答不了。
|
||||
>
|
||||
> 所以，CPU 复位后执行的第一条指令，就是跳转到一个**固定的内存地址**——这个地址指向主板上焊死的 BIOS/UEFI 固件芯片。从这一刻起，控制权从纯硬件交到了固件手中。BIOS/UEFI 的任务很明确：**检查所有硬件是否正常，然后找到操作系统并把它启动起来**。这就是接力赛的第二棒。
|
||||
|
||||
## 2. BIOS/UEFI：硬件的自检
|
||||
|
||||
### 2.1 什么是 BIOS/UEFI？
|
||||
@@ -83,6 +96,12 @@ BIOS/UEFI 会按照设定的**启动顺序**查找启动设备：
|
||||
|
||||
---
|
||||
|
||||
> **接力第二棒完成** ⛳ BIOS/UEFI 圆满完成了它的三项使命：通过 POST 自检确认内存、显卡、键盘等硬件全部工作正常；初始化各硬件的工作模式；按照启动顺序找到了硬盘上的启动扇区。
|
||||
>
|
||||
> 但 BIOS/UEFI 的角色到此为止——它本质上是一个"体检医生 + 调度员"。它能检查硬件健不健康、能决定从哪个设备启动，但它不会管理你的文件，不会运行你的应用程序，也不会给你显示一个漂亮的桌面。这些复杂的任务，需要一个更强大的软件来接管——那就是**操作系统**。
|
||||
>
|
||||
> 交接的方式很具体：BIOS/UEFI 读取硬盘第一个扇区（启动扇区）里的引导程序代码，把它加载到内存中，然后让 CPU 跳转到这段代码开始执行。从这一刻起，控制权正式从固件交给了操作系统的引导程序。引导程序会一步步把操作系统内核加载进来，启动系统服务，最终呈现出你熟悉的桌面。这条链路中最复杂的一棒，开始了。
|
||||
|
||||
## 3. 操作系统启动：从内核到桌面
|
||||
|
||||
### 3.1 什么是操作系统？
|
||||
@@ -176,6 +195,12 @@ BIOS → GRUB → vmlinuz (内核) → systemd → 系统服务 → 桌面环境
|
||||
|
||||
---
|
||||
|
||||
> **接力第三棒完成** ⛳ 操作系统已经完全启动，桌面呈现在你眼前。回顾一下这一棒做了什么：引导程序从硬盘读取内核、内核接管了 CPU 和内存的控制权、系统服务逐个启动（网络、音频、安全中心……）、最后图形界面渲染出桌面。
|
||||
>
|
||||
> 此刻的操作系统就像一座已经通水通电、物业入驻的大楼——**进程管理**负责给每个住户（程序）分配房间，**内存管理**负责分配空间，**文件系统**负责管理仓库，**网络协议栈**负责对外通信。这些"公共服务"是所有应用程序运行的基础设施，没有它们，任何程序都无法启动。
|
||||
>
|
||||
> 现在你想上网，于是双击了桌面上的浏览器图标。这个简单的动作背后，操作系统要做一系列工作：查找浏览器的可执行文件在硬盘的哪个位置、为它创建一个独立的进程、分配内存空间、加载程序代码……这就是操作系统"进程管理"能力的直接体现。接下来，让我们看看浏览器是如何被启动起来的。
|
||||
|
||||
## 4. 打开浏览器：应用程序的启动
|
||||
|
||||
### 4.1 应用程序的启动过程
|
||||
@@ -217,6 +242,12 @@ BIOS → GRUB → vmlinuz (内核) → systemd → 系统服务 → 桌面环境
|
||||
|
||||
---
|
||||
|
||||
> **接力第四棒完成** ⛳ 浏览器已经成功启动。操作系统为它创建了独立的进程，分配了内存空间，浏览器自身的各个模块也已初始化完毕：渲染引擎准备好解析 HTML/CSS，JavaScript 引擎准备好执行脚本，网络模块准备好发送和接收数据。
|
||||
>
|
||||
> 你可以把此刻的浏览器想象成一辆已经发动的汽车——引擎在运转、仪表盘亮起、导航系统就绪，但车还停在原地，因为司机（你）还没有告诉它"去哪里"。浏览器窗口此刻是空白的，地址栏闪烁着光标，等待你的输入。
|
||||
>
|
||||
> 当你在地址栏敲入 `https://www.example.com` 并按下回车，一场跨越整个互联网的旅程就开始了。浏览器的网络模块会接管这个请求：先解析 URL 的结构，再通过 DNS 把域名翻译成 IP 地址，然后跨越网络与远方的服务器建立 TCP 连接，协商加密通道，发送 HTTP 请求，等待服务器响应，最后把收到的 HTML/CSS/JS 代码交给渲染引擎绘制成你看到的网页。这是整条接力链中步骤最多、涉及协议最丰富的一棒——也是 Web 开发者最需要理解的一段。
|
||||
|
||||
## 5. 访问 URL：网络请求的全过程
|
||||
|
||||
### 5.1 什么是 URL？
|
||||
@@ -385,6 +416,12 @@ HTTP 响应格式：
|
||||
|
||||
---
|
||||
|
||||
> **接力最后一棒完成** ⛳ 网页终于显示在你眼前了！回顾这最后一棒经历了多少环节：浏览器解析 URL 提取出协议和域名，通过 DNS 层层查询把域名翻译成 IP 地址，经过 TCP 三次握手与服务器建立可靠连接，再通过 TLS 握手建立加密通道，然后发送 HTTP 请求，服务器处理业务逻辑、查询数据库、组装响应数据返回，最后浏览器的渲染引擎把 HTML 解析成 DOM 树、CSS 计算成样式规则、两者合并成渲染树、计算布局、逐像素绘制到屏幕上。
|
||||
>
|
||||
> 现在，让我们把视角拉远，从头到尾审视这场接力赛的全貌。从按下电源键的那一刻算起：电流唤醒硬件（第 1 棒）→ 固件检查设备并找到启动盘（第 2 棒）→ 操作系统从内核到桌面完整启动（第 3 棒）→ 浏览器作为应用程序被操作系统运行起来（第 4 棒）→ 网络请求跨越互联网取回数据并渲染成页面（第 5 棒）。五棒环环相扣，每一棒都建立在前一棒的成果之上，缺少任何一个环节，你都无法看到眼前的这个网页。
|
||||
>
|
||||
> 接下来，让我们用一张完整的流程图把这五个阶段串在一起，直观地看看它们之间的依赖关系。
|
||||
|
||||
## 6. 完整流程回顾
|
||||
|
||||
让我们把整个过程串起来：
|
||||
@@ -415,6 +452,12 @@ HTTP 响应格式：
|
||||
|
||||
---
|
||||
|
||||
> 看完整条链路，你会发现一个有趣的规律：每个阶段解决的问题完全不同，背后涉及的技术领域也截然不同。第 1 棒是**电子工程**的领域——电源转换、电路设计、信号传输；第 2 棒属于**固件编程**——用底层代码直接操控硬件；第 3 棒是**操作系统**的世界——进程调度、内存管理、文件系统，这是计算机科学的核心课题；第 4 棒涉及**应用开发**——如何设计一个像浏览器这样复杂的软件架构；第 5 棒则横跨**计算机网络**和**前端开发**——从 DNS、TCP/IP、HTTP 等网络协议，到 HTML/CSS/JS 的解析与渲染。
|
||||
>
|
||||
> 这也解释了为什么"全栈工程师"需要广泛的知识面：你写的每一行前端代码，最终都要经过这整条链路才能呈现给用户。理解链路中的每一环，能帮助你在遇到问题时快速定位——是网络层的问题？是服务器的问题？还是浏览器渲染的问题？
|
||||
>
|
||||
> 下面这张知识地图把这些技术领域梳理清楚，也为你后续的深入学习指明方向。
|
||||
|
||||
## 7. 知识地图
|
||||
|
||||
这一章涉及的知识领域：
|
||||
|
||||
Reference in New Issue
Block a user