How modern browsers work：現代瀏覽器如何把網頁變成畫面
Addy Osmani 的長文把瀏覽器拆成一條從網路、解析、排版、繪製、GPU 合成、JavaScript 引擎到安全隔離的流水線。這頁不是逐字翻譯，而是把文章整理成前端工程師可拿來診斷效能、理解瀏覽器行為的 onepage。
把瀏覽器想成多程序的 runtime，而不是單一渲染器
文章最有價值的地方，是把前端常見的零散名詞接成一個系統圖。使用者輸入網址後，Browser process 先協調 navigation、網路與安全檢查；Renderer process 負責 Blink 與 V8；GPU process 接收合成後的 frame；Network process 則把請求、快取、HTTP/2 或 HTTP/3 等細節集中處理。
這個模型可以解釋很多日常現象：為什麼一個分頁壞掉不一定拖垮整個瀏覽器、為什麼跨站 iframe 需要隔離、為什麼 JavaScript 長任務會卡住互動、也為什麼 transform 和 opacity 動畫通常比改 height 更順。
管控導覽與權限
它像瀏覽器的控制中心，負責網址列、分頁、導覽、權限提示，以及把高權限工作從網頁內容中隔開。
跑 DOM、CSS 與 JS
每個頁面或 site instance 會在受限的 renderer 中運行，裡面有 Blink、V8 與頁面主執行緒。
把昂貴工作拆出去
網路與圖形各有專門服務，讓請求、光柵化、合成與顯示輸出不必全部擠在單一程序裡。
一個頁面大致走過 8 個階段
URL、DNS、TLS、HTTP request
瀏覽器先判斷輸入是網址還是搜尋，再做安全檢查、DNS 解析、連線建立與 TLS 握手。HTTP/2 和 HTTP/3 讓多個資源可在較少連線上並行傳輸，降低早期網頁常見的連線瓶頸。
Speculative loading 與資源優先級
瀏覽器不只被動下載。Preload scanner 會在主 HTML parser 被 CSS 或同步 script 卡住時，提前找出圖片、CSS、script 等資源；Early Hints、preload、fetch priority 和 speculation rules 也都在影響誰先被抓。
HTML parser 建 DOM，CSS parser 建 CSSOM
HTML 解析是串流、容錯且可邊下載邊建立 DOM。CSS 會形成 CSSOM，再與 DOM 合併計算 computed style。同步 <script> 會暫停 parser，這就是 defer、async 與 module scripts 對載入效能很重要的原因。
Style resolution 與 layout 決定幾何位置
瀏覽器把可視節點轉成 layout tree，計算每個 box 的尺寸、位置、行高、字型測量與排版規則。改 DOM 或影響幾何的 CSS 會觸發後續重算，因此頻繁讀寫 layout 資訊容易造成 layout thrashing。
Paint records、layerize、raster、composite
Layout 完成後，瀏覽器不是馬上畫到螢幕，而是產生繪圖指令、拆 layer、把 layer 切成 tile 光柵化，再由 compositor 與 GPU 組成 frame。只改 transform 或 opacity 的動畫可避開主執行緒重排，通常更穩。
V8 從 bytecode 到多層 JIT
JavaScript 進入 V8 後，會經過 parsing、bytecode、Ignition interpreter，再依熱度進入 Sparkplug、Maglev 或 TurboFan。動態型別讓最佳化需要猜測；一旦假設失效，engine 會 deopt 回較保守的版本。
Module graph 與 import map
type="module" 不是舊式 script 的語法糖。瀏覽器會先抓取並解析 dependency graph，再按照相依順序執行；dynamic import 讓程式可按需載入，import maps 則讓瀏覽器懂 bare specifier。
Site isolation 與 sandboxing
現代瀏覽器把不同 site 放進不同 renderer，並把 renderer 權限降到很低。這讓攻擊者即使突破網頁內容層，也還要跨過 sandbox；代價是更多程序與一些 IPC 成本。
這些內部細節，最後會回到工程判斷
知道流程不是為了背名詞，而是為了把效能問題定位到正確層級。慢可能是網路等待、render-blocking CSS、同步 script、layout 重算、paint 成本、GPU layer 過多、主執行緒長任務、GC 壓力或跨程序溝通；每一種原因對應的修法不同。
先縮短關鍵資源路徑
快取、preload、fetch priority、Early Hints 與合理拆包，都是在幫瀏覽器更早拿到 initial render 需要的東西。
避免不必要的 parser blocking
大型同步 script 會拖住 HTML parsing；module、defer、async 與 code splitting 的價值，要放在整條 pipeline 裡理解。
少製造重排與重繪
批次 DOM 更新、降低深層 DOM 變動、避免反覆讀寫幾何值，通常比只盯著 JavaScript 微最佳化更有效。
讓動畫停留在 compositor 友善層
位移與透明度比高度、寬度、陰影等 layout 或 paint 相關屬性更穩，但 layer 也不是越多越好，記憶體會跟著上升。
遇到卡頓時，可以用這張檢查表
來源與取捨
這頁根據 Addy Osmani 的 X Article 來源 URL，以及可公開讀取的 Medium 版本整理。原文是 49 分鐘級長文，這裡保留主線與工程判斷，省略大量底層實作細節；需要完整推導、引文與延伸閱讀，應回到原文。