一個再日常不過的動作，背後是一整套精密接力

你敲下 google.com、按下 Enter，畫面「唰」地出現——這中間，其實有一長串裝置在毫秒之間輪流交棒

你以為只按了一個鍵，其實你發動了一場接力賽

在網址列打 google.com、按 Enter，然後畫面就出現了。這大概是你一天做過最不假思索的動作之一。但如果把時間放慢，你會發現這短短一瞬間，其實是好幾種角色在快速交棒：

你的瀏覽器先翻自己的抽屜找有沒有記過這個網站的地址；找不到，就去問DNS 系統「google.com 到底住在哪個 IP」；拿到地址後，瀏覽器跟伺服器先握個手確認彼此都在線；握手成功才正式開口要網頁；伺服器把 HTML、CSS、JS 一股腦丟回來；瀏覽器再把這堆檔案讀懂、拼成一棵樹、跑完程式、一格一格畫到螢幕上。

💡

這一章的骨架：整整 8 步

ByteByteGo 把這個過程拆成 8 個步驟，從「你打字」一路到「網頁出現」。這 8 步就是我們這堂課的主線——第二個模組會用一個可以按「下一步」的動畫，讓你親眼看著資料在瀏覽器、DNS、伺服器之間跑完全程。

先別急著看動畫。要看懂那趟旅程，得先認得幾個沿途會遇到的名詞。這個模組就先把它們一次講清楚。

直接讀原文：ByteByteGo 怎麼描述這 8 步

下面左邊是 ByteByteGo 的英文原文（逐字取自來源），右邊是白話導讀。原文本身就是條列式的步驟，我們把最關鍵的幾步並排給你對照。

原文 · ByteByteGo First up, you type the website address in the browser’s address bar. The browser checks its cache first. If there’s a cache miss, it must find the IP address. DNS lookup begins (think of it as looking up a phone number). The request goes through different DNS servers (root, TLD, and authoritative). Finally, the IP address is retrieved. Next, your browser initiates a TCP connection like a handshake. For example, in the case of HTTP 1.1, the client and server perform a TCP three-way handshake with SYN, SYN-ACK, and ACK messages. Once the handshake is successful, the browser makes an HTTP request to the server and the server responds with HTML, CSS, and JS files. The browser executes the JavaScript and renders the page through various steps (tokenizer, parser, render tree, layout, and painting).

白話翻譯

第一步：你在瀏覽器的網址列打上網站位址。

瀏覽器先翻自己的快取。如果快取沒有（cache miss），它就得去把 IP 位址找出來。

於是 DNS 查詢開始（把它想成查電話簿）。請求會經過好幾種 DNS 伺服器（root、TLD、authoritative），最後拿到 IP 位址。

接著瀏覽器發起一個像握手的 TCP 連線。以 HTTP 1.1 為例，client 和 server 會用 SYN、SYN-ACK、ACK 三則訊息完成 TCP 三向交握。

握手成功後，瀏覽器向伺服器發出 HTTP 請求，伺服器回傳 HTML、CSS、JS 檔案。

瀏覽器執行 JavaScript，並透過一連串步驟把頁面渲染出來（tokenizer、parser、render tree、layout、painting）。

🔆

原文自己也留了一個開放題

原文結尾問了讀者一句：「你還會往這個流程裡加上哪一步？」——換句話說，這 8 步是主幹，真實世界還有更多細節（例如 TLS 加密握手、CDN、快取層）。我們這堂課忠實跟著原文的 8 步走，把每一步講到你能講給別人聽。

先認名詞：DNS、三向交握、DOM 與 CSSOM

這幾個詞會在下一站的動畫裡不斷出現。把游標移到有底線的詞上（或點一下），就能看到解釋。

📖

DNS 查詢

DNS 就像網路世界的電話簿。你只記得住「google.com」這種名字，但電腦之間真正用來找路的是 IP 位址（一串數字）。DNS 就負責把名字換成 IP。原文說這個查詢會經過 root → TLD → authoritative 三層伺服器，一層層問下去，最後拿到 IP。

🤝

TCP 三向交握

TCP 三向交握是傳資料前的「確認彼此都在線」儀式。以 HTTP 1.1 為例，client 先送 SYN（我想連你），server 回 SYN-ACK（收到，我也想連你），client 再回 ACK（好，成交）。三則訊息來回一趟，連線就建立好了。

🌲

DOM 與 CSSOM

瀏覽器拿到 HTML 後，會把它解析成一棵 DOM 樹（描述頁面有哪些內容）；把 CSS 解析成一棵 CSSOM 樹（描述每樣東西該長什麼樣）。兩棵樹合起來，瀏覽器才知道「什麼內容、要用什麼樣子畫」。

📞

為什麼要先握手才傳資料？

想像你打電話：對方接起來說「喂？」、你回「喂我聽得到」、對方說「好我也聽得到」——確認雙方都聽得見，才開始講正事。TCP 三向交握就是這個「喂—喂—好」的過程。省掉它直接開講，很可能對方根本還沒準備好接收。

跟著資料跑一趟：從按下 Enter 到畫面出現的 8 步

三個角色——瀏覽器、DNS、伺服器——在毫秒之間輪流交棒。按「下一步」，親眼看資料怎麼在它們之間移動

三個角色，一趟接力

ByteByteGo 的原文把整件事拆成 8 步。這 8 步其實就發生在三個角色之間：

瀏覽器（browser）：發動整件事的人。查快取、發問、握手、要網頁、最後把畫面畫出來，都是它。
DNS 系統：網路的電話簿。瀏覽器不知道 google.com 的 IP 時，就來問它。
伺服器（server）：google.com 真正住的地方。握手、回傳 HTML/CSS/JS 的就是它。

下面的動畫按「下一步」逐步推進。留意那顆會移動的小點——它代表資料在角色之間傳遞。哪個角色亮起來，就是這一步輪到誰在忙。

招牌互動：完整走完這 8 步

從你打字，到畫面出現，一步都不少。按「下一步」開始。

🖥️

瀏覽器 browser

📖

DNS 系統

🗄️

伺服器 server

按「下一步」開始這趟旅程

💡

注意順序：先問路、再敲門

整趟旅程有個關鍵先後：瀏覽器一定要先拿到 IP（跟 DNS 問路），才知道該去哪台伺服器敲門（TCP 握手）。地址都還不知道，當然沒辦法連線。這就是為什麼 DNS 查詢（第 3 步）排在 TCP 握手（第 4 步）前面。

把最容易搞混的兩步拆開看

8 步裡，最多人卡住的是「DNS 為什麼要問三層」和「渲染到底在做什麼」。分開講清楚。

📖

DNS 的三層：root → TLD → authoritative

原文說請求會經過這三種伺服器。可以想成問路一層比一層具體：先問 root（管全世界的總機，它會說「.com 的事去找 TLD」）；再問 TLD（管所有 .com 網域的伺服器，它會說「google.com 的事去找它的 authoritative」）；最後問 authoritative（google.com 自己的權威伺服器，它才真正握有那個 IP）。一層層問下去，最後 IP 位址就到手了。

🎨

渲染的五個小步：tokenizer → parser → render tree → layout → painting

原文列出瀏覽器渲染頁面會經過這幾步。白話講：tokenizer 把原始碼切成一個個小記號；parser 把記號組成有結構的樹；接著把 DOM 與 CSSOM 合併成 render tree（只留下真正要顯示的東西＋它的樣式）；layout 算出每個元素該擺在畫面的哪個座標、多大；最後 painting 才真正把像素畫上去。做完，第 8 步的「畫面出現」才成立。

⚠️

別把 cache miss 想成「壞掉了」

第 2 步的 cache miss 不是錯誤，只是「這次快取裡剛好沒有」。如果是 cache hit（快取命中），瀏覽器就能跳過整段 DNS 查詢，直接用記著的 IP——這也是為什麼你第二次開同一個網站往往快很多。

小試身手

這趟 8 步旅程你都跟上了。來三題確認一下：

為什麼 DNS 查詢一定要排在 TCP 三向交握之前？

TCP 三向交握（以 HTTP 1.1 為例）用的是哪三則訊息？

瀏覽器建立 DOM 與 CSSOM 兩棵樹，是在哪個階段發生的？

🎯

收束：一句話記住整章

輸入 google.com 之後，是一場「查地址 → 敲門握手 → 要檔案 → 拼畫面」的毫秒接力：快取 miss → DNS 拿 IP → TCP 握手 → HTTP 拿 HTML/CSS/JS → 建 DOM/CSSOM → 跑 JS 渲染 → 畫面出現。原文最後還反問你：這條流程你還會補上哪一步？（TLS 加密、CDN、快取回寫都是好答案。）