Learning AI

Tiếng Việt

English

Tiếng Việt

English

Appearance

Từ nhấn nút nguồn đến truy cập website ​

Mở đầu

Bạn có nghĩ, khi nhấn nút nguồn, đến khi thấy trang web trên browser, ở giữa xảy ra gì?

Quá trình như cuộc đua tiếp sức — hardware có điện đánh thức firmware, firmware check xong giao gậy cho OS, OS chuẩn bị env xong mới run browser, browser qua network lấy trang từ server xa. Mỗi mắt xích phụ thuộc thành công của mắt trước, mắt nào tuột là sau không chạy được.

Hiểu chuỗi này = hiểu tổng thể computer system, là must cho fullstack engineer.

Bạn sẽ học:

Theo thứ tự xảy ra thực tế, đi qua 5 stage:

  1. Hardware boot → điện đánh thức CPU thế nào
  2. Firmware self-test → BIOS/UEFI check hardware + tìm boot device
  3. OS boot → kernel load, desktop xuất hiện
  4. Browser launch → app được OS run thế nào
  5. Network request → từ gõ URL đến render page

Mỗi step build trên step trước, không thiếu được.

1. Nhấn nguồn: hardware tỉnh dậy ​

1.1 Power on ​

Nhấn nguồn, PSU (Power Supply Unit) chuyển AC (220V) → DC (12V, 5V, 3.3V), cấp cho hardware.

Power button → PSU → DC output → Mainboard

1.2 Chipset awake ​

Power ổn định, mainboard chipset start, làm "tổng điều phối" phối hợp hardware.

1.3 CPU reset ​

CPU nhận reset signal, clear register + cache, start execute từ 1 address preset. Address này thường trỏ về BIOS/UEFI chip.

硬件启动链路
🔌
电源 PSU
交流电 → 直流电
🧩
主板芯片组
协调各硬件部件
⚙️
CPU 复位
清零寄存器，就绪
📟
BIOS/UEFI
执行第一条指令

Gậy 1 hoàn thành ⛳ Hardware level done: PSU convert AC→DC ổn định, chipset awake, CPU reset xong, sẵn sàng execute instruction đầu tiên.

Nhưng giờ CPU như "em bé mới mở mắt". Execute instruction được, nhưng không biết env: máy có bao nhiêu RAM? GPU work không? HDD đâu? Boot OS từ device nào? CPU tự không trả lời được.

Vì vậy instruction đầu tiên sau reset là jump tới 1 address cố định — chỉ về BIOS/UEFI firmware. Control từ pure hardware giao cho firmware. Nhiệm vụ BIOS/UEFI: check mọi hardware OK, tìm OS, khởi động OS. Đây là gậy 2.

2. BIOS/UEFI: hardware self-test ​

BIOS/UEFI 工作流程
📟
BIOS/UEFI
点击开始了解
固件启动流程
介绍
POST
初始化
启动
📟
什么是 BIOS/UEFI？
BIOS 是电脑启动后第一个运行的程序，存储在主板的只读芯片中。UEFI 是 BIOS 的升级版，更安全、更现代。
1💾BIOS（传统）▸
2✨UEFI（现代）▸
💡BIOS/UEFI 就像是电脑的"守门人"——它第一个醒来，检查一切是否正常，然后决定让谁（操作系统）进来。

Gậy 2 hoàn thành ⛳ BIOS/UEFI làm xong 3 sứ mệnh: POST self-test (RAM, GPU, keyboard OK), init hardware mode, theo boot order tìm boot sector.

Nhưng BIOS/UEFI dừng ở đây — nó là "bác sĩ + dispatcher". Check hardware, quyết boot từ device nào, nhưng không quản file, không run app, không hiện desktop. Cần software mạnh hơn — OS.

Giao thế nào: BIOS/UEFI đọc bootloader code từ boot sector của disk, load vào memory, CPU jump tới đó execute. Control từ firmware → OS bootloader. Bootloader load kernel, start system services, cuối hiện desktop quen thuộc. Gậy phức tạp nhất bắt đầu.

3. OS boot: từ kernel đến desktop ​

操作系统启动流程
🖥️
操作系统
管理硬件和软件资源
计算机的"大管家"
🪟Windows
🍎macOS
🐧Linux
🤖Android
📱iOS
介绍
引导程序
内核加载
服务启动
桌面就绪
🖥️
什么是操作系统？
操作系统（OS）是管理计算机硬件和软件资源的程序集合，就像一个"大管家"。
1🏢资源管理▸
2🎮提供接口▸
3🔒安全保护▸
💡操作系统就像一座大楼的物业管理——负责水电供应（硬件资源）、分配房间（内存）、管理仓库（文件系统）、维护安全（权限控制），让住户（应用程序）可以安心生活。
📊常见操作系统
系统特点典型设备
🪟 Windows生态丰富，兼容性好桌面电脑、笔记本
🍎 macOS苹果生态，流畅稳定Mac 电脑
🐧 Linux开源免费，服务器首选服务器、嵌入式
🤖 Android移动端 Linux手机、平板
📱 iOS苹果移动端iPhone、iPad

Gậy 3 hoàn thành ⛳ OS startup xong, desktop hiện ra. Recap: bootloader load kernel, kernel take CPU+memory, system services start (network, audio, security...), cuối cùng GUI render desktop.

OS giờ như toà nhà đã thông nước-điện, BQL vào: process management chia phòng cho program, memory management chia space, file system quản kho, network stack giao tiếp ngoài. Là infrastructure cho mọi app.

Bạn double-click browser icon. OS phải: tìm executable, tạo process, allocate memory, load code... Đây là khả năng "process management" của OS.

4. Mở browser: app khởi động ​

4.1 Quá trình launch app ​

Double-click browser icon, OS:

  1. Tìm executable: theo file association, tìm .exe (Windows) hoặc exec
  2. Tạo process: tạo process mới cho browser
  3. Load program: load code browser từ disk vào memory
  4. Init: start main thread, render engine, network engine
Browser startup:
1. Double-click icon
2. OS tìm browser executable
3. Tạo browser process
4. Load code vào memory
5. Init modules (render, network, JS)
6. Hiện browser window

4.2 Component chính của browser ​

Browser hiện đại = "OS phức tạp":

ModuleFunction
UIAddress bar, tabs, bookmarks
Browser enginePhối UI + render
Render engineParse HTML/CSS, hiện page
JavaScript engineExecute JS
Network moduleHTTP request
UI backendVẽ UI basic
Data storageCookie, LocalStorage
浏览器架构 ── 点击模块查看详情
🎨用户界面
🔗浏览器引擎
📄渲染引擎
⚡JavaScript 引擎
🌐网络模块
💾数据存储

Gậy 4 hoàn thành ⛳ Browser startup OK. OS tạo process riêng, allocate memory, các module browser init xong: render engine sẵn sàng parse HTML/CSS, JS engine sẵn sàng execute script, network module sẵn sàng gửi/nhận data.

Tưởng browser như xe đã nổ máy — engine chạy, dashboard sáng, GPS sẵn, nhưng xe đứng yên vì tài (bạn) chưa bảo "đi đâu". Window trống, cursor nhấp nháy ở address bar.

Gõ https://www.example.com enter — cuộc hành trình xuyên Internet bắt đầu. Network module browser take over: parse URL, DNS translate domain → IP, TCP connect server xa, TLS handshake encrypt channel, send HTTP request, đợi response, render engine vẽ HTML/CSS/JS thành page. Gậy có nhiều step + protocol nhất.

5. Truy cập URL: network request full ​

5.1 URL là gì? ​

URL (Uniform Resource Locator) = address của resource trên Internet.

URL structure:
https://  │  www.example.com  │  /path/to/page  │ ?query=1
protocol  │      domain       │      path       │   query
  • Protocol: http, https, ftp
  • Domain: address server
  • Path: vị trí resource
  • Query: param thêm

5.2 Quá trình full ​

Khi truy cập https://www.example.com:

URL 访问全流程
浏览器
1URL 解析→
2DNS 解析→
3TCP 三次握手→
4TLS 握手→
5发送 HTTP 请求→
6服务器处理←
7返回 HTTP 响应←
8浏览器渲染←
服务器

Step 1: URL parsing ​

Browser parse URL, extract protocol/domain/path.

Step 2: DNS resolution ​

Network dùng IP (vd 93.184.216.34), không phải domain. Cần convert domain → IP qua DNS.

DNS flow:
Browser cache → hosts file → local DNS cache → DNS server

Thực tế:
1. Browser check cache
2. OS check DNS cache
3. Send query tới DNS server
4. DNS server trả IP

Step 3: TCP connect ​

Có IP, browser establish TCP connection với server.

TCP 3-way handshake:
Client → Server: SYN
Server → Client: SYN-ACK
Client → Server: ACK
→ Connection established!

Nếu HTTPS, thêm TLS/SSL handshake để encrypt.

Step 4: Send HTTP request ​

HTTP request format:
GET /index.html HTTP/1.1
Host: www.example.com
User-Agent: Mozilla/5.0...
Accept: text/html
(empty line)
MethodNghĩaUse
GETLấy resourceXem page
POSTSubmit dataLogin, form
PUTUploadUpload file
DELETEDeleteXoá data

Step 5: Server xử request ​

Server (thường Web server như Nginx, Apache) nhận request:

  1. Parse request
  2. Process business: gọi backend (Python, Node.js, Java)
  3. Query DB: lấy data
  4. Generate response: assemble HTML, JSON
Server flow:
1. Web server nhận request (Nginx/Apache)
2. Theo path tìm handler
3. Execute backend code (API, business)
4. Query DB nếu cần
5. Assemble response (HTML/JSON/CSS/JS)
6. Return HTTP response

Step 6: HTTP response ​

HTTP response format:
HTTP/1.1 200 OK
Content-Type: text/html
Content-Length: 1234

<!DOCTYPE html>
<html>...</html>
CodeNghĩa
200Success
301/302Redirect
404Not found
500Server error

Step 7: Browser render ​

浏览器渲染管线
1
HTML 解析
将 HTML 文本解析为 DOM 树（文档对象模型）
↓
2
CSS 解析
将 CSS 规则解析为样式表，计算每个元素的最终样式
↓
3
构建渲染树
DOM 树 + 样式规则 = 渲染树（只包含可见元素）
↓
4
布局计算
计算每个元素在页面上的精确位置和大小
↓
5
绘制
将元素的文字、颜色、图片、边框等绘制到像素缓冲区
↓
6
合成显示
将多个图层合成为最终画面，由 GPU 输出到屏幕
  1. Parse HTML → DOM tree
  2. Parse CSS → style rules → render tree
  3. Execute JS
  4. Paint → pixel trên màn hình
Browser render:
1. HTML parse → DOM tree
2. CSS parse → style rules
3. DOM + CSS → render tree
4. Layout → kích thước + vị trí mỗi element
5. Paint → pixel ra màn hình
6. Composite → multi-layer merge

Gậy cuối hoàn thành ⛳ Page hiện trên màn hình! Recap: browser parse URL, DNS lấy IP, TCP 3-way handshake establish connection, TLS handshake encrypt, send HTTP request, server xử business + query DB + assemble response, render engine parse HTML → DOM, CSS → style rules, merge thành render tree, layout, paint pixel.

Zoom out toàn cuộc đua: từ nhấn nguồn → điện đánh thức hardware (gậy 1) → firmware check + tìm boot disk (gậy 2) → OS boot từ kernel đến desktop (gậy 3) → browser được OS run (gậy 4) → network request xuyên Internet lấy data + render page (gậy 5). 5 gậy nối nhau, mỗi gậy build trên gậy trước.

6. Recap full flow ​

从按下电源到看到网页 ── 完整链路
🔌硬件启动
电源 → 主板 → CPU → BIOS
🔍固件自检
POST → 初始化 → 找启动盘
💻系统启动
引导 → 内核 → 服务 → 桌面
🌐浏览器启动
创建进程 → 加载代码 → 就绪
📡网络请求与渲染
DNS → TCP → HTTP → 渲染
Từ nhấn nguồn đến truy cập website:

1. Power on
   └── PSU start → Chipset awake → CPU reset → Execute BIOS/UEFI

2. BIOS/UEFI boot
   └── Hardware self-test → Find boot device → Read bootloader

3. OS boot
   └── Bootloader → Load kernel → Start services → Show desktop

4. Open browser
   └── Double-click icon → Create process → Load program → Show window

5. Access URL
   └── URL parse → DNS → TCP → HTTP request
       → Server process → HTTP response → Browser render → Show page

Mỗi stage giải vấn đề hoàn toàn khác, technology domain khác. Gậy 1 = electronic engineering (power, circuit, signal); gậy 2 = firmware programming (low-level control hardware); gậy 3 = OS (process scheduling, memory, file system); gậy 4 = app dev; gậy 5 = network + frontend (DNS, TCP/IP, HTTP, HTML/CSS/JS).

Vì sao "fullstack engineer" cần kiến thức rộng: mỗi dòng FE code đều qua cả chuỗi này tới user. Hiểu mỗi mắt xích = định vị nhanh — vấn đề ở network? server? browser render?

7. Knowledge map ​

Computer system overview
├── Hardware
│   ├── PSU
│   ├── Chipset
│   └── CPU
├── BIOS/UEFI
│   ├── POST self-test
│   ├── Boot order
│   └── Bootloader
├── OS
│   ├── Kernel
│   ├── System services
│   └── Desktop env
├── App
│   ├── Process management
│   └── Program loading
└── Network
    ├── DNS
    ├── TCP/IP
    ├── HTTP
    └── Browser rendering

2026 context

  • Secure boot + UEFI: Windows 11 require, chống bootkit
  • Apple Silicon boot: Apple riêng iBoot, không phải UEFI
  • Cloud VM boot: cloud-init thay 1 phần OS boot
  • WebAssembly + Web Workers: browser ngày càng OS-like
  • HTTP/3 + QUIC: thay TCP cho web hiện đại
  • VN dev: hiểu full chain giúp debug "page không load" — đâu trong 5 gậy?

Tiếp theo