幕雪

浏览器内核有几种 是什么、在哪用、怎么工作


浏览器内核有几种？

当我们使用浏览器访问网页时，背后默默工作的核心组件就是浏览器内核。它负责解析网页代码、排版内容并最终呈现到屏幕上。理解浏览器内核不仅能帮助我们更好地选择浏览器，也能揭示网页是如何呈现在眼前的。那么，目前主流的浏览器内核究竟有几种呢？

浏览器内核，到底是什么？

简单来说，浏览器内核（也称为渲染引擎或排版引擎）是浏览器中负责解析和渲染网页内容的核心模块。它主要处理 HTML、CSS 等网页标记语言，将它们转换成可视化图像，并进行布局和绘制。

需要注意的是，很多人会将“浏览器内核”与“JavaScript 引擎”混淆。渲染引擎负责页面结构的解析、布局和渲染，而 JavaScript 引擎则专门负责解析和执行网页中的 JavaScript 代码，处理网页的动态行为和交互。虽然它们通常紧密协作，并且是浏览器中的关键组成部分，但它们是功能不同的模块。

浏览器内核的核心职责

一个典型的浏览器内核主要执行以下几个关键步骤来将网页代码转化为屏幕上的显示内容：

  • 解析（Parsing）： 读取 HTML 代码并构建一个 DOM (Document Object Model) 树，同时解析 CSS 代码并构建 CSSOM (CSS Object Model) 树。
  • 构建渲染树 (Render Tree)： 将 DOM 树和 CSSOM 树合并，创建一个渲染树。渲染树只包含需要显示在屏幕上的节点，并包含每个节点的所有计算样式。
  • 布局 (Layout / Reflow)： 根据渲染树，计算屏幕上每个可见元素的确切位置和大小。这个过程确定了元素之间的空间关系和最终的几何属性。
  • 绘制 (Painting / Repaint)： 使用操作系统提供的图形接口，将布局计算出的位置和大小信息，以及元素的样式信息，绘制到屏幕的像素上。
  • 合成 (Compositing)： 将绘制好的多个图层合并，最终在屏幕上显示出完整的网页。

除了这些渲染步骤，浏览器内核还需要处理图片解码、字体渲染、处理用户输入（如鼠标点击、键盘输入）等任务。

目前主流的浏览器内核有几种？

从网页渲染和排版引擎的角度来看，当前互联网世界中最具影响力的、仍在活跃发展并被广泛使用的主要浏览器渲染引擎可以归为**三大类**（或说主要源自三个不同的技术路线）。

这三大类是：

  1. Blink
  2. Gecko
  3. WebKit

尽管历史上出现过许多其他渲染引擎（如微软的 Trident 和 EdgeHTML），但随着技术发展和市场变迁，它们的影响力已大幅下降，甚至已被更新的引擎取代。例如，微软 Edge 浏览器已经从 EdgeHTML 内核转向了 Blink 内核，这进一步巩固了 Blink 在市场的份额。

主流浏览器内核的详细介绍：它们分别是什么？

1. Blink 内核

是什么： Blink 是一个开源的浏览器渲染引擎，最初由 Google 在 2013 年从 WebKit 项目中分离出来。它由 Google 主导开发，并得到了 Opera Software、Intel、Samsung 等多家公司的贡献。

在哪用： 它是目前使用范围最广的浏览器内核。

  • Google Chrome（桌面版和移动版）
  • Microsoft Edge（基于 Chromium 的新版本）
  • Opera 浏览器（新版本）
  • Brave 浏览器
  • Vivaldi 浏览器
  • 以及许多基于 Chromium 项目开发的第三方浏览器和应用，特别是在中国市场，许多“双核”浏览器的高速模式都使用了 Blink。

怎么工作/特点： Blink 持续快速发展，对新的 Web 标准支持积极且迅速。它与 Google 的 V8 JavaScript 引擎紧密集成，共同构成了 Chromium 项目的核心。Blink 的设计注重性能、稳定性和对现代 Web 特性的支持。它的多进程架构（与其他组件一起）使得单个标签页崩溃通常不会影响整个浏览器。

2. Gecko 内核

是什么： Gecko 是由 Mozilla 基金会开发和维护的开源浏览器渲染引擎。它是少数几个不依赖 WebKit 或 Blink 的独立发展的主流引擎，拥有自己的代码库和开发体系。

在哪用：

  • Mozilla Firefox（桌面版和移动版）
  • 以及一些基于 Firefox 源代码的衍生浏览器。

怎么工作/特点： Gecko 强调开放标准和跨平台兼容性。Mozilla 基金会作为一个非营利组织，其目标之一是维护 Web 的开放性和互操作性，Gecko 的开发也遵循这一理念。Gecko 在 Web 标准的规范性实现方面通常表现良好，并且通过“Quantum”等项目持续进行性能优化，以提升页面加载速度和响应能力。

3. WebKit 内核

是什么： WebKit 最初由苹果公司从 KDE 项目的 KHTML 和 KJS 引擎分支而来，是 macOS 和 iOS 系统中 Safari 浏览器的核心引擎。尽管 Blink 从 WebKit 分离，但 WebKit 项目本身仍在由苹果等公司独立开发和维护。

在哪用：

  • Apple Safari（macOS 和 iOS 设备上的默认浏览器）
  • 许多 iOS 和 macOS 应用中用于显示网页内容的内置 Web 视图（如 UIWebView 和 WKWebView）。
  • 一些旧版或特定市场的第三方浏览器可能仍在使用 WebKit 或其早期版本作为高速模式内核（但现已较少见）。

怎么工作/特点： WebKit 在苹果生态系统中扮演着关键角色。它针对苹果设备的性能和省电特性进行了深度优化。WebKit 的渲染表现直接影响着数以亿计的苹果设备用户的网页浏览体验。尽管不如 Blink 普及，但在移动端（特别是 iOS 平台）Web 视图方面，WebKit 仍然是事实上的标准。

关于 Trident 和 EdgeHTML (历史回顾)

Trident： 这是微软 Internet Explorer (IE) 浏览器自 IE4 以来的渲染引擎。在 Web 标准化进程中，Trident 一度占据主导地位，但也因其对标准的私有扩展和一些渲染特性而成为网页开发者兼容的重点和难点。随着 IE 浏览器的衰落，Trident 的市场份额和影响力已微乎其微。

EdgeHTML： 这是微软为 Windows 10 系统中推出的第一代 Microsoft Edge 浏览器开发的新内核，旨在取代 Trident，提供更好的 Web 标准支持和性能。然而，面对 Chromium 的强大生态系统和开发优势，微软最终决定放弃 EdgeHTML，将新版 Edge 浏览器完全基于 Chromium 项目（即使用 Blink 内核）开发。

了解这些历史可以帮助我们理解当前主流浏览器内核格局是如何形成的。

浏览器内核的应用场景：它们在哪儿用？

浏览器内核的应用范围远不止我们日常独立安装和使用的浏览器程序。它们被广泛嵌入到各种软件和系统中：

  • 系统内置浏览器与 Web 视图： 智能手机、平板电脑操作系统内置的浏览器（如 iOS Safari、Android 的 Chrome）以及应用内部用于显示网页内容的 Web 视图组件（如 iOS 的 WKWebView，Android 的 WebView）。这些 WebView 是许多应用内嵌 H5 页面、显示公告、用户协议或实现混合开发的基础。
  • 桌面应用的网页内容展示： 许多桌面应用程序使用浏览器内核来渲染部分用户界面或显示应用内的帮助文档、更新日志等。例如，Electron 框架就允许开发者使用 Web 技术构建桌面应用，其底层就使用了 Chromium/Blink。
  • 电子阅读器、新闻应用等： 一些阅读应用或新闻客户端会使用浏览器内核来渲染格式丰富的文章内容。
  • 游戏平台与应用商店： 某些游戏启动器或应用商店的客户端可能会利用浏览器内核来显示商店页面、新闻或内嵌社区内容。
  • 物联网 (IoT) 设备： 某些智能设备、智能电视的界面或内嵌应用可能也会使用轻量级的浏览器内核来呈现内容。

这些广泛的应用场景使得主流浏览器内核的兼容性和性能变得尤为重要。

为什么浏览器内核对使用者和开发者都很重要？

浏览器内核的选择和其实现细节，对最终用户和网页开发者都有直接影响：

对于普通用户来说：

  • 网页加载速度和流畅度： 不同内核在解析、布局、绘制和执行脚本的效率不同，直接影响页面打开的快慢和交互的流畅性。
  • 网页兼容性与显示效果： 内核对 Web 标准的支持程度和特有实现差异，可能导致同一个网页在不同浏览器中显示不同，甚至出现布局错乱、功能失效等问题。
  • 安全性： 内核的安全性漏洞是网络攻击的常见目标。内核的及时更新和安全防护机制直接关系到用户的网络安全。
  • 功能支持： 对新的 Web 技术和 API 的支持速度，决定了用户能否正常使用依赖这些新特性的网站或网络应用。

对于网页开发者来说：

  • 开发和测试工作量： 开发者需要确保网站在主流内核上都能良好运行，这需要进行跨浏览器测试，并处理可能出现的兼容性问题。
  • 性能优化： 了解不同内核的渲染管线和性能特点，有助于开发者编写更高效的 HTML、CSS 和 JavaScript 代码，进行更精细的性能优化。
  • 特性利用： 开发者需要知道哪些新的 Web 技术可以在哪些内核上安全使用，或者需要采取哪些兼容措施。

因此，选择一个高性能、兼容性好、安全性高的浏览器内核，无论对于提升用户体验还是降低开发成本都至关重要。

网页是如何通过浏览器内核呈现出来的？（怎么工作）

为了更具体地了解浏览器内核的工作，我们可以深入探讨其核心的渲染管线（Rendering Pipeline）。这是一个将原始代码转化为屏幕像素的多阶段过程：

  1. 加载 (Loading)：

    • 浏览器首先通过网络模块下载 HTML 文件、CSS 文件、JavaScript 文件、图片、字体等资源。
    • 网络模块会根据资源的类型和优先级进行调度下载。
  2. 解析 (Parsing)：

    • HTML Parser: 内核的 HTML 解析器逐字节读取 HTML 原始代码。它会根据 HTML 规范将代码解析成一个个标记（tokens），然后根据标记构建一个树形结构，这就是 DOM (Document Object Model) 树。DOM 树代表了网页的结构和内容。如果在解析过程中遇到 `