圖解瀏覽器多進程渲染：從DNS到GPU合成的完整旅程

瀏覽器進程架構的演化

進程和線程關系圖示

進程（Process）

線程（Thread）

協程（Coroutine）

進程&線程&協程核心對比

單進程和多進程瀏覽器

單進程瀏覽器?編輯

單進程瀏覽器存在的問題

多進程瀏覽器

瀏覽器的主要進程有哪些??編輯

多進程瀏覽器是如何解決單進程瀏覽的問題的?

多進程瀏覽器存在的問題?

瀏覽器導航流程

1. 用戶輸入URL

2. 瀏覽器進程處理用戶輸入

3. 服務器響應

4. 渲染進程解析HTML

5. 渲染進程解析CSS

6. 構建渲染樹

7. 布局(Layout)

8. 繪制(Paint)

9. 合成(Composite)

10. 執行JavaScript

11. 事件處理

12. 資源加載

13. 完成加載

進程間通信(IPC)

瀏覽器導航全流程示意圖

瀏覽器渲染流程

渲染流水線

1.構建 DOM 樹（DOM）

2.樣式計算（Style）

3.布局階段（Layout）

3.1 創建布局樹?編輯

3.2布局計算

4.分層（Layer）

5.圖層繪制（Paint）

6.分塊

7.柵格化（生成位圖）

8.合成與顯示

渲染流水線總結

回流和重繪

更新元素幾何屬性 —— 回流

更新元素繪制屬性 —— 重繪

GPU 加速 —— 直接合成

常用的方法來觸發GPU加速

使用3D變換

啟用硬件加速的CSS屬性

will-change屬性

使用backface-visibility

filter屬性

避免布局重繪和回流

使用requestAnimationFrame

淺談瀏覽器引擎

瀏覽器引擎跟進程的關系

現代瀏覽器采用了多進程架構，以提高性能、穩定性和安全性除了渲染進程和合成進程，瀏覽器還包含其他多種進程以下是一些常見的瀏覽器進程：

1. 瀏覽器進程（Browser Process）：
???負責管理用戶界面、網絡請求、存儲等全局資源
???處理用戶與瀏覽器的交互，如打開新標簽頁、關閉標簽頁、前進后退等操作
???創建和管理其他進程

2. 渲染進程（Renderer Process）：
???負責處理網頁的渲染、JavaScript執行、DOM操作等任務
???每個標簽頁通常對應一個獨立的渲染進程，以提高穩定性和隔離性

3. 合成進程（Compositor Process）：
???負責將多個圖層合成最終的屏幕顯示
???優化動畫和滾動性能，減少卡頓

4. GPU進程（GPU Process）：
???負責處理與圖形相關的任務，如3D渲染、視頻解碼等
???通過硬件加速來提升圖形處理的效率和性能

5. 插件進程（Plugin Process）：
???用于處理瀏覽器插件（如Flash、Silverlight等）的運行
???由于插件可能存在安全性和穩定性問題，將其放在獨立的進程中可以減少對瀏覽器主進程的影響

6. 網絡進程（Network Process）：
???負責處理網絡請求，如HTTP/HTTPS請求
???通過集中管理網絡請求，提高網絡性能和安全性

7. 存儲進程（Storage Process）：
???負責處理瀏覽器的存儲操作，如IndexedDB、LocalStorage等
???通過集中管理存儲操作，提高存儲性能和安全性

8. 實用工具進程（Utility Process）：
???用于執行一些輔助任務，如PDF解析、打印等
???這些任務通常需要較高的權限，因此放在獨立的進程中以提高安全性

9. Zygote進程（Zygote Process）：
???用于快速創建新的渲染進程
???通過預創建一個基礎進程，可以快速克隆出新的渲染進程，提高啟動速度

10. 沙箱進程（Sandbox Process）：
????負責管理沙箱機制，限制進程對系統資源的訪問權限
????通過沙箱機制，即使某個進程被惡意代碼利用，其危害也會被限制在一定范圍內

11. 擴展進程（Extension Process）：
????用于處理瀏覽器擴展的運行
????每個擴展通常運行在獨立的進程中，以提高穩定性和安全性

12. 服務工作進程（Service Worker Process）：
????負責處理服務工作線程（Service Worker）的運行
????服務工作線程可以處理網絡請求、推送通知等后臺任務

13. 音頻進程（Audio Process）：
????負責處理音頻相關的任務，如音頻解碼和播放
????通過集中管理音頻任務，提高音頻性能和穩定性

這些進程共同協作，使得現代瀏覽器能夠高效地處理復雜的網頁應用，提供更好的用戶體驗每個進程都有明確的職責，通過進程間通信（IPC）機制進行協作;瀏覽器進程可以通過Chrome 選項 -> 更多工具 -> 任務管理器查看;

瀏覽器進程架構的演化

進程和線程關系圖示

進程（Process）

定義：進程是一個具有一定獨立功能的程序關于某個數據集合的一次運行活動，是系統進行資源分配和調度的基本單位。每個進程都有自己的獨立內存空間。
特點：
- 每個進程都有自己獨立的地址空間和運行環境。
- 進程之間的切換開銷較大，因為需要保存和恢復整個CPU的狀態（上下文）。
- 進程間通信（IPC）相對復雜，通常需要使用特定的機制如管道、消息隊列等。

線程（Thread）

定義：線程是進程中的一個實體，是被系統獨立調度和分派的基本單位。一個線程不能獨立存在，它必須屬于一個進程，且一個進程至少包含一個線程。
特點：
- 線程共享其所屬進程的資源，包括內存空間、文件描述符等。
- 線程間的切換開銷比進程小，因為它們共享相同的地址空間。
- 同一進程內的線程可以直接訪問該進程的數據和代碼，因此線程間的通信更簡單高效。

協程（Coroutine）

定義：協程是一種用戶態的輕量級線程，其調度由程序員自行控制而非操作系統。這意味著你可以更靈活地決定何時暫停或繼續執行一個協程。
特點：
- 協程的創建和管理成本遠低于線程，因為它們不依賴于操作系統的線程或進程調度器。
- 協程之間可以通過簡單的函數調用來實現協作式的任務切換，這使得編寫異步程序變得更加直觀和易于理解。
- 在處理大量并發任務時，使用協程可以有效減少系統資源的消耗。

總結來說，進程、線程和協程分別代表了不同的執行單元級別，從最重的進程到最輕量級的協程，它們各自適合解決不同類型的問題。

用簡單的語言來說：

進程就像一個“工廠”，它擁有自己獨立的資源（比如場地、機器等）。
線程是工廠里的“工人”，多個工人（線程）可以在同一個工廠（進程）里工作，共享資源。
協程就像是“工人”之間的一種合作方式，他們可以輪流干活，不爭不搶，效率更高。

所以：

一個進程可以包含多個線程，而線程內部可以通過協程來協作完成任務。?

也可以理解為：

進程是“單位”，
線程是“員工”，
協程是“員工之間的分工合作方式”。

進程&線程&協程核心對比

特性	進程	線程	協程
資源隔離	完全隔離	共享內存	共享內存
切換成本	非常高（ms級）	較高（μs級）	極低（ns級）
調度方	操作系統	操作系統	用戶程序
內存占用	MB級	KB級	Byte級
通信機制	IPC（管道/消息）	共享內存	共享內存+Channel

單進程和多進程瀏覽器

單進程瀏覽器

單進程瀏覽器是指所有功能模塊（網絡、插件、JS 運行環境、渲染引擎、頁面等）都運行在同一進程中的瀏覽器（早期的 IE、Firefox）;

單進程瀏覽器存在的問題

不穩定:?瀏覽器中的插件運行在瀏覽器的進程之中，插件的崩潰會引起整個瀏覽器的崩潰；
渲染引擎通常也是不穩定的，例如復雜的 JS 腳本也會引起渲染引擎的崩潰，最終導致瀏覽器崩潰。
不流暢:?CPU 在某個時間點只能執行某個進程中的某一條線程。由于單進程瀏覽器中所有的頁面的各種模塊都在同一線程中運行，即同一時刻只能有一個模塊可以執行。
當一個頁面的某個模塊阻塞了該線程，就會導致整個瀏覽器失去響應；此外，頁面的內存泄漏也會導致單進程瀏覽器使用時間越長，反應越慢。
不安全:?線程共享進程資源，因而插件就能獲取到瀏覽器運行過程中的數據，以及擁有和瀏覽器同等的系統權限。
例如，插件可使用 C/C++ 編寫，通過插件可以獲取到操作系統任意資源；腳本也可以通過瀏覽器的漏洞來獲取系統權限，引發安全問題。

多進程瀏覽器

Chrome 一問世便使用了多進程的架構，其頁面運行在了單獨的渲染進程中，插件運行在單獨的插件進行中，進程間使用 IPC 進行通信。

瀏覽器的主要進程有哪些?

多進程瀏覽器是如何解決單進程瀏覽的問題的?

不穩定問題解決: 正是由于進程之間相互隔離，當一個頁面或者插件崩潰時只會影響當前的進程，不會影響到瀏覽器和其他頁面。
不流暢問題解決: 由于 JS 腳本運行在渲染進程中，即使 JS 阻塞了渲染進程，也只會影響當前頁面的渲染，而其他頁面的腳本則會運行在他們自己的渲染進程中，不受影響；此外，內存泄漏導致的不流暢問題也會隨著一個頁面的關閉導致一個進程的結束而解決。
不安全問題解決: 多進程架構的安全沙箱，相當于是操作系統給進程上了一把鎖，沙箱中的程序可運行不可寫入、不可讀取敏感數據。

多進程瀏覽器存在的問題?

更高的資源占用: 以 Chrome 瀏覽器為例，其將為每個頁面分配單獨的渲染進程，為每個插件分配單獨的插件進程，因此會消耗更多內存資源。
更復雜的體系架構: 瀏覽器各個模塊之間耦合度高、擴展性差目前的架構較難適應新需。

瀏覽器導航流程

從用戶發出 URL 請求到頁面開始解析的過程，叫做導航，是網絡加載流程和渲染流程之間的橋梁

瀏覽器的各個進程通過進程間通信（IPC）機制緊密配合，共同完成將頁面呈現給用戶的任務。以下是一個詳細的流程，說明各個進程如何協作完成這一過程：

1. 用戶輸入URL

用戶在瀏覽器地址欄輸入一個URL并按下回車鍵。

2. 瀏覽器進程處理用戶輸入

瀏覽器進程：接收到用戶輸入的URL后開始處理。
DNS解析：將URL中的域名轉換為IP地址。
建立TCP連接：瀏覽器與服務器之間建立TCP連接。
發送HTTP請求：通過HTTP或HTTPS協議向服務器發送請求，要求獲取HTML內容。

3. 服務器響應

服務器響應：服務器處理請求，并返回HTML文檔。
接收響應：瀏覽器進程接收服務器響應，并將HTML文檔傳遞給渲染進程。

4. 渲染進程解析HTML

渲染進程：接收到HTML文檔后開始解析，構建DOM樹。
解析HTML：生成DOM樹結構。

5. 渲染進程解析CSS

解析CSS：分析CSS文件，構建CSSOM樹。
構建CSSOM樹：包含所有CSS規則。

6. 構建渲染樹

構建渲染樹：結合DOM和CSSOM樹，形成渲染樹，它包括所有可見的DOM節點及其樣式信息。

7. 布局(Layout)

布局：計算每個節點在頁面上的確切位置和大小。
重排(Reflow)：確定幾何信息如寬度、高度、邊距等。

8. 繪制(Paint)

繪制：根據渲染樹的信息，繪制每個節點到屏幕上。
重繪(Repaint)：更新視覺信息如顏色、邊框、背景等。

9. 合成(Composite)

合成進程：負責將繪制好的圖層合并成最終顯示的內容。此步驟通常由GPU完成以提高性能。
圖層：為了優化性能，瀏覽器可能會將某些節點分組到不同的圖層中。

10. 執行JavaScript

執行JavaScript：渲染進程解析并執行頁面中的JavaScript代碼。
動態修改：JavaScript可以動態地修改DOM和CSSOM，觸發重新布局和繪制。

11. 事件處理

事件處理：瀏覽器進程處理用戶交互事件（如點擊、滾動）。
觸發JavaScript：這些事件可觸發JavaScript代碼執行，進一步影響DOM和CSSOM，導致重新布局和繪制。

12. 資源加載

資源加載：繼續加載頁面引用的其他資源，如圖片、字體、視頻等。
異步加載：這些資源可能異步加載，不會阻塞頁面的初始渲染。

13. 完成加載

當所有資源都加載完畢，頁面完全渲染并在屏幕上顯示。

進程間通信(IPC)

在整個過程中，不同進程通過IPC機制協作：

瀏覽器進程與渲染進程間的文檔傳遞和結果反饋
渲染進程與合成進程間的圖層信息交換
渲染進程與GPU進程間的圖形任務處理
瀏覽器進程與網絡進程間的請求和響應管理
瀏覽器進程與存儲進程間的存儲操作處理

這種多進程架構提高了瀏覽器的性能、穩定性和安全性，確保了頁面能夠高效準確地展示給用戶。

瀏覽器導航全流程示意圖

瀏覽器渲染流程

渲染流水線

渲染流水線可分為如下幾個子階段：1.構建 DOM 樹、2.樣式計算、3.布局、4.分層、5.繪制、6.分塊、7.光柵化、8.合成

1.構建 DOM 樹（DOM）

瀏覽器無法直接理解和使用 HTML，所以要將其轉化為瀏覽器能夠理解的解構 —— 經過 HTML 解析器解析，輸出樹狀結構的 DOM

當瀏覽器接收到服務器響應的HTML文檔后，它開始解析這些標記以生成一個文檔對象模型（DOM）。DOM是一個表示文檔結構的樹狀結構，其中每個節點代表文檔的一部分（如元素、屬性或文本）

2.樣式計算（Style）

目的是計算 DOM 節點中的每個元素具體樣式，可分為三步

渲染引擎把 CSS 文本轉為瀏覽器可理解的結構 ——styleSheets 樣式表
標準化樣式表中的屬性值。這是由于渲染引擎無法理解 CSS 文本中的各種屬性值，這些值會被轉為標準化的計算值（例如?{color: blue} → {color: rgb(0, 0, 225)}、{font-weight: bold} → {font-weight: 700}）
計算出 DOM 樹中每個節點的具體樣式，計算過程遵守 CSS 的繼承和層疊規則，被保存在 ComputedStyle 結構內

?在這一步驟中，瀏覽器解析CSS并確定哪些樣式應用于DOM中的各個元素。這一過程包括匹配選擇器、層疊（決定哪個規則優先）以及繼承（某些樣式會自動應用到子元素上）等步驟。結果是一個包含每個元素最終樣式的“render tree”

3.布局階段（Layout）

計算 DOM 樹中可見元素的幾何位置信息，包括創建布局樹和布局計算兩個階段;

布局階段也被稱為reflow，是指根據“render tree”來計算每個元素的確切位置和大小。這是基于當前窗口尺寸以及任何明確設置的寬高值進行的。布局的結果是一組框，它們準確地描述了每個元素在頁面上的位置和尺寸

3.1 創建布局樹

遍歷 DOM 樹中的所有需要渲染節點，并添加到布局樹中;
不可見的節點如 head 標簽下的全部內容，display: none 的標簽等會被忽略;

3.2布局計算
計算 DOM 節點的位置坐標，布局運算的結果會被寫回布局樹中

4.分層（Layer）

針對頁面中的復雜效果，例如復雜的 3D 變換、頁面滾動、z 軸排序等，渲染引擎將為特定節點生成專用的圖層，并生成一顆圖層樹（Layer Tree）;

這樣，當某個部分發生變化時，只有相關的圖層需要重繪，而不是整個頁面。這類似于圖像編輯軟件中的圖層概念。

擁有層疊上下文屬性的元素會被提升為單獨的一層；需要剪裁的地方也會被創建為單獨的圖層

注意，并非布局樹的每個節點都包含一個圖層，一個節點可以直接或間接地屬于一個層，例如一個節點可以從屬于父節點的圖層;

5.圖層繪制（Paint）

繪制階段涉及到實際填充像素的過程，即把頁面的視覺表現轉化為屏幕上的像素。這包括文本、顏色、圖像、邊框和陰影等。不過，這一步并不考慮元素的深度或順序，所有元素都是平面化處理的;

渲染引擎會對圖層樹中每個圖層進行繪制，將一個圖層的繪制拆分成很多小的繪制指令，然后把這些指令按順序組成一個待繪制列表

6.分塊

分塊是進一步將圖層分割成更小的部分，以便于后續的光柵化處理。這有助于提高效率，特別是對于大型頁面，因為它允許瀏覽器并行處理多個部分

7.柵格化（生成位圖）

繪制列表準備好后，主線程將其提交給合成線程，實際的繪制操作由渲染引擎中的合成線程來完成;

光柵化是將矢量圖形或較高層次的命令轉換為像素網格的過程。在這個階段，瀏覽器會將頁面的每一部分轉換為顯示器能夠呈現的位圖格式;

合成線程會根據視口位置和大小，將圖層（layer）劃分為塊（圖塊 tile）
合成線程會按照視口附近的圖塊來優先生成位圖，實際生成位圖的操作由柵格化（將圖塊轉換為位圖）來執行，圖塊是柵格化的最小單位
渲染進程會維護一個柵格化的線程池，柵格化過程通常都會使用 GPU 來加速生成，使用 GPU 生成位圖的過程叫做快速柵格化，生成的位圖被保存在 GPU 內存中

8.合成與顯示

所有圖塊都被柵格化后，合成線程將生成繪制圖塊命令 DrawQuad 提交給瀏覽器進程
瀏覽器進程中 viz 組件接收 DrawQuad 命令，根據此命令，將其頁面內容繪制在內存中，最后再顯示到屏幕上
這個階段負責將所有的圖層和分塊組合在一起，并按照正確的順序顯示出來。考慮到可能存在的透明度和z-index等因素，這個階段確保了頁面按照預期的方式顯示

渲染流水線總結

渲染進程將 HTML 內容轉換為能夠讀懂的 DOM 樹結構。
渲染引擎將 CSS 樣式表轉化為瀏覽器可以理解的 styleSheets，計算出 DOM 節點的樣式。
創建布局樹，并計算元素的布局信息。
對布局樹進行分層，并生成分層樹。
為每個圖層生成繪制列表，并將其提交到合成線程。
合成線程將圖層分成圖塊，并在光柵化線程池中將圖塊轉換成位圖。
合成線程發送繪制圖塊命令 DrawQuad 給瀏覽器進程。
瀏覽器進程根據 DrawQuad 消息生成頁面，并顯示到顯示器上。

回流和重繪

基于上述瀏覽器的渲染原理，我們可以理解回流和重繪是如何對瀏覽器性能造成影響的。由于瀏覽器渲染頁面默認使用流式布局模型，當某個 DOM 或 CSS 幾何屬性發生改變后，文檔流就會受到波動，就需要對 DOM 重新進行計算，重新布局頁面，引發回流。

更新元素幾何屬性 —— 回流

幾何屬性的修改會觸發瀏覽器重新布局（Layout & Layer），渲染樹需要重新生成，解析后來的一系列子階段;
因此回流需要更新完整的渲染流水線，開銷是最大的;

更新元素繪制屬性 —— 重繪

繪制屬性的修改并沒有導致幾何位置的變化，所以不會導致布局階段的執行，會直接進入繪制階段，然后執行后來的子階段;
重繪操作相比回流省去了布局和分層階段，效率高于回流;

GPU 加速 —— 直接合成

如果更改的屬性不需要布局和繪制，渲染引擎會跳過布局和繪制，直接進入非主線程 —— 合成線程執行后續合成操作（比如利用 CSS3 的 transform、opacity、filter 這些屬性就可以實現合成效果）;
例如，使用 CSS transform 實現動畫效果的渲染流水線如下：一是避開了重繪、回流，因此避開了布局和繪制階段；二是直接在非主線程執行合成動畫操作，未占用主線程資源。相比于重繪和回流，合成大大提升了繪制效率;

在前端開發中，觸發GPU加速可以顯著提升頁面的性能，特別是在處理動畫、滾動、3D變換等場景時

常用的方法來觸發GPU加速

使用3D變換

使用translate3d(x, y, z)或translateZ(z)而不是普通的translate(x, y)。這會強制瀏覽器將元素及其子元素提升到一個獨立的圖層上，從而利用GPU進行渲染。

啟用硬件加速的CSS屬性

除了3D變換外，其他一些CSS屬性也能觸發GPU加速，如transform和opacity。當你對這些屬性應用動畫時，瀏覽器可能會選擇使用GPU加速。

will-change屬性

will-change是一個CSS屬性，它向瀏覽器指示某個元素將會發生的變化（如內容、位置、堆疊順序等），這樣瀏覽器可以在變化實際發生之前做出優化，比如提前創建一個新的圖層。例如：will-change: transform;?或?will-change: opacity;

使用backface-visibility

設置backface-visibility: hidden;也可以觸發GPU加速，尤其是在做翻轉或旋轉效果時。

filter屬性

應用CSS濾鏡(filter)也可以促使瀏覽器使用GPU進行加速處理。例如模糊效果filter: blur(5px);

避免布局重繪和回流

盡量減少那些會引起大量重繪和回流的操作，比如頻繁修改元素的尺寸、位置或者樣式。

應該嘗試批量更新樣式或者使用transform和opacity，因為它們通常不會引起重繪或回流。

使用requestAnimationFrame

在執行復雜的動畫時，使用requestAnimationFrame()代替setTimeout或setInterval，它可以確保動畫幀與瀏覽器的刷新率同步，提高動畫流暢度，并且有助于優化性能。

需要注意的是，雖然上述方法可以幫助你觸發GPU加速，但過度使用可能導致內存消耗增加，甚至可能降低性能。因此，在實際項目中應當謹慎使用，并根據具體情況進行性能測試和調優。

淺談瀏覽器引擎

瀏覽器是通過多種引擎協同工作來解析和展示網頁內容的。幾個關鍵引擎和技術組件對于前端開發至關重要：

JavaScript引擎：用于解釋和執行JavaScript代碼。每個瀏覽器都有自己的JavaScript引擎（例如，V8引擎在Google Chrome和Node.js中使用）。
HTML渲染引擎（也稱作布局引擎或瀏覽器引擎）：負責獲取標記內容（如HTML、XML等），構建DOM樹，并將其與CSS一起用于頁面布局和格式化。常見的HTML渲染引擎包括WebKit（Safari）、Blink（Chrome, Opera) 和 Gecko (Firefox)。
CSS引擎：雖然它通常不是單獨存在的，而是作為HTML渲染引擎的一部分，但它的功能專注于解析CSS規則，并將這些樣式應用到文檔對象模型（DOM）上。
圖像解碼器：用于處理和顯示網頁上的各種圖像格式，比如JPEG、PNG、GIF等。
字體渲染引擎：負責將文本轉換為屏幕上顯示的字形，處理字體文件（如TrueType, OpenType）并支持文本排版和國際化文本顯示。
多媒體引擎：用于播放音頻和視頻內容。現代瀏覽器支持HTML5中的<audio>和<video>標簽，不需要額外的插件即可播放媒體文件。
網絡引擎：管理HTTP/HTTPS請求，緩存機制，以及安全連接等，確保數據能夠高效且安全地傳輸。
安全引擎：確保用戶的安全性，包括防止跨站腳本攻擊(XSS)，跨站請求偽造(CSRF)等安全威脅。

這些引擎共同作用，使得瀏覽器能夠加載、呈現網頁，并提供交互式體驗給用戶。隨著技術的發展，瀏覽器也在不斷地優化這些引擎，以提高性能、安全性和用戶體驗。

瀏覽器引擎跟進程的關系

瀏覽器的架構設計通常涉及多個進程和線程，以實現高效、穩定以及安全的網頁瀏覽體驗。不同的引擎在瀏覽器中可能會分布在不同的進程或線程中工作，以便更好地管理資源和提升性能。以下是一些基本概念及其與不同引擎之間的關系：

多進程架構：現代瀏覽器通常采用多進程架構來提高穩定性和安全性。這意味著瀏覽器的不同部分（如標簽頁、插件、擴展等）運行在不同的進程中。例如，在Chrome瀏覽器中，有一個主進程負責管理其他各種子進程，包括渲染進程、GPU進程、網絡服務進程等。
渲染進程：這是處理網頁內容的主要進程，包括HTML引擎、CSS引擎、JavaScript引擎等。每個標簽頁一般都會有自己的渲染進程，這樣即使一個標簽頁崩潰了，也不會影響到其他標簽頁。渲染進程中包含了布局、繪制和JavaScript執行等操作。
主線程和工作線程：
- 主線程：幾乎所有與頁面顯示相關的任務都在主線程上執行，包括解析HTML、構建DOM樹、計算樣式、布局、繪制以及執行大部分JavaScript代碼。
- 工作線程：為了防止某些耗時的任務（比如大型腳本執行或者網絡請求）阻塞主線程，從而導致頁面響應變慢，瀏覽器引入了工作線程的概念。這包括Web Workers，它允許你在后臺線程執行JavaScript代碼，而不會干擾主線程上的用戶界面更新。
GPU進程：用于加速圖形處理任務，如3D變換、視頻解碼等。通過將這些任務交給專門的GPU進程，可以減輕CPU負擔并提高性能。
網絡進程：負責所有的網絡活動，比如HTTP請求。它獨立于渲染進程運行，確保即使頁面加載失敗或出錯，也不影響瀏覽器的整體穩定性。
安全性和隔離性：通過將不同的網站內容分配給不同的渲染進程，并利用操作系統提供的安全特性，瀏覽器能夠有效地隔離各個網站，減少跨站攻擊的風險。