下载

github.com/chromium/ch…

参考文档

www.chromium.org/developers/… www.chromium.org/developers/…

html.spec.whatwg.org/

架构图

目录结构

build: 包含了 Chromium 编译和构建系统的代码和配置文件。
base 通用代码集，基础组件，包含字符串、文件、线程、消息队列等工具类集合。
cc Chromium compositor 的缩写，负责渲染合成。
chrome: 包含了浏览器的 UI 实现，包括控件、工具栏、菜单等。
components: 提供了 Chromium 浏览器中的关键组件，例如 PDF 阅读器、网络库、安全模块等。
content: 包含了 Chromium 浏览器核心内容的实现，其中包括了HTML渲染引擎Blink、浏览器进程、渲染进程等。
gin: 实现了 V8 引擎的 C++ 绑定层，开发者可以通过 C++ 代码调用 V8 引擎的 API。
media: 包含了媒体播放相关的实现，例如音频、视频播放、截屏等。
net: 包括了网络协议的实现，例如HTTP、HTTPS等。
sandbox: 提供了沙箱机制，可以隔离浏览器进程和操作系统的交互。
services: 包含了 Chromium 浏览器的服务组件，例如身份验证、账户管理、定位服务等。
third_party: 编译 Chromium 所需的第三方依赖库，例如 V8 引擎、FFmpeg、Libpng 等。
tools: 一些开发和构建工具，例如代码格式工具、代码静态分析工具、模拟器等。
ui: 包含了 Chromium 浏览器的 UI 组件，例如 ChromeOS 窗口管理器、桌面通知等。
skia : 谷歌的 skia 图形库。这块项目是给 Android 使用的。ui/gfx 中对它进行了封装。

content

browser: 实现了浏览器与渲染进程之间的 IPC 通信；
child: 实现了渲染进程主线程相关的代码；
common: 包含了一些通用的代码，例如进程间通信的封装、数据结构、资源管理等；
gpu: 实现了与 GPU 相关的代码，例如 GPU 进程与渲染进程之间的 IPC 通信、基于 GPU 加速的图形绘制等；
renderer: 实现了 Blink 渲染引擎的相关代码，例如 DOM 树、CSS 样式计算、页面渲染等；每个 tab 子进程的代码。它内嵌了 WebKit, 并通过 browser 进行 I/O 操作。
utility: 实现了一些工具类代码。

third_party\blink

文件夹路径 third_party\blink\renderer

浏览器的渲染引擎，用于解析和渲染网页

core: 包含了 Blink 处理 DOM、CSS、事件等核心功能的代码。
modules: 包含了各种 Web 标准模块的实现，例如画布（canvas）、媒体（Media）、Web Components 等。
platform: 提供了平台相关的实现，例如跨平台的设备输入输出、图片解码等。
public: 提供了公共接口和头文件，可以供其他组件或工具使用。
bindings: 存放了 JavaScript 到 C ++ 的绑定代码。
testing: 包含了 Blink 测试的所有代码，例如测试工具和测试用例。

third_party\blink\renderer\core

用于渲染 HTML、CSS 和 JavaScript 的代码。

bindings: 实现 JavaScript 到 C++ 的绑定，将 JavaScript 对象在 C++ 中实现。
css: 包含了用于解析和应用 CSS 样式的代码。
dom: 包含了用于解析和处理 DOM（文档对象模型）的代码。
html: 包含了用于解析和处理 HTML 标签的代码。
layout: 包含了用于对页面进行布局、计算样式和可视化渲染的代码。
loader: 实现了用于加载和解析资源文件的逻辑，包括 JavaScript、CSS、图片等。
page: 包含了用于表示网页和处理网页事件的代码。
xmlhttprequest：发起异步网络请求
input： input标签实现

third_party\blink\renderer\frame

是 Blink 中的一个核心目录，用于实现浏览器中的 frame 功能，包括框架和 iframe 的支持

dom_timer：定时器
dom_timer_coordinator：定时器
window_or_worker_global_scope：作用域

blink例子

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Hello, Blink Core!</title>
  </head>
  <body>
    <h1>Hello, Blink Core!</h1>
  </body>
</html>

1. 加载文件

首先，Blink 会通过网络栈进行网络请求，从网络上获取到这个网页的所有文件，包括 HTML 文件、CSS 文件、JavaScript 文件和图片等资源文件。在加载完毕后，Blink 就把这些文件存储在内存中，并在 core/loader 模块中进行解析。

2. HTML 解析

解析过程从 HTML 文件开始，Blink 会根据 HTML 标签的语法，逐个解析文件中的标签，生成相应的 DOM 节点。在 core/html 模块中，Blink 将会对 HTML 文件中的各个标签进行解析，生成对应的 HTML 元素，例如 head 和 body 元素，以及 h1 元素等等。

3. CSS 解析

当 Blink 解析完 HTML 文件后，就会开始解析 CSS 文件。在 core/css 模块中，Blink 会对 CSS 文件进行解析，生成相应的 CSS 规则，对应到 DOM 树形结构中的每一个节点，计算每个元素最终的样式。

4. 渲染布局

在 core/layout 模块中，Blink 需要根据计算好的元素样式和尺寸，计算出网页中各个元素的位置和大小，并生成对应的渲染树，最终在屏幕上将网页渲染出来。

Chromium 源码学习

下载