---
schemaVersion: 1
slug: levelup-20260621-17-browser-moba-rendering
ticketId: Lv-17
lang: zh-tw
title: 瀏覽器其實是一支五人隊（下）：一次畫面更新，就是一波 16 毫秒的團戰
summary: 認完瀏覽器這支五人隊，這篇看他們怎麼打團戰：從一坨 HTML 字串到你眼睛看到的畫面，是一套 DOM → 排版 → 上色 → 合成的連招，而且每秒要打 60 次、每次只有 16 毫秒。看懂這套連招，你就會懂為什麼有的動畫滑順、有的卻一直卡——以及為什麼滑頁面明明很順，背景的 JS 卻在當。
originalDate: 2026-06-21
translatedDate: 2026-06-21
source: Addy Osmani
sourceUrl: https://x.com/addyosmani/status/2068394292796871019
author: null
authorshipNote: null
canonicalUrl: https://gu-log.vercel.app/posts/levelup-20260621-17-browser-moba-rendering
status: published
replacementTicketId: null
replacementUrl: null
---
# 瀏覽器其實是一支五人隊（下）：一次畫面更新，就是一波 16 毫秒的團戰
> **來源:** [Addy Osmani](https://x.com/addyosmani/status/2068394292796871019)
上集認完了瀏覽器這支五人隊——隊長、打野、守線英雄、輸出核心、工具人。每個分頁派一個守線英雄，被網站隔離跟沙箱關得死死的，所以一個分頁崩了不會帶走全家。
這集講他們**怎麼打一場團戰**。
因為「把畫面顯示出來」這件事，不是一次就結束——只要滑頁面、有動畫、有東西在動，這支隊伍就得**一秒鐘重打 60 次團戰**。而且每一波，他們只有大約 **16 毫秒**可以打完整套連招。打完了，畫面順順的；打不完，就是那個卡卡的、一格一格的「掉幀」。
這 16 毫秒怎麼來的？很簡單的算術：螢幕一秒要更新 60 次（60 幀），1000 毫秒 ÷ 60 ≈ **16.7 毫秒一幀**。在這個時間視窗內，這支隊伍要從一坨 HTML 字串，一路打到螢幕上的像素。
（還沒讀上集的話，先去認人：[瀏覽器其實是一支五人隊（上）](https://gu-log.vercel.app/posts/levelup-20260621-16-browser-moba-multiprocess/)。這篇預設讀者已經知道守線英雄是誰。）
---
## 🏰 第 0 層：全景圖 — 一套連招，每秒打 60 次
**Level 0 / 5 — 瀏覽器這支五人隊（下） — 0% 完成**
守線英雄要把畫面打出來，這套連招的順序是固定的，一步接一步：
```mermaid
graph LR
A[HTML 字串] --> B[解析成 DOM]
B --> C[算樣式
算出最終長相]
C --> D[排版
算位置大小]
D --> E[上色
產生畫圖指令]
E --> F[分圖層 + 點陣化]
F --> G[合成
交給 GPU]
G --> H[螢幕上的畫面]
```
_瀏覽器的繪製流程：DOM → 樣式 → 排版 → 上色 → 合成_
關鍵在於：這套連招的**前半段**（解析、樣式、排版、上色）是守線英雄**自己一個人**（主執行緒）扛的，而**後半段**（合成）有副手（合成執行緒）跟輸出核心幫忙。這個分工是整篇的重點——它決定了為什麼有些畫面更新很順、有些卻會卡。
> **把繪製想成一套連招**
>
> 一波團戰的傷害不是一個按鍵就打完，是一套有順序的連招：
>
> 1. **看場面**（解析 HTML → DOM）：先搞清楚場上有什麼
> 2. **算數值**（樣式計算）：每個東西的屬性是什麼（顏色、字體、大小）
> 3. **站位**（排版）：每個東西站在哪、多大
> 4. **比動作**（上色）：照順序產生「在這裡畫這個」的指令
> 5. **收頭**（合成）：把所有圖層疊起來，交給輸出核心打到螢幕
>
> 少一步、或某一步卡住，整套連招就接不起來。而時間只有 16 毫秒。
> **Mogu 真心話：**
>
> 很多人以為「瀏覽器把網頁畫出來」是一個動作，按一下就好。其實它是一套**每秒重複 60 次**的連招。
>
> 你現在滑這篇文章，每往下滑一點，這套連招就在背景跑一遍。你覺得很順，是因為這支隊伍每次都在 16 毫秒內打完。哪天你滑某個網頁覺得「怎麼卡卡的」，不是你手機爛，是那支隊伍有人拖到後腿、連招接不完——下面會抓出兇手是誰 (¬‿¬)
---
## 🏰 第 1 層：連招前搖 — 守線英雄一個人扛的活
**Level 1 / 5 — 瀏覽器這支五人隊（下） — 20% 完成**
連招的前半段，全部壓在守線英雄的**主執行緒**（`main thread`）這一個人身上。它要做三件事：
1. **解析 HTML → DOM**：把一串文字標籤變成一棵樹狀結構（DOM），代表頁面的骨架。這個解析是邊下載邊做的，HTML 還沒下載完就能先開始建。
2. **解析 CSS → `CSSOM`**：把樣式表變成另一棵樹，代表所有樣式規則。
3. **算最終樣式**：把 DOM 跟 `CSSOM` 合起來，算出「每個元素最後到底長什麼樣」（什麼顏色、多大、什麼字體）。
但這裡有個會打斷前搖的陷阱：**`