常见浏览器内核有哪些 面试整理

• IE: trident 内核
• Firefox：gecko 内核
• Safari: webkit 内核
• Opera: 以前是 presto 内核，Opera 现已改用 Google - Chrome 的 Blink 内核
• Chrome: Blink (基于 webkit，Google 与 Opera Software 共同开发)

「内核」到底指什么

这个词在中文技术语境里被用得很含混。严格说，一个浏览器有两个引擎：

• 渲染引擎（layout / rendering engine） — 负责解析 HTML 和 CSS、构建 DOM 树和样式规则、算布局、绘制像素。上面列的 Trident、Gecko、WebKit、Blink、Presto 都是这一类。
• JavaScript 引擎 — 负责解析和执行 JS。这是独立的另一套东西。

面试里说「浏览器内核」，默认指渲染引擎，但被追问「那 V8 是什么」时得能分清。两者的对应关系：

这几个引擎的血缘关系

这条线索比记名字有用得多，因为它解释了为什么现在的兼容性问题长这个样子。

起点是 1998 年 KDE 项目的 KHTML。2001 年苹果做 Safari，从 KHTML fork 出来改成了 WebKit。2008 年 Google 做 Chrome，直接用了 WebKit，但 Google 和苹果对架构方向分歧越来越大——尤其是多进程模型，Chrome 想要的沙箱隔离在 WebKit 的抽象层里很难做干净。2013 年 Google 从 WebKit fork 出 Blink，Opera 跟着一起转过来（Opera 在 2013 年放弃了自研的 Presto）。

所以 Blink 和 WebKit 是同源的兄弟，两边至今还共享大量代码痕迹，这就是为什么 -webkit- 前缀在 Chrome 里也能用——Blink 为了兼容存量网页，保留了一大批 -webkit- 前缀属性，有些甚至成了事实标准（比如 -webkit-line-clamp 至今没有无前缀的替代）。

另一条线是微软。Trident 从 IE4（1997）一直用到 IE11，是「IE 兼容性噩梦」的主体。微软在 2015 年 Edge 上把 Trident fork 成 EdgeHTML，砍掉了历史包袱，但市场份额始终起不来，Web 开发者也不愿意为它单独适配。2020 年微软放弃 EdgeHTML，Edge 转投 Chromium，从此微软退出了渲染引擎自研的赛道。

Gecko 是 Netscape 在 1997 年启动的项目，后来交给 Mozilla，是现在唯一还在独立发展的非 Chromium 非 WebKit 引擎。Firefox 从 2016 年开始用 Rust 重写 Gecko 的部分组件，这个项目叫 Servo，产出的成果（并行样式计算引擎 Stylo、GPU 渲染后端 WebRender）被搬进了 Gecko，统称 Quantum。

现在的格局：实际只剩三个

2026 年的实情是三家：Blink、WebKit、Gecko。

Blink 占绝对多数。Chrome、Edge、Opera、Brave、Vivaldi、以及国内几乎所有浏览器（360、QQ、搜狗、UC）都是 Chromium 套壳。这意味着「兼容性测试」在很大程度上退化成了「测三个引擎」，而其中一个覆盖八成以上流量。

WebKit 的特殊性在 iOS。苹果的 App Store 规则长期要求 iOS 上所有浏览器必须用系统的 WebKit（通过 WKWebView），所以 iOS 上的 Chrome、Firefox、Edge 都只是换了个 UI 的 Safari。欧盟的 DMA 法规在 2024 年起要求苹果在欧盟境内开放第三方引擎，但落地范围有限。对前端的实际影响是：iOS 上遇到的兼容问题，本质都是 Safari 的问题，换浏览器测不出来。这也是移动端适配里最常踩的坑。

Gecko 的意义是防止单一引擎垄断。如果只剩 Blink，「Chrome 能跑」就等于「标准」，这是 IE6 时代的重演。所以 Firefox 的存在有超出份额的价值。

前端为什么要关心这个

知道一个特性该查谁的实现进度。遇到某个 API 不支持，直接去看 caniuse.com 的三列（Chrome / Safari / Firefox）就够了，不用再看 IE。而 Safari 落后是常态——CSS 的一些新特性、Web Push、部分 File API，Safari 都比 Chrome 慢几个大版本。

CSS 前缀的取舍。手写前缀已经过时了，正确做法是让工具根据目标浏览器列表自动加。用 Autoprefixer（PostCSS 生态）配合 .browserslistrc：

# .browserslistrc
> 0.5%
last 2 versions
not dead

或者写在 package.json 里：

{
  "browserslist": ["> 0.5%", "last 2 versions", "not dead"]
}

想确认这份配置实际命中哪些浏览器，直接跑：

npx browserslist

这套配置不只喂给 Autoprefixer，Babel 的 preset-env 和 Vite 的构建目标也读它，所以它是整个项目「兼容到哪一代」的唯一声明处。

特性检测优于 UA 判断。想根据浏览器做分支时，别去解析 navigator.userAgent——UA 字符串本身就是一段历史遗留的谎言（Chrome 的 UA 里同时出现 Mozilla、AppleWebKit、KHTML、Safari，就是为了骗过当年那些做 UA 嗅探的网站）。检测能力，不检测身份：

// 好：检测特性是否存在
if ('IntersectionObserver' in window) {
  // 用原生实现
} else {
  // 加载 polyfill
}

// 好：检测 CSS 属性支持
if (CSS.supports('backdrop-filter', 'blur(4px)')) {
  // ...
}

CSS 里对应的是 @supports：

.card {
  background: rgba(255, 255, 255, 0.8);
}

@supports (backdrop-filter: blur(10px)) {
  .card {
    backdrop-filter: blur(10px);
    background: rgba(255, 255, 255, 0.5);
  }
}

国内浏览器的双核问题。360、QQ 这类浏览器带「兼容模式」，会在 Trident 和 Blink 之间切换。如果你的页面被切进了 IE 内核，样式会崩得莫名其妙。可以在 HTML 头部声明强制走高速内核：

<meta name="renderer" content="webkit" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />

renderer 是 360 系的私有声明，X-UA-Compatible 是给 IE 用的（IE=edge 让 IE 用它支持的最高文档模式，chrome=1 是给装了 Chrome Frame 插件的老 IE 用的）。这两行现在写上去成本近乎为零，但能省掉一类难以复现的诡异 bug。