瀏覽器其實是一支五人隊(下):一次畫面更新,就是一波 16 毫秒的團戰
認完瀏覽器這支五人隊,這篇看他們怎麼打團戰:從一坨 HTML 字串到你眼睛看到的畫面,是一套 DOM → 排版 → 上色 → 合成的連招,而且每秒要打 60 次、每次只有 16 毫秒。看懂這套連招,你就會懂為什麼有的動畫滑順、有的卻一直卡——以及為什麼滑頁面明明很順,背景的 JS 卻在當。
互動式技術教學 — 用 RPG 爬塔風格學技術
共 17 篇
← 返回首頁認完瀏覽器這支五人隊,這篇看他們怎麼打團戰:從一坨 HTML 字串到你眼睛看到的畫面,是一套 DOM → 排版 → 上色 → 合成的連招,而且每秒要打 60 次、每次只有 16 毫秒。看懂這套連招,你就會懂為什麼有的動畫滑順、有的卻一直卡——以及為什麼滑頁面明明很順,背景的 JS 卻在當。
你以為瀏覽器是一個程式?其實它是一支分工的隊伍:一個隊長指揮全場、一個打野去網路刷資源、每個網站派一個英雄守自己那條線。這篇用一局 MOBA 的角度,講瀏覽器的多進程架構、網站隔離和沙箱——也就是為什麼某個分頁吃滿記憶體當掉,整個瀏覽器不會跟著陪葬。
當機驗屍三部曲完結篇。剩下那群「return 到 NULL」的命案,兇手是 GNU libunwind 藏了 18 年的競態條件——一個只有一條指令寬(約 100 皮秒)的完美作案窗。看兇器怎麼下手、用費米估算對帳發病率、以及為何這隻鬼躲了 18 年才現身。
當機驗屍三部曲第二課。進到命案現場(core dump),學會什麼是封鎖線(red zone)、第一個趕到現場的人(signal handler);然後把「法醫」升級成「流行病學家」——用全城族群資料,一舉破掉兩樁命案裡的第一樁:一口毒井(壞掉的主機)。
用「命案調查」的方式學程式怎麼當機。這是三部曲的第一課:先搞懂 CPU、stack、回程地址、segfault 是什麼——之後才驗屍、抓兇手。每層樓一個測驗,答對才能上樓。
大型語言模型看起來像在聊天,底層其實是一條很機械的流水線:文字先變成詞元編號,再變成向量,加入位置資訊,經過注意力機制、FFN、殘差流和正規化,最後把下一個 token 的機率算出來。這篇用 Level-Up 方式把 `Transformer` 架構 LLM 的核心零件拆開。
今天(2026-03-12)在管理 OpenClaw Gateway 時,用 SIGUSR1 做 config hot-reload。Doctor 健康監控偵測到 3 分鐘的不穩定發了 alert,但所有 running sessions 完全沒斷。如果用的是 `systemctl restart`(SIGTERM → SIGKILL),所有 session 都會被殺掉。這個差異就是今天要教的。
你每天打網址、按 Enter,但中間到底發生了什麼事?這篇用 gu-log 當案例,從 DNS 到 Service Worker,7 個 Floor 帶你走完一個 URL 的完整旅程。
Lv-09 接續 Lv-08,下半場專講 Recover Layer。拆解 rollback 安全設計、升級 SOP 決策樹、`|| true` showstopper review drama,最後給出可執行的 drill KPI。
這篇先拆『為什麼要 Health Suite』與『怎麼提早偵測』。從 36 小時 restart storm 事故,走到 healthcheck + watchdog 的診斷防線。
1,086 個 test 的背後哲學。為什麼 AI 時代 test 比 code review 更重要?怎麼用 test 當規格書?Tech Lead 的核心技能轉變。
拆解 OpenClaw 怎麼記住東西、怎麼學新技能、怎麼自動執行任務。從 Embedding 到 Cron Job,Python 人也能懂的 AI 記憶與自動化系統。
拆解 OpenClaw 怎麼接 Telegram、Discord 等多平台,以及 AI 怎麼執行指令、操作瀏覽器、管理安全。Python 人看得懂的 TypeScript 架構導覽。
從零開始理解 OpenClaw 架構。用 Python 人的視角,拆解 Gateway、WebSocket RPC、Session 管理、Auth 等核心概念。每層樓都有 Quiz!
你剛進一間公司,要把 3 個 FastAPI service 塞到同一個 domain。從 DNS 地基開始,一路往上蓋 Ingress、Istio、FastAPI、Swagger,每層一張手繪風圖,搭配 PTT 說故事風格帶你搞懂整棟架構。
用 RPG 爬塔風格學習如何設計開源 AI 協作系統。從 Owner Only 到 BYOK、PR-based 編輯、Trust System,一步步打造安全又開放的 AI 協作平台。
用 RPG 爬塔風格學 OAuth 2.0。從 API Key 出發,一路打到 GitHub OAuth + JWT。每層樓都有互動 Quiz,答對才能上樓!