Chromium和Chrome到底是什么关系?

刚开始接触前端开发的时候，经常会听到这样一些说法：

Chrome 使用 Chromium 内核。
Edge 也是 Chromium 内核。

这些话单独看，好像都没什么问题。但放在一起，就很容易乱。

Chromium 到底是不是内核？

Chromium 和 Chrome 是什么关系？

这篇文章就专门把这几个概念捋清楚。

一、先记住一句话

如果只想记一个结论，可以记下面这句话：

Chromium 是一个开源浏览器工程，Chrome 是 Google 基于 Chromium 做出来的浏览器产品。

再简单一点：

ini 复制代码

Chromium = 底座

Chrome = Chromium + Google 自己的功能

类似于：

markdown 复制代码

Android AOSP
    ↓
小米 HyperOS
三星 One UI

Chromium 也差不多。现在很多浏览器都建立在 Chromium 之上。比如：

markdown 复制代码

                 Chromium
                     │
          ┌──────────┼──────────┐
          ↓          ↓          ↓
       Chrome       Edge       Brave
       Google     Microsoft

所以，Chrome 和 Chromium 不是一回事。

二、Chromium 是谁开发的？

Chromium 最早是2008 年 Google 发起的开源浏览器项目。

当时 Google 推出了 Chrome 浏览器，同时把其中大量核心代码开源，这个开源项目就是 Chromium。所以一开始它们的关系就非常紧密。可以简单理解成：

markdown 复制代码

Google
  │
  ├── Chromium
  │      开源浏览器工程
  │
  └── Chrome
         Google 的浏览器产品

不过今天的 Chromium 已经不是只有 Google 的工程师在开发。微软、Intel、Samsung、Opera 等公司，以及很多个人开发者，也参与过 Chromium 的代码贡献。尤其是 Microsoft Edge 后来改用 Chromium 以后，微软也成为 Chromium 的重要贡献者之一。

但是整体来看，Google 依然是 Chromium 最重要的推动者。

所以如果有人问：

Chromium 是 Google 的吗？

比较准确的回答是：

Chromium 是 Google 发起并长期主导的开源项目，但它不是只属于 Google 一家公司内部的私有项目。

三、为什么说"Chromium 内核"这个词不太准确？

国内经常有一个说法：

这个浏览器使用了 Chromium 内核。

日常交流这么说问题不大。但是从技术上讲，并不太严谨。原因很简单：

Chromium 太大了。

它并不是一个单纯负责"显示网页"的模块。Chromium 里面包括很多东西。大概可以画成这样：

复制代码

Chromium
│
├── 浏览器窗口
├── 标签页
├── 多进程架构
├── 网络模块
├── GPU
├── 存储
├── Cookie
├── IndexedDB
├── Service Worker
├── DevTools
├── 扩展系统
├── 安全沙箱
├── Blink
├── V8
└── 大量基础模块

看到这里应该就能明白：Chromium 本身已经是一套完整的浏览器工程了。

所以直接把 Chromium 叫成"浏览器内核"，有点像把"一辆汽车"叫成"发动机"。

大家大概知道你想表达什么。但严格来说不是一个东西。

四、那真正的"浏览器内核"是谁？

这里就要引出两个非常重要的名字：

复制代码

Blink
V8

前端开发者最好把它们记住。

五、Blink 是什么？

Blink 是 Chrome 和 Chromium 使用的网页渲染引擎。

它主要处理什么？简单说：

HTML 和 CSS 主要归它管。

比如浏览器拿到下面这段代码：

ini 复制代码

<div class="box">
  Hello World
</div>

CSS 是：

css 复制代码

.box {
  width: 200px;
  height: 100px;
}

浏览器最终需要知道很多事情。比如：

css 复制代码

这是一个 div

它宽 200px

高 100px

它应该出现在页面什么位置

文字应该怎么绘制

元素之间应该怎么布局

这些事情，很大一部分就是 Blink 在负责。过程可以粗略理解成：

css 复制代码

HTML
 ↓
DOM

CSS
 ↓
CSSOM

DOM + CSSOM
 ↓
Layout
 ↓
Paint
 ↓
Composite
 ↓
最后显示到屏幕

所以如果有人问：

Chrome 的渲染引擎是什么？

答案是：

Blink。

六、V8 又是什么？

V8 是 JavaScript 引擎。

它主要负责：

执行 JavaScript。

比如：

css 复制代码

const a = 1
const b = 2

console.log(a + b)

这段代码不是 Blink 在执行。

主要是 V8。

所以你可以先建立一个最简单的模型：

markdown 复制代码

HTML / CSS
    ↓
  Blink

JavaScript
    ↓
   V8

当然，真实浏览器内部比这个复杂得多。Blink 和 V8 之间也会进行大量交互。但是对于初学者来说，先这样理解完全够用。

七、所以 Chromium、Blink、V8 到底是什么关系？

现在可以把关系画出来了。

css 复制代码

              Chromium
                  │
        ┌─────────┴─────────┐
        │                   │
      Blink                V8
        │                   │
 HTML / CSS / DOM       JavaScript

注意这里的层级关系。不是：

ini 复制代码

Chromium = Blink

也不是：

ini 复制代码

Chromium = V8

而是：

复制代码

Chromium 里面使用了 Blink 和 V8

Chromium 比这两个东西都大得多。

八、Chrome 又处在哪一层？

再往上放一层。

markdown 复制代码

               Chrome
                  │
        Google 产品和服务
                  │
              Chromium
                  │
         ┌────────┴────────┐
         │                 │
       Blink               V8

这就比较接近真实关系了: Chrome 基于 Chromium。但是 Chrome 并不等于 Chromium。

Google 会在 Chromium 的基础上增加很多自己的产品能力。

比如：

rust 复制代码

Google 账号

Chrome Sync

Google Password Manager

自动更新

Safe Browsing

企业管理功能

一些 Google 服务

Google 自己的产品功能

所以，如果你自己下载 Chromium 源码编译一个浏览器出来，它不会和你从 Chrome 官网下载安装的 Chrome 完全一样。

九、Edge 为什么也和 Chrome 很像？

因为新版 Edge 也是基于 Chromium 开发的。大概可以理解成：

markdown 复制代码

                 Chromium
                     │
        ┌────────────┴────────────┐
        │                         │
      Chrome                    Edge
        │                         │
     Google                   Microsoft
        │                         │
 Google 服务             Microsoft 服务

底层很多东西是一样的。比如：

复制代码

Blink

V8

网络模块

多进程架构

很多 Web API

DevTools 的大量基础能力

所以前端开发的时候经常会发现：

一个网页在 Chrome 上正常，在 Edge 上通常也不会有太大问题。

因为它们底层共享了大量 Chromium 代码。当然，这不代表 Chrome 和 Edge 完全一样。微软依然会加入自己的：

复制代码

账号系统

UI

Copilot

收藏夹能力

企业管理

隐私策略

浏览器功能

所以更准确的说法是：

Chrome 和 Edge 使用了相同的 Chromium 底座，但上层产品不同。

十、Safari 和 Firefox 呢？

Safari 和 Firefox 就不是 Chromium 这一套了。

现在主流浏览器大致可以这样看：

浏览器	浏览器基础	渲染引擎	JavaScript 引擎
Chrome	Chromium	Blink	V8
Edge	Chromium	Blink	V8
Brave	Chromium	Blink	V8
Opera	Chromium	Blink	V8
Safari	WebKit	WebKit	JavaScriptCore
Firefox	Gecko	Gecko	SpiderMonkey

所以现在主流浏览器大体上可以看成几个阵营。

markdown 复制代码

浏览器
 │
 ├── Chromium / Blink
 │      ├── Chrome
 │      ├── Edge
 │      ├── Brave
 │      └── Opera
 │
 ├── WebKit
 │      └── Safari
 │
 └── Gecko
        └── Firefox

这也是为什么前端开发者做浏览器兼容测试的时候，通常不能只测 Chrome。最好至少关注：

复制代码

Chrome / Edge

Safari

Firefox

因为它们并不完全使用同一套浏览器实现。

十一、为什么 Chrome 里还有一堆 `webkit`？

前端开发者应该都见过这种代码：

css 复制代码

-webkit-transform: translateX(10px);

或者：

ruby 复制代码

::-webkit-scrollbar {
}

看到这里很多人都会奇怪: Chrome 不是 Blink 吗？为什么名字里面还有 webkit？

这是一个历史遗留问题, Blink 和 WebKit 本来就有血缘关系。历史可以非常粗略地画成：

复制代码

KHTML
  ↓
WebKit
  ↓
Blink

Chrome 早期使用的就是 WebKit。后来 Google 在 2013 年从 WebKit 中分出了 Blink。从那以后：

复制代码

Safari
  ↓
WebKit

Chrome
  ↓
Blink

但是很多历史兼容代码并没有马上消失。所以今天的 Chrome 里面依然能看到大量 webkit 这个名字。

这不是因为 Chrome 今天仍然直接使用 WebKit。更多是历史兼容问题。

十二、Chrome 其实不是"一个程序"

这里再多往底层走一步, 很多人会潜意识认为：

markdown 复制代码

Chrome.exe
    ↓
运行网页

实际上，现代 Chrome 是一个典型的多进程浏览器。你打开 Chrome 的任务管理器，就会看到很多进程。大概像这样：

arduino 复制代码

Browser Process
      │
      ├── Renderer Process
      ├── Renderer Process
      ├── GPU Process
      ├── Network Service
      ├── Extension Process
      └── Utility Process

也就是说，Chrome 不是什么事情都塞进一个进程。比如网页渲染，通常会运行在 Renderer Process 里面。网络有自己的服务, GPU 有自己的进程, 扩展也可能运行在独立进程。

这么设计有很多好处。最直观的一点就是：

某一个网页崩了，不一定把整个浏览器一起带崩。

比如：

css 复制代码

Renderer A  💥

Renderer B  正常

Renderer C  正常

Browser     正常

现代浏览器能做到比较好的稳定性和安全性，多进程架构是一个很重要的原因。

十三、再回头看 Chrome DevTools

平时我们按 F12 打开的 Chrome DevTools，其实就是观察 Chromium 各种能力的一个窗口。

比如：

复制代码

Elements

背后会涉及 DOM、CSS、Blink。

arduino 复制代码

Console

大量能力和 JavaScript、V8 有关。

复制代码

Network

对应 Chromium 的网络模块。

复制代码

Performance

会涉及：

复制代码

Blink

V8

Renderer

GPU

页面布局

绘制

Application

里面又会看到：

复制代码

Cookie

LocalStorage

IndexedDB

Cache Storage

Service Worker

所以前端开发者其实每天都在和 Chromium 打交道, 只是平时没有特意去想这些东西叫什么。

十四、最后做一次总结

如果前面的内容感觉有点多，最后只需要记住下面四句话。

第一，Chromium

Chromium 是：

Google 发起并长期主导的开源浏览器工程。

它不是简单的"渲染内核", 而是包含了构建现代浏览器需要的大量基础设施。

第二，Chrome

Chrome 是：

Google 基于 Chromium 打造的浏览器产品。

可以简单理解成：

ini 复制代码

Chrome
=
Chromium
+
Google 的产品能力

第三，Blink

Blink 是：

Chromium 使用的网页渲染引擎。

主要负责：

css 复制代码

HTML

CSS

DOM

布局

绘制

第四，V8

V8 是：

Chromium 使用的 JavaScript 引擎。

主要负责执行：

javascript 复制代码

JavaScript

WebAssembly

最终关系可以画成这样：

css 复制代码

                         Chrome
                           │
                     Google 产品层
                           │
                       Chromium
                           │
          ┌────────────────┼────────────────┐
          │                │                │
        Blink              V8           其他模块
          │                │                │
   HTML / CSS / DOM    JavaScript       Network
                                       GPU
                                       Storage
                                       Sandbox
                                       DevTools
                                       多进程架构
                                       ...

以后再听到"Chrome 内核""Chromium 内核"这种说法时，就可以先问自己一句：

对方说的到底是 Chromium，Blink，还是 V8？

把这几个概念分开之后，很多浏览器相关的问题都会一下子清楚很多。

Chromium和Chrome到底是什么关系?

一、先记住一句话

二、Chromium 是谁开发的？

三、为什么说"Chromium 内核"这个词不太准确？

四、那真正的"浏览器内核"是谁？

五、Blink 是什么？

六、V8 又是什么？

七、所以 Chromium、Blink、V8 到底是什么关系？

八、Chrome 又处在哪一层？

九、Edge 为什么也和 Chrome 很像？

十、Safari 和 Firefox 呢？

十一、为什么 Chrome 里还有一堆 webkit？

十二、Chrome 其实不是"一个程序"

十三、再回头看 Chrome DevTools

十四、最后做一次总结

第一，Chromium

第二，Chrome

第三，Blink

第四，V8

十一、为什么 Chrome 里还有一堆 `webkit`？