幕雪

chrome内核拓展的内容


在探讨“Chrome内核”时，我们主要指的是为其提供动力的渲染引擎部分。这个引擎负责解析网页代码、执行脚本并最终将内容呈现在用户屏幕上。对于Chrome浏览器而言，这个核心技术目前是其自主研发的Blink。

什么是 Chrome 内核 (Blink)？

Blink 是 Google 开发的一款开源网页渲染引擎。它于2013年从另一个著名的开源渲染引擎WebKit项目中分支出来。简而言之，Blink 是浏览器中负责将 HTML、CSS 和 JavaScript 代码转换为你在浏览器窗口中看到的像素和交互界面的核心组件。

Blink 的主要职责包括：

  • 解析：读取和理解 HTML、CSS 等文件格式。
  • 构建 DOM 和 CSSOM：将 HTML 结构转化为文档对象模型 (DOM)，将 CSS 规则转化为 CSS 对象模型 (CSSOM)。
  • 样式计算与布局：根据 CSS 规则计算每个元素的最终样式，并确定它们在屏幕上的位置和大小，构建渲染树。
  • 绘制：根据布局结果，将元素的视觉表现绘制到内存中的位图上。
  • 合成：将不同的绘制层组合起来，形成最终的图像呈现给用户。
  • JavaScript 执行：与 V8 JavaScript 引擎协作，执行页面中的脚本，响应用户交互，并可能触发页面的重新渲染。

Blink 是一个庞大且复杂的软件系统，它遵循W3C等标准化组织发布的Web标准，确保网页在不同的浏览器上尽可能一致地显示和运行。

为什么 Google 创建并使用 Blink？

Google 选择从 WebKit 分支创建 Blink，背后有几个核心原因，主要围绕技术和架构的优化：

  • 架构差异的整合：Chrome 浏览器设计之初就采用了多进程架构，即每个标签页通常运行在一个独立的进程中，以提高稳定性和安全性。WebKit 的设计与这种多进程模型存在一些不兼容或不够灵活的地方。创建 Blink 使 Google 能够更好地将渲染引擎与 Chrome 的多进程架构深度融合，优化进程间通信和资源管理。
  • 移除旧代码与简化：WebKit 是一个历史悠久的项目，包含了对一些旧有技术的支持。Google 希望在 Blink 中移除这些不再需要或很少使用的组件，简化代码库，提高代码的可维护性和开发效率。
  • 加速创新与开发速度：分支后，Google 可以根据自己的需求和路线图更快地迭代和实现新的 Web 标准和功能，而不必完全受限于 WebKit 社区的决策过程。这使得 Chrome 能更快地引入最新的 Web 技术。
  • 更紧密的集成：Blink 可以与 Chrome 的其他组件（如 V8 JavaScript 引擎、网络栈、图形栈等）进行更紧密的集成和优化，从而提升整体的性能和用户体验。

因此，创建 Blink 是 Google 为了更好地控制其核心技术栈，优化浏览器性能和架构，并加速 Web 技术创新而做出的战略性决策。

Blink 在哪里被使用？

虽然 Blink 最初是为 Google Chrome 创建的，但作为一个开源项目，它也被其他许多浏览器和应用所采用：

  • Google Chrome：这是 Blink 最主要的宿主和驱动力。
  • Microsoft Edge (基于 Chromium)：自2019年底开始，微软将Edge浏览器从自研的EdgeHTML引擎切换到了基于Chromium（其中就包含Blink）的版本。
  • Opera：Opera浏览器很早就从Presto引擎切换到了基于Chromium。
  • Brave, Vivaldi, DuckDuckGo Privacy Browser等：这些第三方浏览器很多都是基于Chromium项目构建的，因此自然也使用了Blink作为渲染引擎。
  • Electron：这是一个用于构建桌面应用程序的框架，它使用 Chromium 作为其核心，因此用 Electron 构建的应用（如 VS Code, Slack 等）也使用了 Blink 进行界面渲染。
  • Android System WebView：在许多Android设备上，用于在应用程序内显示网页内容的系统组件就是基于Chromium和Blink的。

这意味着 Blink 的影响范围远远超出了 Chrome 浏览器本身，成为了当今 Web 生态中占据主导地位的渲染引擎之一。

Blink 由多少部分组成？它是如何工作的？

“多少部分”很难给出一个确切的数字，因为它是一个复杂的系统，可以从不同的粒度进行划分（如模块、类、函数等）。更具意义的是理解它的主要逻辑阶段和组件。Blink 的核心工作流程，即将网页代码转化为屏幕显示，可以概括为以下主要阶段：

  1. 解析 (Parsing)

    Blink 中的 HTML 解析器负责将 HTML 文本转化为一个由节点组成的树形结构，这就是文档对象模型 (DOM)。同时，CSS 解析器处理 CSS 文件和内联样式，生成 CSS 对象模型 (CSSOM)。

  2. 样式计算 (Style)

    将 DOM 树与 CSSOM 树结合，Blink 计算出每个 DOM 节点的最终计算样式 (Computed Style)。这是一个复杂的过程，涉及到样式规则的匹配、层叠和继承。

  3. 布局/排版 (Layout/Reflow)

    根据计算出的样式和 DOM 结构，Blink 构建一个渲染树 (Render Tree)，也常被称为布局树 (Layout Tree)。渲染树只包含需要显示的节点。接下来，布局引擎遍历渲染树，计算每个节点在屏幕上的确切位置和大小。这个过程是递归的，会考虑盒模型、定位、浮动等各种 CSS 属性。布局过程的结果是确定了屏幕上所有可见元素的几何信息。

  4. 绘制 (Paint)

    在确定了元素的布局信息后，Blink 开始将每个元素的视觉内容绘制到内存中的绘制层 (Paint Layer) 上。这个阶段并不直接在屏幕上绘制，而是生成一系列绘制指令（类似于绘图的步骤）。不同的元素可能会被绘制到不同的层上，例如有透明度、3D 变换或will-change属性的元素可能会被提升到单独的合成层。这一步会生成一个绘制记录列表。

  5. 合成 (Compositing)

    这是将绘制层组合起来形成最终屏幕图像的阶段。Blink 有一个专门的合成器 (Compositor) 线程。合成器根据绘制层的信息构建一个层树 (Layer Tree)。然后，它利用 GPU 来高效地合并这些层，生成最终的像素，并发送到屏幕上显示。合成的好处是可以独立于主线程处理页面滚动和动画，提高流畅度，尤其是在元素被提升到独立层时。

这个流程并非严格线性的，JavaScript 可以修改 DOM 和 CSSOM，从而触发重新计算样式、重新布局甚至重新绘制和合成。理解这个流程对于Web开发者进行性能优化至关重要。

如何与 Blink 交互或优化？

普通用户通常不需要直接与 Blink 交互，但开发者可以通过多种方式影响和观察 Blink 的行为，以优化网页性能和体验：

  • 使用浏览器开发者工具 (Developer Tools)

    Chrome 浏览器自带的开发者工具是理解和优化 Blink 行为最强大的工具。通过它，你可以：

    • Elements 面板：查看 DOM 树和每个元素的计算样式，理解样式规则如何应用。
    • Performance 面板：记录页面的加载和运行过程，详细查看解析、样式计算、布局、绘制和合成等各个阶段的耗时，找出性能瓶颈。你可以看到渲染管道的各个阶段在时间轴上的表现。
    • Performance Monitor：实时监控 CPU、JS 堆内存、DOM 节点数量、布局/重绘次数等指标。
    • Layers 面板：可视化页面的合成层结构，理解哪些元素被提升到了独立层，以及为什么。这对于理解合成器的优化非常有用。
    • Rendering 面板：可以打开各种调试选项，例如高亮显示重绘区域 (Paint flashing)、布局偏移 (Layout Shifts) 等，直观地观察页面渲染过程中的开销。
  • 编写高性能的 Web 代码

    开发者编写的 HTML、CSS 和 JavaScript 代码直接影响 Blink 的工作效率：

    • 优化 CSS 选择器：使用更简单、高效的 CSS 选择器可以加快样式计算速度。
    • 避免不必要的布局触发：频繁读取或修改会影响元素几何属性的样式（如 width, height, left, top, border 等）会强制 Blink 重新进行布局计算 (Reflow/Layout)，这是性能开销很大的操作。应尽量批量修改样式或使用 CSS 动画/变换来避免布局触发。
    • 减少绘制区域和次数：改变颜色、背景等只会触发重绘 (Repaint/Paint)，通常比布局开销小，但也应尽量减少。利用 CSS 属性如 transform 和 opacity 进行动画，可以在独立层上通过合成器完成，开销最小。
    • 管理 JavaScript 执行：长时间运行的 JavaScript 会阻塞主线程，导致渲染过程暂停，造成页面卡顿。应优化脚本性能，使用 Web Workers 处理计算密集型任务，并合理利用 requestAnimationFrame 来同步 JS 操作与浏览器渲染帧。
    • 利用硬件加速：合理使用 CSS 属性 (如 transform, opacity, will-change) 可以提示 Blink 将元素提升到合成层，利用 GPU 进行渲染，提高动画和滚动的流畅度。
  • 参与开源社区 (如果对底层感兴趣)

    Blink 是一个开源项目。对底层渲染技术感兴趣的开发者可以研究其源码，参与社区讨论，甚至贡献代码。这需要深入理解 C++ 和 Blink 的内部架构。

通过这些方式，开发者可以更好地理解 Blink 如何处理网页内容，并采取有针对性的措施来提高页面的加载速度、响应性和视觉流畅度。


chrome内核