Chenkaixuan's Blog

Embrace The Grind

0%

浏览器有几个线程

发表于 更新于

早期的浏览器是单进程的，这意味着所有功能——用户界面、网页渲染、插件、网络请求——都运行在同一个进程里。这种设计的缺点是致命的：

  • 不稳定：任何一个标签页或插件崩溃，整个浏览器都会随之崩溃。
  • 不安全：所有标签页共享同一块内存，恶意脚本很容易就能窃取其他页面的信息。
  • 不流畅：所有任务抢占同一个执行线程，一个复杂的网页计算就可能导致整个浏览器卡死。

为了解决这些问题，现代浏览器采用了多进程架构。

当你打开网页时

  1. 网络线程下载HTML。
  2. 主线程解析HTML，遇到JS时暂停解析（除非标记async/defer）。
  3. 合成线程优先响应滚动，保证流畅性。
  4. GPU线程加速页面渲染。

浏览器进程 (Browser Process)

每个浏览器窗口只有一个浏览器进程。它是所有进程的父进程，负责它们的生杀大权。

包含线程

  • UI线程：负责地址栏、书签栏等界面渲染和用户交互。
  • 网络线程（Network Thread）：处理网络请求（HTTP/HTTPS）、DNS解析等。
  • 存储线程（Storage Thread）：管理本地存储（Cookie、LocalStorage）。

渲染器进程 (Renderer Process)

包含线程

  • 主线程（Main Thread）

    • 解析HTML/CSS、构建DOM树和CSSOM树。
    • 执行JavaScript（单线程，通过事件循环处理异步任务）。
    • 布局（Layout）和绘制（Paint）的触发。

  • 合成线程（Compositor Thread）

    • 将页面分层（Layer），处理滚动、动画等，避免阻塞主线程。

  • Web Worker线程（可选）涉及“js处理一万个任务怎么做”

    • 运行独立JavaScript脚本，不阻塞主线程（需通过postMessage通信）。
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    主线程代码 (main.js)
    // 1. 创建一个新的 Worker
    const worker = new Worker('worker.js');

    // 2. 向 Worker 发送任务数据
    console.log('向 Worker 发送任务指令...');
    worker.postMessage({ command: 'start', totalTasks: 10000 });

    // 3. 监听来自 Worker 的消息（比如任务完成的通知）
    worker.onmessage = function(e) {
      if (e.data.status === 'done') {
        console.log('主线程收到消息：Worker 已完成所有任务！');
        // 在这里可以用 Worker 返回的结果来更新 UI
      }
    };

    Worker 线程代码 (worker.js)
    // 监听来自主线程的消息
    self.onmessage = function(e) {
      if (e.data.command === 'start') {
        const totalTasks = e.data.totalTasks;

        // 在 Worker 线程中执行耗时任务，这里可以放心使用同步长循环
        // 因为它不会阻塞主线程
        let result = 0;
        for (let i = 0; i < totalTasks; i++) {
          result += Math.sqrt(i);
        }
        
        // 任务完成后，向主线程发回消息
        self.postMessage({ status: 'done', result: result });
      }
    };

    How it Works

  • 每个标签页一个进程：通常情况下，每打开一个新的标签页，浏览器就会创建一个新的渲染器进程。这就是为什么在任务管理器里能看到很多个 Chrome 进程的原因。

  • 安全沙箱：渲染器进程运行在一个权限极低的“沙箱”环境中。它几乎没有直接访问文件系统或网络的能力。如果需要这些功能，它必须通过浏览器进程来请求。

  • 例如：当你在网页上点击一个链接时，是渲染器进程捕捉到这个事件，然后它会通知浏览器进程：“用户想访问这个新网址！” 浏览器进程接收到请求后，可能会创建一个新的渲染器进程来加载新页面。

GPU 进程 (GPU Process)

特点：整个浏览器通常只有一个 GPU 进程。它从浏览器进程接收命令，并与渲染器进程（合成线程）协作，将渲染好的图层合成并显示在屏幕上。

插件进程 (Plugin Process)

这个进程用于管理浏览器安装的插件（比如早期版本的 Adobe Flash Player）。

  • 职责
    • 隔离运行插件：为每个插件（或每种类型的插件）创建一个独立的进程。
  • 特点
    • 增强稳定性与安全性：将插件隔离可以防止因插件崩溃而导致整个浏览器或标签页崩溃。同样，插件也被限制在自己的沙箱中。

进程间通信

它们之间的通信是通过一种叫做 IPC (Inter-Process Communication, 进程间通信) 的机制来完成的。