ToB企服应用市场:ToB评测及商务社交产业平台

标题: 从架构到API，你真的掌握了Electron的全貌吗？ [打印本页]

---

作者: 大号在练葵花宝典    时间: 2024-11-18 16:46
标题: 从架构到API，你真的掌握了Electron的全貌吗？
前言

Electron 的原理是每个开辟 Electron 应用的开辟者都需要了解的知识内容，由于知道整个原理全貌后你才气在设计一个应用的时间更加的公道，遇到问题才知道从哪个方面去分析。这篇文章将主要从架构层面，协作方式，底层支持，源码层面，API设计等方面来分析 Electron 的原理。
架构层面

两个组件

Electron 的核心架构是基于 Chromium 和 Node.js 两个主要组件，各自扮演不同的脚色。
Chromium

Chromium 是一个开源的欣赏器项目，Google Chrome 就是基于它构建的。Electron 利用 Chromium 作为其渲染引擎，这意味着 Electron 应用可以利用现代 web 标准和技术，如 HTML5、CSS3 和 JavaScript 来构建用户界面。
Chromium 提供了以下主要功能：

• 渲染引擎：负责将 HTML、CSS 和 JavaScript 转换为用户界面。
  
• 多进程架构：每个页面（窗口）通常运行在独立的渲染进程中，提高了应用的稳定性和安全性。
  

Node.js

Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行时，Electron 利用 Node.js 提供系统级别的 API，允许开辟者在应用中利用服务器端的功能。
Node.js 主要提供以下功能：

• 文件系统访问：允许读写文件、创建目录等操作。
  
• 网络通讯：支持 HTTP/HTTPS 哀求、WebSocket 等网络协议。
  
• 进程管理：可以创建和管理子进程，执行系统下令等。
  

两种进程

Electron 应用通常包含主进程和渲染进程两种进程范例，每一种进程都有本身的属性和职责，另外还包含预加载脚本，他们相互协作构建出一个应用。
主进程（Main Process）

主进程是 Electron 应用的入口点，通常负责以下任务：

• 应用生命周期管理：包括启动、退出等。
  
• 创建和管理窗口：通过 BrowserWindow 对象创建和管理应用中的各个窗口（渲染进程）。
  
• 与操作系统交互：可以利用 Node.js API 举行文件操作、打开当地文件对话框等。
  
• 进程间通讯：主进程和渲染进程之间通过 ipcMain 和 ipcRenderer 模块举行通讯。
  

渲染进程（Renderer Process）

渲染进程负责 web 页面的渲染，每个 BrowserWindow 对象通常对应一个独立的渲染进程。渲染进程具有以下特点：

• 独立性：每个窗口有本身独立的渲染进程，崩溃时不会影响其他窗口。
  
• 安全性：由于渲染进程通常运行不具备完全访问 Node.js API 的权限，因此可以加强应用的安全性。
  
• UI 渲染：渲染进程利用 Chromium 提供的渲染引擎来表现 HTML、CSS 和 JavaScript 构建的用户界面。
  

预加载脚本（Preload Scripts）(可选)

预加载脚本在渲染进程中运行，但可以访问部分 Node.js API。它们的主要作用是：

• 安全桥梁：在渲染进程和主进程之间建立一个安全的桥梁，提供受控的 Node.js API 访问。
  
• 初始化任务：在 web 页面加载之前举行一些须要的初始化任务，如注入全局变量、设置事件监听等。
  

Chromium 和 Node.js 的协作

Electron 通过进程隔离、上下文桥接和 IPC 机制，实现了 Chromium 和 Node.js 的高效协作，确保应用的稳定性、安全性和功能性。
进程隔离

进程隔离是 Electron 实现稳定性和安全性的重要机制。Electron 通过将应用分为主进程（Node.js运行）和多个渲染进程（Chromium运行），来确保即使一个渲染进程崩溃，也不会影响到其他部分的运行。这种隔离使得应用能够同时利用 Node.js 强大的系统级 API 和 Chromium 先辈的欣赏器技术，同时也提高了应用的健壮性和安全性。
上下文桥接

上下文桥接通过contextBridge API，使得Node.js的功能可以安全地暴露给渲染进程。通过这种机制，可以在不直接暴露Node.js情况的情况下，将须要的功能提供给渲染进程。
IPC（进程间通讯）

进程间通讯（IPC）是 Electron 中主进程和渲染进程之间举行协作的重要机制。Electron 提供了ipcMain 和 ipcRenderer 模块，通过 IPC 机制，主进程和渲染进程可以相互发送消息，从而实现数据的传递和事件的触发。例如，当渲染进程需要访问文件系统时，可以通过发送消息给主进程，由主进程来执行现实的文件操作，并将结果返回给渲染进程。
底层支持

一款客户端框架，仅仅是有炫酷的界面是不行的，必须要有一些强劲的底层能力支持才气让这个桌面客户端框架完备，Electron 的底层支持主要涉及以下几个方面：
libchromiumcontent

libchromiumcontent 是 Chromium 内容模块的封装。它提供了一个独立于 Chromium 欣赏器的内容渲染引擎。它具有以下功能：

• Web标准支持：libchromiumcontent 实现了现代Web标准，包括HTML5、CSS3、ES6等。
  
• 多进程架构：利用 Chromium 的多进程架构，渲染进程和主进程分离，提升了应用的稳定性和安全性。
  
• 渲染能力：负责将 HTML、CSS 和 JavaScript 渲染为可视内容。
  

libchromiumcontent 作为一个共享库，被集成到 Electron 中，为 Electron 应用提供欣赏器功能。Electron 的主进程启动时，会启动 Chromium 的多个子进程（包括渲染进程），来处理惩罚网页的加载和渲染。
Node.js

Node.js 是一个基于 V8 引擎的 JavaScript 运行情况。它使得 JavaScript 可以在服务器端运行，并且能够举行 I/O 操作。
它具有以下功能：

• 系统级API：通过 Node.js 的模块系统，Electron 应用可以访问文件系统、网络、进程等系统级 API。
  
• 异步编程：Node.js 提供了异步 I/O 操作，可以高效地处理惩罚并发任务。
  
• 模块化：利用 Node.js 丰富的模块生态系统，开辟者可以快速集成第三方库。
  

在 Electron 中，Node.js 被嵌入到主进程和渲染进程中。主进程负责管理应用生命周期和原生窗口，渲染进程负责网页内容的渲染和交互。通过 Node.js，开辟者可以在 Electron 应用中利用 require 引入 Node.js 模块，直接调用底层系统 API
V8引擎

V8 是 Google 开辟的开源 JavaScript 引擎，最初用于 Chrome 欣赏器，现在也被 Node.js 和 Electron 利用。
它具有以下功能：

• JavaScript 执行：将 JavaScript 代码编译为当地机器码，从而提升执行速度。
  
• 内存管理：提供垃圾回收机制，自动管理内存分配和释放。
  
• 性能优化：通过即时编译（JIT）和内联缓存（inline caching）等技术，优化 JavaScript 执行性能。
  

V8 引擎在 Electron 中同时被 Chromium 和 Node.js 共享利用。渲染进程中的 JavaScript 代码（包括前端代码）和主进程中的 JavaScript 代码（包括 Node.js 代码）都通过 V8 引擎执行。
操作系统API

操作系统API 是指 Electron 应用通过 Node.js 和自定义的 native 模块与操作系统举行交互的接口。
它具有以下功能：

• 文件系统操作：访问和操作文件和目录。
  
• 网络通讯：举行网络哀求和套接字编程。
  
• 进程管理：创建和管理子进程。
  
• GUI控制：通过 native 模块，控制窗口、菜单、关照等 GUI 元素。
  

Electron 应用可以利用 Node.js 的原生模块（如 fs、net 等）来直接与操作系统交互。此外，Electron 还提供了一些特定于 Electron 的模块（如 electron 模块），进一步封装了与操作系统的交互逻辑。这些模块通过 Node.js 的 C++ 插件机制（Node-API）与底层系统 API 举行通讯。
Electron 通过整合 Chromium 的渲染能力、Node.js 的系统 API、共享的 V8 引擎以及操作系统 API，提供了一个非常强劲的底层支持能力，几乎可以做你任何想做的事情。
源码层面

对于源码的话，这块看本身的研究深度，大部分时间，利用一个框架是不太需要知道源码的，只要知道 API 和一些配置就行，但是如果遇到一些棘手的问题，看源码绝对可以办理你的很多问题，下面是核心源码目录的大概解释。

1. Electron
2. ├── build/ - 构建脚本和配置文件
3. ├── buildflags/ - 条件编译时可选的 Features
4. ├── chromium_src/ - 包含 Chromium 的构建配置
5. ├── default_app/ - Electron 默认程序，在未提供应用程序时启动
6. ├── docs/ - Electron 文档
7. ├── lib/ - JavaScript/TypeScript 源码
8. │   ├── browser/ - 主进程相关代码
9. │   ├── common/ - 主进程和渲染进程共享的代码
10. │   ├── isolated_renderer/ - 隔离渲染器相关代码
11. │   ├── node/ - Node.js 集成相关代码
12. │   ├── renderer/ - 渲染进程相关代码
13. │   ├── sandboxed_renderer/ - 沙箱化渲染器相关代码
14. │   ├── utility/ - 实用工具函数
15. │   └── worker/ - Web Worker 相关代码
16. ├── npm/ - npm 相关配置和脚本
17. ├── patches/ - 补丁文件
18. ├── script/ - 开发和构建脚本
19. ├── shell/ - Electron 壳层相关 C++ 代码
20. │   ├── app/ - 应用程序核心代码
21. │   ├── browser/ - 浏览器进程相关代码
22. │   ├── common/ - 共享代码
23. │   ├── renderer/ - 渲染器进程相关代码
24. │   ├── services/ - 服务相关代码
25. │   └── utility/ - 实用工具
26. ├── spec/ - Electron 测试规范
27. ├── spec-chromium/ - Chromium 相关测试
28. ├── typings/ - TypeScript 类型定义文件

复制代码

整体看 Electron 源码的布局是非常精巧的，不愧是大工程。这种布局设计允许 Electron 在保持机动性的同时，有效管理其复杂的多进程架构和跨平台特性。它将高层 JavaScript API 与底层 C++ 实现分离，同时通过 common/ 目录实现了不同进程间的代码共享，这反映了 Electron 的核心设计理念。
应用入口源码简析

Electron 的源码很多，不过我们可以简单分析一下应用入口源码，就可大概理解整个 Electron 应用的启动过程了。
入口源码在：\shell\app\electron_main_delegate.cc，大概解读一下，在这个文件内里定义了 ElectronMainDelegate 类，这个类在 Electron 的启动过程中起着关键作用。下面是这个文件的主要内容和功能:

• 基本启动流程:
  
  
  
  • BasicStartupComplete() 方法处理惩罚基本的启动任务,如设置下令行开关、注册路径提供者等。
    
  
  
• 沙箱初始化:
  
  
  
  • PreSandboxStartup() 在沙箱启动之前执行一些初始化工作,如设置用户数据目录、初始化日志系统等。
    
  
  
• 内容客户端创建:
  
  
  
  • 创建各种客户端对象,如 CreateContentBrowserClient(), CreateContentRendererClient() 等,这些对象负责管理 Electron 的不同进程。
    
  
  
• 资源加载:
  
  
  
  • LoadResourceBundle() 函数负责加载当地化资源。
    
  
  
• 进程范例处理惩罚:
  
  
  
  • RunProcess() 方法根据不同的进程范例执行相应的启动逻辑。
    
  
  
• 特性列表和 Mojo 初始化:
  
  
  
  • ShouldCreateFeatureList() 和 ShouldInitializeMojo() 控制特性列表和 Mojo 系统的初始化。
    
  
  
• 崩溃报告:
  
  
  
  • 包含了崩溃报告相关的初始化代码,尤其是在非 MAS (Mac App Store) 构建中。
    
  
  
• 平台特定代码:
  
  
  
  • 包含了针对 Windows、macOS 和 Linux 的特定代码处理惩罚。
    
  
  

这个文件的作用是协调 Electron 应用的启动过程,设置须要的情况,初始化各种组件,并为不同范例的进程(如主进程、渲染进程等)预备运行情况。它是毗连 Chromium 内容模块和 Electron 特定功能的桥梁,确保 Electron 应用能够精确启动并运行。
API设计

一个框架的 API 设计决定了它利用的上手难易度和开辟者担当的程度，幸亏 Electron 的 API 设计也是非常巧妙的，以是开辟起来也会比力随手，它大概遵循以下原则：
模块化

Electron 的模块化设计允许开辟者只利用他们需要的功能，提高了代码的可维护性和可读性。

• 实现细节：
  
  
  
  • 每个模块通常对应一个 C++ 类，如 app 模块对应 App 类。
    
  • JavaScript API 通过 V8 引擎与这些 C++ 类举行绑定。
    
  • 模块间保持低耦合，高内聚，允许独立更新和维护。
    
  
  
• 上风：
  
  
  
  • 便于理解和利用：开辟者可以专注于所需的特定功能。
    
  • 性能优化：只加载须要的模块，减少内存占用。
    
  • 可扩展性：易于添加新模块或扩显现有模块。
    
  
  

事件驱动

事件驱动模型使得 Electron 应用能够高效地相应各种系统和用户事件。

• 实现细节：
  
  
  
  • 利用 Node.js 的 EventEmitter 模式。
    
  • C++ 层面的事件通过 V8 引擎转换为 JavaScript 事件。
    
  • 广泛应用于生命周期管理、IPC 通讯等场景。
    
  
  
• 上风：
  
  
  
  • 非阻塞：事件处理惩罚不会阻塞主线程。
    
  • 松耦合：事件发送者和接收者之间无需直接依赖。
    
  • 机动性：允许多个监听器相应同一事件。
    
  
  

异步优先

异步 API 设计确保了 Electron 应用的高性能和相应性。

• 实现细节：
  
  
  
  • 大量利用 Promise 和 async/await 语法。
    
  • 在 C++ 层面，利用 libuv 实现异步操作。
    
  • 对于可能耗时的操作，如文件 I/O 或网络哀求，总是提供异步版本。
    
  
  
• 上风：
  
  
  
  • 提高应用相应性：制止长时间阻塞主线程。
    
  • 更好的错误处理惩罚：通过 Promise 链或 try-catch 布局处理惩罚异步错误。
    
  • 符合现代 JavaScript 实践：与 Node.js 和前端开辟模式一致。
    
  
  

跨平台抽象

Electron 提供统一的 API 接口，大大简化了跨平台开辟。

• 实现细节：
  
  
  
  • 在 C++ 层面为不同平台实现具体功能。
    
  • 利用条件编译和平台特定代码来处理惩罚平台差异。
    
  • JavaScript API 层保持一致，底层根据平台调用不同的实现。
    
  
  
• 上风：
  
  
  
  • 开辟服从：开辟者只需学习一套 API，就能开辟跨平台应用。
    
  • 代码复用：大部分应用逻辑可以在不同平台间共享。
    
  • 维护简化：平台特定的问题被封装在底层，简化了上层应用的维护。
    
  
  

通过这些设计原则，Electron 成功地将 Web 技术与原生桌面功能团结，创造了一个强大而机动的桌面应用开辟平台。这不仅简化了开辟过程，也为创新的桌面应用提供了可能性。
结语

这里我们大概简单地从几个方面分析了 Electron 的原理，通过这些分析了解了 Electron 的整体架构和设计头脑，这对我们开辟 Electron 应用是非常有帮助的，特别是在一些实战场景，如果对其原理了解得更加透彻，那么设计出来的应用应该也会很棒！

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

---

欢迎光临 ToB企服应用市场:ToB评测及商务社交产业平台 (https://dis.qidao123.com/)

Powered by Discuz! X3.4