從按下電源到訪問網站發生了什麼

前言

你有沒有想過，當你按下電腦電源鍵，到最終在瀏覽器中看到網頁，這中間到底發生了什麼？

這個過程就像一場接力賽——硬體通電後喚醒韌體，韌體檢查完畢後交棒給作業系統，作業系統準備好環境後才能執行瀏覽器，瀏覽器再透過網路去遠方的伺服器取回網頁。每一個環節都依賴上一個環節的成功完成。

你會學到什麼？

硬體啟動（第 1 節）→ 電流如何喚醒 CPU
韌體自我測試（第 2 節）→ BIOS/UEFI 如何確認硬體正常
作業系統啟動（第 3 節）→ 核心如何載入、桌面如何出現
瀏覽器啟動（第 4 節）→ 應用程式如何被作業系統啟動
網路請求（第 5 節）→ 從輸入 URL 到頁面渲染的完整網路之旅

1. 按下電源：硬體的覺醒

1.1 電源啟動

當你按下電源鍵，電源供應器（PSU） 開始工作，把交流電（220V）轉換成直流電（12V、5V、3.3V 等），為各個硬體部件供電。

1.2 主機板晶片組喚醒

電源穩定後，主機板晶片組開始工作，它就像電腦的「總調度員」。

1.3 CPU 重置

CPU 接收到重置訊號後，把內部所有暫存器和快取清零，從一個預設的位址開始執行指令。這個位址通常指向 BIOS/UEFI 晶片。

Hardware Startup Chain

🔌

Power supply

AC power → DC power

🧩

Motherboard chipset

Coordinates hardware components

⚙️

CPU reset

Clear registers and become ready

📟

BIOS/UEFI

Run the first instruction

接力第一棒完成 硬體層面的工作已經完成：電源把交流電轉成了穩定的直流電，主機板晶片組被喚醒並開始協調各部件，CPU 也完成了重置。

2. BIOS/UEFI：硬體的自我測試

BIOS/UEFI Workflow

📟

BIOS/UEFI

Click start to explore
the firmware boot flow

Intro

POST

Init

Boot

📟

What are BIOS and UEFI?

BIOS is the first program that runs after power-on and lives in a read-only chip on the motherboard. UEFI is the modern, safer successor to BIOS.

1💾BIOS (traditional)▸

2✨UEFI (modern)▸

💡BIOS/UEFI is like the computer gatekeeper: it wakes up first, checks that everything is healthy, and decides who, the operating system, can enter.

接力第二棒完成 BIOS/UEFI 完成了它的三項使命：透過 POST 自我測試確認硬體全部正常；初始化各硬體的工作模式；按照啟動順序找到了硬碟上的啟動磁區。

3. 作業系統啟動：從核心到桌面

Operating System Boot Flow

🖥️

Operating System

Manages hardware and software resources
the computer steward

🪟Windows

🍎macOS

🐧Linux

🤖Android

📱iOS

Intro

Bootloader

Kernel

Services

Desktop

🖥️

What is an operating system?

An operating system is the software layer that manages hardware and software resources.

1🏢Resource management▸

2🎮Provide interfaces▸

3🔒Security protection▸

💡The OS is like building management: it supplies utilities, assigns rooms, manages storage, and keeps security so residents, the applications, can live safely.

📊Common Operating Systems

SystemFeaturesTypical devices

🪟 WindowsRich ecosystem and broad compatibilityDesktops and laptops

🍎 macOSApple ecosystem, smooth and stableMac computers

🐧 LinuxOpen source and server-friendlyServers and embedded devices

🤖 AndroidMobile Linux platformPhones and tablets

📱 iOSApple mobile platformiPhone and iPad

接力第三棒完成 作業系統已經完全啟動，桌面呈現在你眼前。

4. 打開瀏覽器：應用程式的啟動

4.1 應用程式的啟動過程

當你雙擊瀏覽器圖示時，作業系統會：

尋找可執行檔案：根據檔案關聯，找到瀏覽器的可執行檔
建立程序：為瀏覽器建立一個新的程序
載入程式：把瀏覽器的程式碼從硬碟載入到記憶體
初始化：啟動瀏覽器的主執行緒、渲染引擎、網路引擎等

4.2 瀏覽器的主要組成部分

模組	功能
使用者介面	網址列、分頁、書籤等
瀏覽器引擎	協調 UI 和渲染引擎
渲染引擎	解析 HTML/CSS，顯示網頁
JavaScript 引擎	執行 JavaScript 程式碼
網路模組	傳送 HTTP 請求
資料儲存	Cookie、LocalStorage 等

Browser Architecture -- Click a Module for Details

🎨User interface

🔗Browser engine

📄Rendering engine

⚡JavaScript engine

🌐Network module

💾Data storage

5. 訪問 URL：網路請求的全過程

5.1 什麼是 URL？

URL（Uniform Resource Locator） 是資源的位址。

5.2 訪問 URL 的完整過程

Full URL Access Flow

Browser

1URL parsing→

2DNS lookup→

3TCP three-way handshake→

4TLS handshake→

5Send HTTP request→

6Server processing←

7Return HTTP response←

8Browser rendering←

Server

第一步：URL 解析

第二步：DNS 解析

電腦透過網路訪問伺服器，但網路用的是 IP 位址，而不是網域名稱。所以需要把網域名稱轉換成 IP 位址。

第三步：建立 TCP 連線

TCP 三次交握：

客戶端 → 伺服器	訊息
→	SYN（同步請求）
←	SYN-ACK（確認並同步）
→	ACK（確認）

第四步：傳送 HTTP 請求

常見的 HTTP 方法：

方法	含義	用途
GET	獲取資源	瀏覽網頁
POST	提交資料	登入、提交表單
PUT	上傳資源	檔案上傳
DELETE	刪除資源	刪除資料

第五步：伺服器處理請求

第六步：返回 HTTP 回應

常見的狀態碼：

狀態碼	含義
200	成功
301/302	重新導向
404	資源未找到
500	伺服器錯誤

第七步：瀏覽器渲染頁面

Browser Rendering Pipeline

HTML parsing

Parse HTML text into the DOM tree, the document object model

↓

CSS parsing

Parse CSS rules into stylesheets and compute final styles for each element

↓

Build render tree

DOM tree + style rules = render tree containing visible elements

↓

Layout calculation

Compute the exact position and size of each element on the page

↓

Paint

Draw text, colors, images, borders, and other pixels into buffers

↓

Composite and display

Combine layers into the final frame and send it to the screen through the GPU

解析 HTML：建構 DOM 樹
解析 CSS：計算樣式，建構渲染樹
執行 JavaScript：執行頁面中的 JS 程式碼
繪製頁面：把內容顯示到螢幕上

6. 完整流程回顧

From Pressing Power to Seeing a Web Page -- Full Chain

🔌Hardware startup

Power → motherboard → CPU → BIOS

🔍Firmware self-test

POST → initialize → find boot disk

💻System boot

Bootloader → kernel → services → desktop

🌐Browser startup

Create process → load code → ready

📡Network request and rendering

DNS → TCP → HTTP → render

從按下電源到訪問網站的完整流程：

┌──────────────────────────────────────────────────────────────────┐
│  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 協定
    └── 瀏覽器渲染

繼續學習

從電晶體到 CPU：了解電腦硬體基礎
作業系統（程序/記憶體/檔案系統）：深入理解作業系統
電腦網路：深入理解網路協定

從按下電源到訪問網站發生了什麼 ​

1. 按下電源：硬體的覺醒 ​

1.1 電源啟動 ​

1.2 主機板晶片組喚醒 ​

1.3 CPU 重置 ​

2. BIOS/UEFI：硬體的自我測試 ​

3. 作業系統啟動：從核心到桌面 ​

4. 打開瀏覽器：應用程式的啟動 ​

4.1 應用程式的啟動過程 ​

4.2 瀏覽器的主要組成部分 ​

5. 訪問 URL：網路請求的全過程 ​

5.1 什麼是 URL？ ​

5.2 訪問 URL 的完整過程 ​

第一步：URL 解析 ​

第二步：DNS 解析 ​

第三步：建立 TCP 連線 ​

第四步：傳送 HTTP 請求 ​

第五步：伺服器處理請求 ​

第六步：返回 HTTP 回應 ​

第七步：瀏覽器渲染頁面 ​

6. 完整流程回顧 ​

7. 知識地圖 ​