教程文档【免费下载链接】easy-vibe从 0 到 1 学会 vibe coding项目制学习项目地址https://gitcode.com/datawhalechina/easy-vibe点击查看免费下载本篇技术指南以 Datawhale Easy-Vibe 项目附录《从开机到访问网站》为核心骨架沿着真实事件发生的时序拆解按下电源键 → 网页出现在屏幕上之间每一棒交接硬件唤醒、固件自检、操作系统启动、浏览器进程创建、再到一次完整网络请求的七步旅程。读完本文你将获得一张贯穿电子工程、固件编程、操作系统、计算机网络与前端渲染的全局知识地图并能在浏览器报错如No bootable device、Connection refused、404、白屏时迅速判断接力棒停在了哪一环。一、为什么把这条链路比作五棒接力按下电源键、双击浏览器图标、输入网址回车——看上去只有三个动作背后却是一条环环相扣的因果链硬件唤醒第 1 节电流如何唤醒 CPU固件自检第 2 节BIOS/UEFI 如何确认硬件完好并找到启动设备操作系统启动第 3 节内核如何被装入内存、桌面如何出现浏览器启动第 4 节操作系统如何运行一个应用程序网络请求第 5 节从输入 URL 到页面渲染的完整网络旅程。每一棒都依赖前一棒的顺利完成硬件先把 CPU 唤醒操作系统才有机会启动操作系统准备好运行环境浏览器才能成为进程浏览器运行起来才谈得上访问网站。任何一棒掉棒后续步骤都无法继续。阅读本附录时不必死记新名词只需时刻追问两个问题这一步接过了什么它又为下一步准备了什么带着这个问题我们按下电源键。二、第一棒按下电源键硬件唤醒2.1 电源单元PSU开始工作当你按下电源键电源单元PSU率先启动把 220V 交流电转换为多路直流电12V、5V、3.3V 等为各硬件组件供电电源键 → 电源单元PSU→ 直流输出 → 为主板各组件供电不同部件需要不同电压且电压刚上升时可能不稳定。电源会等待各路电压进入允许范围再向主板发送一个常被称为Power Good的信号——供电确认达标后系统才进入下一环节。2.2 主板芯片组被唤醒供电稳定后主板芯片组开始工作。它相当于整台计算机的总调度负责协调 CPU、内存、硬盘、外设等各组件的协同运作。2.3 CPU 解除复位执行第一条指令在 Power Good 信号到来之前主板让 CPU 保持在复位状态Reset——复位不是关机而是把 CPU 内部的重要寄存器放回规定的初始值暂时不让它乱跑。供电确认、时钟信号稳定后主板才解除复位。复位完成后CPU 从规定好的入口开始取指。这个固定入口通常被称为复位向量Reset Vector它不是一整套操作系统只是 CPU 开机后必定访问的第一个地址该地址里的指令会把执行流程带到主板固件——也就是常说的BIOS/UEFI。固件保存在主板上的非易失性存储芯片中断电后代码依然存在否则电脑每次断电都会忘记自己该如何开机。电源稳定 → 时钟稳定 → CPU 解除复位 → 从复位向量取指 → 进入 BIOS/UEFI关键点开机的第一步不是加载桌面而是让 CPU 从一个确定的位置开始执行。此时 CPU 像一个刚睁开眼的婴儿——它能执行指令却不知道内存多大、显卡是否正常、硬盘在哪里、该从哪个设备引导系统。这些问题的答案要交给固件。Easy-Vibe 项目为这一阶段配套了交互式演示组件PowerOnDemo、BiosUefiInteractiveDemo它们位于主题组件目录 docs/.vitepress/theme/components/appendix/computer-fundamentals 下可在本地运行项目后于页面中直接查看。运行方式见 package.json执行npm install后运行npm run dev即vitepress dev docs。三、第二棒BIOS/UEFI 硬件自检UEFI 是电脑启动后最早运行的软件之一。CPU 刚进入 UEFI 时很多硬件还不能直接使用UEFI 会先做开机自检POSTPower-On Self-Test并初始化启动必需的部件内存控制器、键盘、系统盘控制器等。UEFI 的任务不是长期管理文件也不是帮你打开浏览器。它只完成三件事检查并初始化启动所需的关键硬件按保存的启动顺序查找可启动设备找到引导程序Bootloader——一个能继续启动电脑的程序。在常见的 UEFI 电脑上固件会读取保存好的启动项启动项指向系统盘上专门的EFI 系统分区其中存放以.efi形式存在的引导程序UEFI 保存的启动项 ↓ 指向哪块磁盘、哪个分区、哪个文件 EFI 系统分区 ↓ 引导程序 .efi 文件为什么 UEFI 不能直接运行操作系统因为操作系统很大——Windows、macOS 或 Linux 的内核都存放在硬盘里CPU 不能隔着硬盘直接执行它们必须先把需要的代码读到内存。把内核读入内存这件事正是引导程序的职责UEFI ↓ 找到启动项 引导程序 ↓ 把内核读入内存 操作系统内核诊断线索如果电脑显示No bootable device说明电脑已通电、CPU 和固件已运行但固件没有找到能继续启动的系统。此时应该检查硬盘和启动项而不是检查浏览器。关键点UEFI 像一个领路人它不负责启动完整的操作系统只负责找到引导程序并把接下来的工作交给它。第二棒结束时系统已经被找到却还躺在磁盘上。四、第三棒操作系统启动——从内核到桌面接过 UEFI 的工作后引导程序面对的是一个内核文件。要完成找到系统 → 看到桌面还需要三次交接UEFI → 引导程序 → 内核 → 系统服务与桌面4.1 引导程序把内核装入内存操作系统的核心代码内核映像保存在系统盘上它现在只是一个文件。CPU 取指令的位置是内存所以引导程序要完成四步工作在系统分区里找到内核映像把内核需要的代码和数据读入内存准备启动参数内存布局、硬件信息等把 CPU 的执行位置跳到内核入口。不同系统的引导程序不同如 Windows Boot Manager、Linux 常见的 GRUB名称不同交接思路相同。内核映像有时还是压缩的在 Linux 中引导程序会把内核与启动初期需要的文件一起放进内存这份临时文件集合常叫initramfs里面可能包含读取真正系统盘所需的驱动和工具。引导程序还会向内核交出一张现场清单哪些内存可用、启动参数是什么、固件提供了哪些信息——内核刚接手时没有时间重新猜测这些内容。这里必须分清两件事保存在磁盘上代码不会因为存在就自动运行装入内存并交给 CPU代码才真正开始执行。这个区别在后面启动浏览器时还会再出现一次。4.2 内核接管硬件内核启动后先建立操作系统最基本的运行环境。内核运行在 CPU 的高权限模式中普通应用不能直接修改页表、控制硬件或随意读取别的进程内存这些危险操作必须经过内核——这道权限边界正是操作系统隔离程序的基础。内核要管理的资源包括CPU现在该运行哪个程序内存每个程序可以使用哪一块空间硬盘文件放在哪里、怎样读取设备键盘、鼠标、显卡、网卡怎样使用如果没有操作系统每个应用都要自己学会控制几千种硬盘、显卡和网卡——这显然不现实。操作系统把复杂的硬件包装成一套统一服务浏览器只需说帮我读取这个文件帮我发送这些数据帮我画一个窗口而不用亲自控制硬件电路。内核启动可按下述顺序理解建立内存管理 ↓ 启动进程调度器 ↓ 加载关键设备驱动 ↓ 挂载文件系统 ↓ 启动第一个用户空间进程这些工作之间存在依赖关系先管理内存后面的驱动和进程才知道怎样申请、怎样隔离再建立中断和调度键盘输入、磁盘完成读取等事件才能通知 CPU多个程序才能轮流运行再加载驱动内核才能统一控制具体型号的硬件再挂载文件系统系统才看得到磁盘上的目录和程序文件。所谓中断Interrupt可以理解成硬件发给 CPU 的有事情完成了通知。没有它CPU 只能不断询问硬盘读完了吗有了它CPU 可以先做别的事等硬盘完成后再回来处理。为什么驱动要在桌面之前启动屏幕、键盘、硬盘和网卡都是设备内核需要通过驱动与它们通信。例如系统没识别出系统盘就无法继续读取系统文件没有显卡驱动就无法正常绘制桌面。桌面不是操作系统启动的第一步而是前面这些能力准备好后的结果。4.3 从内核到桌面内核本身不会画出桌面。它会先启动一个不属于内核的普通系统程序——第一个用户空间进程再由这个程序继续启动登录与用户会话、网络服务、图形界面、文件管理、后台服务等。等图形界面启动完成你才会看到桌面。图形界面本身也是一组程序窗口管理器/合成器决定窗口的位置、层级和最终画面登录程序确认用户身份后台服务负责网络、声音、时间同步等。它们都在使用内核已经提供的进程、文件和设备能力。内核提供底层管理能力 ↓ 系统服务准备登录、网络、声音等功能 ↓ 桌面程序显示窗口、图标和任务栏此时可以确定内核已运行、内存/进程/设备可被管理、文件系统可读取程序文件、用户程序具备启动条件。但浏览器仍然没有运行——桌面上的浏览器图标只是一个启动入口。五、第四棒打开浏览器——应用程序的启动5.1 操作系统先找到程序文件磁盘里虽然已经有浏览器的程序文件但文件只是静静地躺在那里。点击图标后桌面程序把启动这个应用的请求交给操作系统操作系统根据图标记录的路径找到可执行文件。程序文件不只有 CPU 指令它还记录了哪些部分是代码、哪些部分是初始数据、从哪个入口开始执行、运行时需要哪些动态库。操作系统读取这些信息才知道怎样启动它。这种文件有固定格式Windows 常见的是PELinux 常见的是ELFmacOS 常见的是Mach-O。格式不同但文件头都会告诉加载器代码在哪一段、数据在哪一段、入口地址在哪里。操作系统还会检查文件是否存在、当前用户有无执行权限、文件格式是否适合当前 CPU——检查失败时进程甚至不会被创建。5.2 操作系统创建浏览器进程接下来内核为这次运行创建一个进程。进程可以理解成操作系统为这一次运行建立的档案和工作区同一个浏览器打开两次得到两个不同进程它们共用同一份程序文件却拥有各自的运行状态。一个进程至少会得到一个进程编号 PID类似这次运行的学号一套独立的虚拟地址空间即它眼中的内存地图打开的文件、权限等运行状态至少一个可被 CPU 调度的线程即实际向前执行的工作线。内核用一份数据结构记录这些信息通常叫进程控制块PCB可以理解成内核里的进程档案——调度器要找进程、暂停进程或恢复进程时都会查看这份档案。5.3 虚拟内存与按需分页把程序加载进内存真实系统通常不会一次性复制整个浏览器。虚拟内存不是额外安装的内存条而是一套地址翻译机制浏览器使用自己的虚拟地址CPU 和内核通过页表把它翻译成物理内存地址。不同进程即使都使用地址0x1000也可以落到完全不同的物理位置因此互不干扰。进程内的常见区域各有用途浏览器进程的虚拟内存 ┌──────────────────┐ │ 栈函数调用、局部变量 │ ├──────────────────┤ │ 空闲空间 │ ├──────────────────┤ │ 堆运行时动态分配 │ ├──────────────────┤ │ 动态库 │ ├──────────────────┤ │ 代码与只读数据 │ └──────────────────┘代码区存放 CPU 要执行的指令通常不允许程序随意修改动态库区放浏览器和系统共同使用的功能例如图形、网络和字体库堆程序运行时按需申请的空间如新建一个标签页对象栈保存函数调用过程、参数和局部变量每个线程通常有自己的栈。操作系统先建立程序文件的哪部分对应哪段虚拟内存的映射关系等程序真的访问某一页而它尚不在物理内存时CPU 触发缺页异常内核再把那一页从磁盘读进来——这个机制叫按需分页。动态库也在此刻参与进来加载器找到浏览器依赖的库动态链接器把浏览器调用的函数名连接到库中真正的代码地址缺少关键动态库时程序可能在窗口出现之前就启动失败。更准确的过程是建立虚拟内存映射 → 访问某一页 → 缺页 → 从磁盘读入物理内存 → 继续执行5.4 主线程得到 CPU浏览器开始运行内存准备好后内核创建浏览器的主线程把它的第一条指令位置设为程序入口。线程不是创建后就一直占着 CPU它先进入可运行状态再由内核调度器选择合适的时间片把 CPU 交给它。可运行程序很多时调度器让它们轮流使用 CPU——切换时先保存当前线程的寄存器和执行位置再恢复下一个线程先前保存的状态这个过程叫上下文切换。正因为切换速度很快即使 CPU 核心数少于线程数我们仍会感觉浏览器、音乐和聊天软件在同时工作。现代浏览器通常还会继续创建多个进程典型的职责划分如下进程或服务主要工作浏览器主进程管理窗口、标签页、地址栏和用户操作网络服务处理 DNS、连接和 HTTP 请求渲染进程解析网页代码并生成画面GPU 进程把需要的图层交给显卡合成不同浏览器的划分会有差异但不会把所有工作都塞在一个地方。多进程会多占一些内存但也换来了隔离某个网页的渲染进程崩溃时浏览器主窗口和其他标签页不一定跟着退出网页代码也更难直接碰到浏览器主进程掌握的敏感资源。回顾打开浏览器的完整动作找到浏览器的程序文件创建进程和虚拟地址空间映射代码、数据和动态库创建主线程并交给调度器CPU 开始执行浏览器代码浏览器再启动网络、渲染等组件。关键点浏览器窗口能打开只证明浏览器进程已运行并不能证明网络一定正常——断网时浏览器依然可以打开设置页面或本地文件。可以用一句话区分两个概念程序像一份放在硬盘里的菜谱进程像正在按照菜谱做菜、已经占用锅灶和食材的厨师。六、第五棒访问链接——一次完整的网络请求前四棒只保证浏览器能运行并没有联系任何服务器。你在地址栏输入网址并按下回车后浏览器要依次走过七步。6.1 第一步解析 URLURLUniform Resource Locator统一资源定位符是资源的地址如同现实生活中的门牌号。地址栏属于浏览器主进程它先判断输入的是搜索词还是 URL确认后拆解信息https:// www.example.com /path/to/page ?query1 协议 域名 路径 查询参数各部分回答不同的问题协议Protocol用什么规则通信http、https、ftp 等域名Domain要找哪台电脑端口Port要找这台电脑里的哪个程序路径Path要向这个程序索取哪份资源查询参数Query随请求发给服务器的附加参数搜索词、页码、筛选条件等。如果 URL 没写端口浏览器会使用协议默认值HTTP 通常是80HTTPS 通常是443——不写端口不等于没有端口。在 Easy-Vibe 本地开发中观察 URL当你在本地运行本项目npm run dev时地址栏出现的是形如http://127.0.0.1:5173/easy-vibe/zh-cn/appendix/...的地址。这里的127.0.0.1指向的不是远方服务器而是你正在使用的这台电脑它的常见别名是localhost5173是 Vite/VitePress 本地开发服务器监听的端口。端口可以理解成一栋大楼里的房间号电脑地址告诉你是哪栋楼端口告诉你要敲哪扇门。此时数据没有跑到公网浏览器直接去找本机 5173 端口上的程序——如果页面提示Connection refused很可能是本地开发服务器没启动或端口写错了。6.2 第二步DNS 解析域名网络通信需要 IP 地址如93.184.216.34而不是域名把域名转换成 IP 地址的过程叫DNS 解析。DNS 可以理解成互联网的地址查询服务给它www.example.com它返回对应的 IP。浏览器并不一定每次都去远方重新查询而是按由近到远的顺序寻找答案浏览器缓存 ↓ 没有 操作系统 DNS 缓存 / hosts 文件 ↓ 没有 递归 DNS 解析器家庭路由器、运营商或公共 DNS递归解析器若也没有缓存会沿着域名从右往左逐级询问根 DNS谁负责 .com ↓ 返回 .com 顶级域 DNS 的地址 .com DNS谁负责 example.com ↓ 返回 example.com 权威 DNS 的地址 权威 DNSwww.example.com 是什么地址 ↓ 返回 A / AAAA 记录 递归解析器把结果交还给浏览器A 记录通常保存 IPv4 地址AAAA 记录通常保存 IPv6 地址有些域名先返回CNAME表示它是另一个域名的别名还需继续查询DNS 答案带有TTL告诉缓存这份答案能保存多久——这就是域名记录修改后有些人立刻生效、有些人还看到旧地址的原因。关键点DNS 只负责把名字变成地址不负责传输网页也不决定网页路径是否存在。这解释了用 IP 可以访问、换成域名却访问不了的常见现象——两次访问最大的区别就是 DNS应优先检查域名解析。6.3 第三步建立连接TCP 三次握手 TLS在常见的 HTTP/1.1 和 HTTP/2 中浏览器先建立TCP 连接。TCP 是传输层协议负责确认双方都能收发数据并保证数据的顺序与重传。浏览器会让操作系统创建一个socket——可以把它理解成一次网络通信在操作系统里的接口记录本机地址与端口、服务器地址与端口以及连接状态。第一次建立 TCP 连接的常见过程是三次握手浏览器所在电脑 服务器 ──── SYN ───────────────→ 我想建立连接 ←── SYN ACK ────────── 收到我也准备好了 ──── ACK ───────────────→ 我收到你的确认了为什么不只发一次因为双方都要确认两件事自己发得出去也收得到对方的数据。传输过程中 TCP 会给数据编号接收方通过确认号告诉发送方我已经收到哪里某段数据迟迟未获确认时发送方会重传即使网络包到达顺序被打乱接收方也能按编号重新排好。如果使用HTTPS还要再进行一次TLS 握手。TLS 主要解决两个问题眼前这台服务器真的是我要找的网站吗怎样让中间经过的网络设备看不懂通信内容握手中服务器发来数字证书浏览器检查证书中的域名、有效期和签发机构来判断公钥是否可信随后双方通过密钥交换算出本次连接使用的会话密钥。这里同时用了两类密码方法身份验证与密钥交换阶段借助公钥密码确保在联系正确的服务器后续传输阶段使用速度更快的对称加密保护大量 HTTP 数据。如果证书域名不匹配、已过期或签发链不可信浏览器会显示证书警告——这个错误发生在 HTTP 请求之前安全通道都没建成自然没有机会取得网页。现实情况会更灵活浏览器可能复用之前建立的连接HTTP/3 使用的是基于 UDP 的 QUIC 而非 TCP。现在先记住目的即可浏览器需要一条能把 HTTP 数据送到服务器的通道。6.4 第四步发送 HTTP 请求连接解决的是数据怎样可靠、安全地到达对方HTTP 解决的是浏览器想要什么、服务器返回什么——它们不是同一层工作。连接建立后浏览器发送类似这样的内容GET /index.html HTTP/1.1 Host: www.example.com User-Agent: Mozilla/5.0... Accept: text/html 空行请求可以拆成三块请求行方法是GET后面是路径和 HTTP 版本、请求头主机、可接收格式、语言、缓存与身份凭证等信息、请求体GET 通常没有提交表单或上传数据时POST 等请求可携带。常见的 HTTP 方法方法含义用途GET获取资源浏览网页POST提交数据登录、提交表单PUT上传资源文件上传DELETE删除资源数据删除6.5 第五步服务器处理请求数据到达服务器的网卡后操作系统根据端口把它交给正在监听的服务器程序。服务器通常是 Nginx、Apache 等 Web 服务器根据方法、主机和路径决定如何处理解析请求理解客户端想要什么处理业务调用后端程序Python、Node.js、Java 等查询数据库获取所需数据生成响应把数据组装成 HTML、JSON 等格式。服务器处理流程 ┌─────────────────────────────────────────────────────────┐ │ 1. Web 服务器接收请求Nginx/Apache │ │ 2. 按路径找到合适的处理器 │ │ 3. 执行后端代码API、业务逻辑 │ │ 4. 必要时查询数据库、取回数据 │ │ 5. 组装响应HTML/JSON/CSS/JS │ │ 6. 返回 HTTP 响应 │ └─────────────────────────────────────────────────────────┘用 Easy-Vibe 仓库验证Web 服务器这一环仓库根目录的 nginx.conf 展示了本项目生产部署时 Nginx 的配置——监听 7860 端口、root /usr/share/nginx/html指向静态站点、try_files $uri $uri.html $uri/ /index.html完成静态文件与 SPA 回退路由。这正是一次GET 请求到达服务器后服务器按路径查找文件并返回的真实落地server { listen 7860; server_name localhost; root /usr/share/nginx/html; index index.html; gzip on; gzip_types text/plain text/css application/json application/javascript text/xml ...; location / { try_files $uri $uri.html $uri/ /index.html; } location /assets/ { expires 1y; add_header Cache-Control public, immutable; } }注意配置里的gzip on服务器会压缩响应体浏览器根据响应头解压后再交给下一阶段。这正对应文章后面要讲的响应头决定浏览器如何处理内容。6.6 第六步返回 HTTP 响应服务器返回的HTTP 响应包含状态码、响应头和响应体HTTP/1.1 200 OK Content-Type: text/html Content-Length: 1234 !DOCTYPE html html.../html响应同样拆成三块状态行告诉浏览器请求是否成功、响应头内容类型、长度、压缩方式、缓存规则等、响应体真正的 HTML、图片、JSON 或其他数据。Content-Type很重要浏览器看到text/html才把响应体当作 HTML 解析看到image/png按 PNG 图片解码看到application/json则当作 JSON 数据而不是网页。常见的状态码状态码含义200成功301/302重定向资源换了地址404资源不存在服务器收到了请求但找不到该路径500服务器内部错误为什么 404 也是好线索看到 404 时很多人第一反应是网络坏了但服务器能返回 404恰恰说明很多步骤已经成功域名大概率已解析、浏览器已连上某台服务器、HTTP 请求已送达、服务器还成功返回了一份响应。问题更可能出在路径或服务器路由。错误信息不只告诉你哪里失败了也在告诉你前面哪些步骤已经成功了。用 Easy-Vibe 仓库验证响应头这一环仓库根目录的 vercel.json 为部署在 Vercel 上的站点配置了完整的响应头策略——静态资源Cache-Control: public, max-age31536000, immutable一年强缓存、图片资源max-age604800一周缓存 stale-while-revalidate、以及X-Content-Type-Options: nosniff、X-Frame-Options: DENY、X-XSS-Protection、Referrer-Policy、Permissions-Policy等安全响应头。这些正是浏览器读取响应头后决定如何缓存、如何处理内容的真实示例。6.7 第七步浏览器渲染页面服务器传回来的不是截图而是文本和二进制数据。浏览器先拿到 HTML渲染进程解析 HTML 时发现其中引用的 CSS、JavaScript、图片和字体再请网络服务继续请求这些资源HTML 到达渲染进程 ├─ 发现 CSS ──────────→ 网络服务继续请求 ├─ 发现 JavaScript ────→ 网络服务继续请求 ├─ 发现图片 ──────────→ 网络服务继续请求 └─ 继续解析后面的 HTML所以网页不是下载一个文件后打开而是浏览器边解析、边发现资源、边继续请求。不同资源影响不同CSS 影响样式关键 CSS 未就绪前渲染结果不可靠普通 JavaScript 可能修改页面结构遇到没有defer/async的脚本时 HTML 解析会暂停图片和字体可与解析并行加载接口数据常由 JS 在页面运行后继续请求。资源来自其他网站时还要受浏览器同源策略和CORS规则的限制——这就是为什么地址栏直接打开某个接口可以网页里的 JavaScript 请求它却可能被浏览器拦住。HTML 和资源到齐后渲染进程把它们变成屏幕上的像素典型顺序是HTML → DOM ┐ ├→ 计算样式 → 布局 → 绘制 → 分层合成 → 屏幕像素 CSS → CSSOM┘ JavaScript 可以在途中修改 DOM 和样式解析 HTML → DOMHTML 解析器从上到下读取标签建立对象树DOM记录页面结构解析 CSS → CSSOM读取选择器和规则再处理继承、默认样式与优先级得到每个元素最终使用的计算样式DOM 样式 → 可渲染结构display: none等元素不会出现在画面中浏览器只保留真正参与显示的对象布局Layout计算每个盒子的宽、高和坐标JavaScript 修改尺寸后可能触发重新布局reflow绘制Paint把结果转换成绘制指令清单先画背景、再画边框、最后画文字分层与合成Composite浏览器可能把页面拆成多个图层滚动区域、动画、变换元素合成线程与 GPU 把图层拼成最终画面送到屏幕。JavaScript 大多也在渲染进程的主线程上执行。如果一段脚本长时间占用主线程布局和绘制只能等待页面表现为卡顿——浏览器通常要在大约 16.7 毫秒内完成一帧才有机会达到每秒 60 帧的流畅效果。这也解释了为什么主 HTML 返回 200 OK 页面仍可能白屏HTTP 成功只代表入口文档到了后面的资源加载、JS 执行或渲染仍可能失败如 JS 运行时错误、关键脚本 404、API 未返回数据、CSS 意外隐藏内容。排查时打开浏览器开发者工具Network看哪些请求成功/失败Console看 JS 有没有报错Elements看页面元素有没有生成。七、完整过程回顾一张流程图把五棒连起来就是从按下电源到网页出现的完整链路按下电源 ↓ CPU 从规定位置开始执行复位向量 → 固件 ↓ UEFI 自检硬件、找到引导程序 ↓ 引导程序把内核从系统盘装入内存 ↓ CPU 跳到内核入口内核管理内存、调度、驱动、文件系统 ↓ 系统服务与桌面启动 ↓ 点击浏览器图标操作系统找到程序文件、创建进程 ↓ 映射代码、动态库、堆和栈创建主线程调度器把 CPU 交给它 ↓ 浏览器启动主进程、网络服务和渲染进程 ↓ 浏览器主进程解析 URL ↓ 网络服务进行 DNS 查询 ↓ 通过操作系统网络栈建立 TCP / TLS 通道 ↓ 发送 HTTP 请求服务器返回 HTML ↓ 继续请求 CSS / JavaScript / 图片 / 字体 ↓ 渲染进程建立 DOM、计算样式与布局 ↓ 绘制并合成屏幕像素 → 网页出现这条链路不是十五个互不相干的故障点而是一场接力。只要后面的现象已经出现就说明前面的步骤已经完成——比如浏览器能显示 404就不该再从电源和 DNS 开始猜请求已经到达服务器只是服务器找不到这个路径。八、知识地图与延伸学习纵观整条链路会发现一个有趣规律每一棒解决的问题完全不同涉及的技术领域也完全不同——接力棒技术领域核心问题第一棒硬件唤醒电子工程电源转换、电路设计、信号传输第二棒固件自检固件编程用底层代码直接控制硬件第三棒操作系统启动操作系统进程调度、内存管理、文件系统第四棒浏览器启动应用开发如何设计浏览器这样的复杂软件架构第五棒网络请求计算机网络 前端DNS/TCP/IP/HTTP 协议、HTML/CSS/JS 解析渲染这正解释了为什么Full Stack 工程师需要宽广的知识底座你写的每一行前端代码最终都要穿过这条完整链路才能到达用户。理解每一环才能在上线后快速定位问题——是网络层是服务器还是浏览器渲染对应知识地图如下计算机系统全景 ├── 硬件基础 │ ├── 电源单元PSU │ ├── 主板芯片组 │ └── CPU ├── BIOS/UEFI │ ├── POST 自检 │ ├── 启动顺序 │ └── 引导程序 ├── 操作系统 │ ├── 内核 │ ├── 系统服务 │ └── 桌面环境 ├── 应用程序 │ ├── 进程管理 │ └── 程序加载 └── 网络通信 ├── DNS 解析 ├── TCP/IP 协议 ├── HTTP 协议 └── 浏览器渲染继续学习如果想深入某一环可以接着阅读本仓库附录中计算机基础系列的其他章节从晶体管到 CPU理解计算机硬件基础操作系统进程/内存/文件系统深入操作系统原理计算机网络深入网络协议端口与 localhost理解端口与本地开发服务器配套的交互式演示组件PowerOnDemo、BiosUefiInteractiveDemo、OSBootInteractiveDemo、BrowserArchitectureDemo、URLRequestDemo、RenderingDemo、FullProcessDemo可在本地运行项目后直观体验每一步。赞分享教程文档【免费下载链接】easy-vibe从 0 到 1 学会 vibe coding项目制学习项目地址https://gitcode.com/datawhalechina/easy-vibe点击查看免费下载相关推荐easy-vibe 计算机系统全景从按下电源到网页呈现在浏览器中的完整链路easy vibe 计算机系统全景从按下电源到网页呈现在浏览器中的完整链路 本篇技术指南以 Datawhale easy vibe 项目的计算机基础附录为核心教程文档从按下电源键到网页呈现计算机系统五段接力全链路解析easy-vibe 计算机基础篇从按下电源键到网页呈现计算机系统五段接力全链路解析easy vibe 计算机基础篇 导读 本文以 easy vibe 课程附录《Computer Sys教程文档人工智能Vibe Codingeasy-vibe 计算机系统全景指南从按下电源键到浏览器渲染网页的完整链路easy vibe 计算机系统全景指南从按下电源键到浏览器渲染网页的完整链路 ::: tip 导读 本文以 easy vibe 课程附录中的《从开机到上网》文教程文档人工智能Vibe Coding创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考