Chromium 多進程架構概述

Chromium 的多進程架構是其核心設計之一，旨在提高瀏覽器的穩定性、安全性和性能。Chromium 將不同的功能模塊分配到獨立的進程中，每個進程相互隔離，避免了單進程架構中一個模塊的崩潰導致整個瀏覽器崩潰的問題。

在 Chromium 的多進程架構中，主要包含以下幾種進程類型：

• Browser Process：瀏覽器主進程，負責管理所有其他進程，處理用戶界面、網絡請求、文件訪問等全局任務。
• Renderer Process：渲染進程，負責網頁的渲染和 JavaScript 執行，每個標簽頁通常對應一個獨立的渲染進程。
• GPU Process：GPU 進程，負責處理與圖形渲染相關的任務，如 WebGL、CSS 動畫等。
• Plugin Process：插件進程，負責運行瀏覽器插件，如 Flash 等。
• Utility Process：工具進程，用于處理一些輔助任務，如網絡服務、文件解碼等。

Chromium 源碼剖析

Chromium 的源碼結構復雜，但其多進程架構的核心代碼主要集中在 content 模塊中。以下是對 Chromium 源碼中多進程架構的關鍵部分進行剖析。

Browser Process

Browser Process 是 Chromium 的主進程，負責管理所有其他進程。其核心代碼位于 content/browser 目錄下。BrowserMainLoop 類是 Browser Process 的入口，負責初始化瀏覽器并啟動主事件循環。

// content/browser/browser_main_loop.cc
int BrowserMainLoop::Initialize() {// 初始化瀏覽器主循環...return 0;
}

Renderer Process

Renderer Process 負責網頁的渲染和 JavaScript 執行。其核心代碼位于 content/renderer 目錄下。RenderProcess 類是 Renderer Process 的入口，負責初始化渲染進程并啟動渲染線程。

// content/renderer/render_process.cc
void RenderProcess::Initialize() {// 初始化渲染進程...
}

進程間通信

Chromium 使用 Mojo 框架進行進程間通信。Mojo 是一個跨進程通信框架，允許不同進程之間通過消息傳遞進行交互。Mojo 的核心代碼位于 mojo 目錄下。

// mojo/public/cpp/bindings/binding.h
class Binding {public:// 綁定消息接收器...
};

Electron 中的多進程架構

Electron 是基于 Chromium 和 Node.js 構建的框架，允許開發者使用 Web 技術構建跨平臺桌面應用。Electron 繼承了 Chromium 的多進程架構，并在此基礎上進行了擴展。

Main Process

在 Electron 中，Main Process 相當于 Chromium 的 Browser Process，負責管理應用的主窗口和所有其他進程。Main Process 的代碼通常位于 main.js 文件中。

// main.js
const { app, BrowserWindow } = require('electron');app.on('ready', () => {const mainWindow = new BrowserWindow({ width: 800, height: 600 });mainWindow.loadURL('https://example.com');
});

Renderer Process

在 Electron 中，Renderer Process 負責渲染網頁內容，并可以訪問 Node.js API。每個窗口通常對應一個獨立的 Renderer Process。Renderer Process 的代碼通常位于 renderer.js 文件中。

// renderer.js
const { ipcRenderer } = require('electron');ipcRenderer.send('message', 'Hello from Renderer Process');

進程間通信

Electron 提供了 ipcMain 和 ipcRenderer 模塊，用于 Main Process 和 Renderer Process 之間的通信。ipcMain 用于在 Main Process 中接收消息，ipcRenderer 用于在 Renderer Process 中發送消息。

// main.js
const { ipcMain } = require('electron');ipcMain.on('message', (event, arg) => {console.log(arg); // 輸出: Hello from Renderer Process
});

Electron 源碼剖析

Electron 的源碼結構相對復雜，但其多進程架構的核心代碼主要集中在 lib 和 atom 目錄下。以下是對 Electron 源碼中多進程架構的關鍵部分進行剖析。

Main Process 初始化

Electron 的 Main Process 初始化代碼位于 lib/browser/init.js 文件中。app 模塊負責初始化應用并啟動主事件循環。

// lib/browser/init.js
app.on('ready', () => {// 應用初始化完成...
});

Renderer Process 初始化

Electron 的 Renderer Process 初始化代碼位于 lib/renderer/init.js 文件中。BrowserWindow 模塊負責創建和管理窗口。

// lib/renderer/init.js
const { BrowserWindow } = require('electron');const win = new BrowserWindow({ width: 800, height: 600 });
win.loadURL('https://example.com');

進程間通信實現

Electron 的進程間通信實現代碼位于 lib/renderer/api/ipc-renderer.js 和 lib/browser/api/ipc-main.js 文件中。ipcRenderer 和 ipcMain 模塊分別負責在 Renderer Process 和 Main Process 中處理消息。

// lib/renderer/api/ipc-renderer.js
ipcRenderer.send('message', 'Hello from Renderer Process');// lib/browser/api/ipc-main.js
ipcMain.on('message', (event, arg) => {console.log(arg); // 輸出: Hello from Renderer Process
});

總結

Chromium 的多進程架構通過將不同功能模塊分配到獨立的進程中，提高了瀏覽器的穩定性、安全性和性能。Electron 繼承了 Chromium 的多進程架構，并在此基礎上進行了擴展，允許開發者使用 Web 技術構建跨平臺桌面應用。通過剖析 Chromium 和 Electron 的源碼，可以更深入地理解其多進程架構的實現原理。