瀏覽器進程模型與 JavaScript 執行機制

現代瀏覽器采用多進程架構，包含瀏覽器進程、渲染進程、網絡進程等多個核心進程。每個標簽頁會獨立創建一個渲染進程，負責頁面內容的解析、渲染和執行腳本代碼。

JavaScript 的單線程特性

JavaScript 采用單線程執行模型，其主線程同時承擔兩個關鍵職責：

• GUI 渲染線程：處理 HTML/CSS 解析、樣式計算、布局繪制（每秒 60 幀渲染）
• JS 引擎線程：執行全局代碼和回調函數

這兩個功能模塊存在互斥關系，無法并行執行。單線程設計避免了多線程環境下 DOM 操作的競態條件問題（如一個線程刪除 DOM 時另一個線程在修改），同時也簡化了語言實現復雜度。異步機制則解決了耗時操作可能造成的線程阻塞問題。

異步執行原理

同步執行模式可能導致主線程阻塞，引發頁面卡頓。瀏覽器采用異步處理機制：

• 主線程將計時器、網絡請求等任務委托給對應線程
• 主線程繼續執行后續同步代碼
• 任務完成后，回調函數被封裝為任務對象加入消息隊列
• 主線程通過事件循環機制調度這些異步任務

這種模式確保主線程始終保持響應能力，同時兼顧任務處理的時效性。

任務優先級分級

消息隊列采用分級調度策略：

• 宏任務（MacroTask）：腳本整體代碼、setTimeout、I/O 等
• 微任務（MicroTask）：Promise、MutationObserver 等

微任務具有更高優先級，確保關鍵更新能及時處理（如 Promise 的狀態變更），而定時器等相對不敏感的宏任務可以適當延遲執行。

完整事件循環流程

1. 同步代碼執行階段
   主線程順序執行全局腳本，遇到異步 API 時移交對應模塊處理

2. 微任務檢查并清空
   當前調用棧清空后，立即執行全部微任務隊列中的任務

3. 宏任務處理
   選取最早的宏任務執行，執行期間產生的微任務會在該宏任務結束后立即處理

4. 渲染時機判斷
   若距離上次渲染超過 16ms（60Hz 屏幕），或頁面內容發生變化，則執行渲染任務，若沒有，回到步驟 3 繼續執行下一個宏任務。

5. 循環持續
   重復上述過程直至所有任務隊列清空