Chromium：学习，框架，一

Views框架

1. 由不同的UI空间组成不同的UI模块
   1. 比如标签栏，地址栏，书签栏等等
2. 最后由BrowserView这个主要UI容器将不同的UI模块组织到一起

View

概述

1. Chromium 的 Views 框架中的基本 UI 元素，是所有 UI 组件的基类

作用

1. 它提供了一个基础框架，用于创建和管理所有的 UI 控件，如按钮、文本框、面板等
2. 任何 UI 元素，如地址栏、标签页、工具栏，都是由 View 继承和实现的

理解

1. 所有UI控件的基类

Browser

概述

1. 负责管理浏览器会话的核心逻辑，是 Chromium 的主要控制类之一

作用

1. 它处理用户的交互逻辑、标签页管理、导航等不直接涉及 UI 绘制的任务
2. Browser 负责协调后台逻辑和前端显示之间的交互，但并不直接管理 UI

和BrowserView

1. Browser 是应用的业务逻辑层，与 BrowserView 进行通信
2. BrowserView 是它的视图表示，通过它们之间的交互来实现用户在 UI 上的操作

理解

1. 可以理解为一个管理器
   1. 负责与BrowserView的交互
   2. 负责与一些数据类的交互
   3. 复杂与一些辅助类的交互
2. 每个独立的浏览器窗口（包括拖曳标签页形成的单独窗口）都会对应一个独立的 Browser 实例

BrowserView

概述

1. BrowserView 是 View 的子类，是 Browser 的视图表示

作用

1. 它是 Chromium 中具体的浏览器窗口，是 Browser 的 UI 层次表现
2. BrowserView 包含了所有的视图组件，如工具栏、标签栏、地址栏等，并负责将它们排列在一起，形成完整的浏览器窗口

理解

1. BrowserView 是整个浏览器窗口的主要 UI 容器，管理并包含了所有用户肉眼可见的区域
   1. 包括标签栏、地址栏、书签栏、工具栏、状态栏等所有浏览器的视觉部分
2. 位于书签栏下面的区域是 BrowserView 中的一个子视图，通常被称为网页内容区域（WebContentsView）
   1. 这个区域专门用于显示用户访问的网页内容
3. 每个独立的浏览器窗口（包括拖曳标签页形成的单独窗口）都会对应一个独立的 BrowserView 实例

WebContents

概述

1. WebContents 是 Chromium 中用于管理网页内容和浏览会话的核心类
2. 它代表了浏览器中的一个标签页或嵌入式网页视图，负责控制页面的加载、导航、渲染和与用户交互的逻辑
   1. 处理页面的导航（如前进、后退、刷新）和历史记录
   2. 负责与渲染进程进行通信，发送绘制指令、接收渲染结果、处理页面脚本执行等
   3. 处理用户的输入事件（如点击、键盘输入）和 JavaScript 事件（如脚本执行、网络请求等）

理解

1. 每个标签页都有自己的 WebContents 实例，负责管理该标签页内的网页内容，包括加载、渲染、导航和与用户交互
2. Browser 管理一个 WebContents 列表，每个 WebContents 对应一个打开的标签页或窗口

WebContentsView

概述

1. WebContentsView 是 WebContents 的视觉表示层，是 WebContents 在浏览器窗口中的显示部分
2. 它负责在屏幕上呈现由 WebContents 管理的网页内容
3. WebContentsView 管理网页内容在浏览器 UI 中的位置和大小，将渲染进程生成的页面内容显示在正确的区域
4. 捕获用户在页面上的交互（如滚动、点击），并将这些交互传递回 WebContents 进行处理

图示

MVC模式

View（视图）部分

1. BrowserView 及其子视图
2. View 和它的子类（包括 BrowserView）构成了 UI 的表现层，负责用户界面的展示和布局
3. 负责所有的绘制、布局和用户交互
   1. BrowserView 是主窗口的顶层视图，内部包含其他的视图组件如标签栏、地址栏和书签栏
4. 视图组件之间的组合使得用户界面模块化、灵活，并且易于维护和扩展

Controller（控制器）部分

1. Browser
2. Browser 类扮演了控制器的角色，负责处理用户输入（如导航、标签页操作）并执行相应的业务逻辑
3. 处理后台的所有业务逻辑，如加载页面、管理会话、处理导航请求等，并将状态和数据同步到 View
4. Browser 不直接参与 UI 的绘制，它充当 View 和应用程序逻辑（如页面加载、网络请求等）之间的桥梁

Model（模型）部分

1. 各种数据管理类
2. Model 负责管理应用的数据和状态，比如网页内容、历史记录、书签等
3. 在 Chromium 中，Model 层包含了许多数据管理和状态维护的类，
   1. 虽然这些类不是集中在一个单独的 Model 类中，但它们负责维护和提供应用逻辑需要的数据
4. Model 层与 Browser 交互，由 Browser 控制并反馈给 View，确保视图能够正确反映当前的数据状态

网页访问详细

UI到Browser

1. 用户在地址栏（Omnibox）输入网址并按下回车键
2. BrowserView 捕获到用户的输入事件，并将请求传递给 Browser

Browser

1. Browser 负责接收导航请求，并根据输入的 URL 生成一个导航任务
2. Browser 不直接进行网络请求，而是将导航任务发送给网络服务模块，通常由网络进程（Network Service）处理

网络进程

1. 网络进程负责处理实际的 HTTP 请求
2. 它与外部服务器通信获取网页的 HTML、CSS、JavaScript 等资源

渲染进程

1. 网络进程将获取到的数据传递给渲染进程
2. 渲染进程负责对 HTML 进行 DOM 解析，构建 DOM 树、CSSOM 树，并将它们结合成渲染树
   1. 具体如下：
   2. Blink渲染引擎先解析HTML和CSS，生成DOM树和CSSOM树
   3. DOM树和CSSOM树合并成渲染树
      这个树描述了页面中所有可见元素及其样式
   4. 在这个过程中，V8 引擎负责执行 JavaScript 代码
   5. 当 JavaScript 修改了 DOM 或 CSS 时，渲染树会被重新计算（可能触发 Reflow 和 Repaint），并更新页面显示
   6. 最后，渲染引擎(Blink)将渲染树的内容划分为多个图层（Layers）
      图层的区分由一些属性决定，如 position: fixed、z-index、3D 变换等
3. 渲染进程将图层中的内容分成绘制命令
   1. 关于绘制命令，由Blink引擎的Paint和Display模块完成的
   2. Blink 的 Paint 模块会将图层内容解析为绘制命令（Display Items）
      这些命令详细描述了每个图层中需要绘制的内容（如形状、颜色、文本等）
   3. 这些 Display Items 被组织成 Display Lists，作为图层的绘制计划
   4. 通过 IPC（进程间通信）将 Display Lists 和合成指令发送给 GPU 进程

图块生成和合成

1. GPU 进程接收到 Display Lists 后，通过图形库（如 Skia）执行绘制命令，将这些命令具体化为图块上的内容
2. 这些绘制操作在 GPU 上执行，生成各个图块的位图数据
3. GPU 进程中的合成器（Compositor）将绘制好的图块合成到相应的图层上
4. 之后，合成器继续将所有图层按照顺序、透明度、变换等信息进行合成，生成完整的页面图像
5. 最终合成的页面图像会被直接放入显卡的帧缓冲区

浏览器进程

1. 渲染进程将绘制结果提交给浏览器进程，浏览器进程中的 Browser 接收到渲染完成的通知
   1. 浏览器进程接收到图像数据后，通知 Browser 进行处理
2. Browser 通知 BrowserView 更新页面显示
3. 最终，BrowserView 将新的页面内容显示在 WebContentsView 中

进程角色

浏览器进程

1. 主进程，负责整个浏览器的管理和控制，是 Chromium 的核心控制中心
2. 负责 UI 显示、用户输入处理、渲染进程和网络进程的管理、数据持久化（如书签、历史记录）、安全管理等
3. 浏览器进程是其他所有进程（如渲染进程、网络进程）的协调者，负责进程间通信和资源管理

渲染进程

1. 专注于页面内容的渲染，负责执行 Blink 和 V8，引擎对 HTML、CSS、JavaScript 的处理、DOM 操作和页面绘制
2. 渲染网页内容、执行 JavaScript、处理用户交互（如点击和滚动）等
   1. 点击指的是用户通过鼠标或触摸屏点击网页上的某个元素（如按钮、链接、图片等）
   2. 当用户点击页面时，事件会首先由渲染进程捕获
   3. 渲染进程中的 JavaScript 引擎（V8）会根据事件传播机制（捕获、目标、冒泡阶段）处理这些点击事件
   4. 如果 JavaScript 注册了点击事件处理函数（例如 onclick 事件），V8 会执行这些回调，可能会触发页面的变化
   5. 滚动指的是用户通过鼠标滚轮、滑动手势或拖动滚动条等方式上下或左右移动页面内容的行为
   6. 当用户滚动页面时，滚动事件会由渲染进程捕获
   7. 渲染进程会调整页面的显示区域，计算哪些内容需要显示或隐藏
   8. 如果 JavaScript 中有与滚动相关的事件监听器（如 onscroll），V8 会执行这些回调，可能会触发额外的操作（如加载更多内容、触发懒加载、动画效果等）
   9. 渲染进程会通过合成滚动（composited scrolling）优化滚动的性能，使滚动更加流畅和响应迅速
3. 渲染进程在沙盒环境中运行，与主进程隔离，增强了安全性和稳定性
4. 渲染进程捕获用户操作的原因
   1. 渲染进程专门负责渲染网页内容和处理用户的交互，这包括执行 HTML、CSS、JavaScript 代码，以及响应用户在页面上的操作（如点击、滚动、键盘输入等）
      由于渲染进程直接与页面内容打交道，因此最合适也最直接的就是它来捕获这些用户操作
   2. 渲染进程运行在一个受限的沙盒环境中，与操作系统的其余部分严格隔离
      这种隔离使得即使网页包含恶意代码，渲染进程中的代码也很难对用户的系统产生危害
      沙盒限制了渲染进程对系统资源的访问权限，比如文件系统、网络和其他敏感资源，最大程度减少了攻击面
      因为渲染进程在沙盒中，即便用户浏览了恶意网页或执行了不可信的 JavaScript，风险也被限制在渲染进程内部，避免了直接对浏览器主进程或操作系统的影响
   3. 各个渲染进程是彼此独立的，不同网页的渲染进程不会共享内存或数据，这样一个页面的崩溃或被攻击不会影响到其他页面
      渲染进程捕获和处理所有用户操作，而主进程（浏览器进程）则专注于管理、协调和控制整个浏览器的运行。这样，即使渲染进程发生问题，浏览器主进程依然可以正常工作
5. 为什么渲染进程能够直接捕获用户操作页面的行为
   1. WebContents 与渲染进程的关系
      WebContents 是 Chromium 中管理网页内容的核心类，它代表了一个标签页或一个嵌入式网页视图
      WebContentsView 是 WebContents 的一个视图组件，负责显示网页内容并处理与用户界面的交互。它实际呈现了渲染进程中的内容
      当用户与 WebContentsView 进行交互（如点击、滚动、输入），这些事件会被捕获并通过 IPC（进程间通信）机制传递给渲染进程
   2. 用户操作的事件传递机制
      WebContentsView 负责捕获用户在浏览器窗口内的所有操作，例如鼠标点击、键盘输入、触摸手势等
      捕获的事件会被分发给渲染进程。浏览器通过 IPC 将用户的操作事件传递给渲染进程，因为这些事件直接影响网页内容，而网页内容的处理是渲染进程的职责
   3. 渲染进程的事件处理
      渲染进程接收到事件后，会根据页面内容和 JavaScript 脚本处理这些事件
      例如，点击某个按钮会触发 JavaScript 事件处理程序，滚动操作会改变页面的显示区域
      渲染进程会按照事件的捕获、目标、冒泡阶段进行处理，以符合标准的 DOM 事件处理机制
   4. 安全与性能的优化
      将用户操作直接发送给渲染进程处理，而不是先通过主进程中转，这样设计是为了减少延迟，确保用户交互的流畅性
      虽然渲染进程直接处理用户操作，但这些处理都是在沙盒环境中进行的，确保即使操作被恶意利用，也不会威胁到系统安全

网络进程

1. 专门处理所有网络相关的操作，包括 HTTP 请求、HTTPS 安全连接、Cookie 管理、缓存等
2. 处理页面加载的所有网络请求（如资源的获取：HTML、CSS、JavaScript、图片等）
3. 管理网络连接，包括 DNS 解析、建立连接、处理重定向和响应等
4. 进行安全验证（如证书验证）和 Cookie、缓存管理

GPU进程

1. 负责图形渲染和加速
2. 管理 GPU 资源，处理所有与图形和视频相关的操作，如 2D/3D 绘制、硬件加速的动画、视频解码等
3. 将 GPU 相关任务独立到单独的进程中，可以隔离图形驱动程序的崩溃，并增强浏览器的整体稳定性

插件进程

扩展进程

实用进程

音频进程

服务工作进程

文件管理进程