Electron多流程工具开发期刊2：流程管理UI
浏览：1064 次
本文中实现的一些工具和方法处于早期/测试阶段，仍在持续优化中，仅供参考
在Ubuntu 20.04上开发/测试，它可以直接用于Electron项目。测试版本：Electron@8.2.0 / 9.3.5
目录
├── 内容（您在这里！）
│
☆ 一、 前言
├── 二、体系结构图
│
☆ III.电子能做什么？
│☆ - 1） 用于电子应用
│ L-2）用于电子/节点应用
│
☆ - 四、 UI功能介绍
│г-主界面
│г-功能1：压井过程
│☆ - 功能2：一键启动DevTools
│☆ - 功能3：查看流程日志
│｜ -- 功能4：查看进程的CPU/内存占用趋势
│
☆ 五、 用途和原理
│г——简介
│☆ -- 如何捕获流程资源占用？
│☆ -- 如何在主进程和UI之间共享数据？
│｜ -- 如何在UI窗口中绘制线图？
│
☆ - 六、 已知问题
│
├── 七、下一步要做
│
├── 八、几个实际例子
│☆ - 1） 服务/消息通道示例
│☆ - 2） ChildProcessPool/ProcessHost示例
│ L-3）测试目录示例
1.前言
最近，在构建多文件分区并行上传模块（基于Electron和React）时，我遇到了一些性能问题，主要体现在：当大量文件（1000-10000）同时添加到前端进行并行上传时（默认情况下，同时上传的文件数为6），如果没有延迟负载优化，整个app窗口都会被卡住。因此，我了解了Electron/Nodejs的多进程，并尝试使用多进程架构来优化上传过程。
同时，还编写了一个工具，以便于管理和调用多个Electron/Node进程。它已作为npm组件发布，可以直接安装：
$：npm安装电子重新保存
#或
$：纱线添加电子
前面的文章描述了电子资源的开发背景、问题场景和详细的使用方法。本文不会过多解释其基本用途，但主要介绍了新功能多进程管理UI的开发。UI界面由Electron re现有的BrowserService/MessageChannel和ChildProcessPool/ProcessHost基础设施驱动，并使用React17/Babel7开发。主界面为：
进程管理器main.png
二、电子重构图
电子再充气
3.电可用于什么？
1.电子应用
浏览器服务
消息频道
流程管理器
在Electron的一些“最佳实践”中，建议将占用cpu的代码放在渲染过程中，而不是直接放在主进程中。这里我们首先看一下Chromium的架构图：
铬.jpg
每个渲染进程都有一个全局对象RenderProcess，用于管理与父浏览器进程的通信并维护全局状态。浏览器进程为每个渲染进程维护一个RenderProcessHost对象，以管理浏览器状态和与渲染进程的通信。浏览器进程和渲染进程使用Chromium的IPC系统进行通信。在Chromium中，在页面渲染期间，UI进程需要与IPC中的主进程同步。如果主进程此时正忙，则UI进程将在IPC中阻塞。因此，如果主进程继续执行消耗CPU时间或阻塞同步IO的任务，它将在一定程度上阻塞，从而影响主进程与每个渲染进程之间的IPC通信。如果IPC通信被延迟或阻塞，渲染过程窗口将阻塞并丢弃帧，严重时甚至冻结。
因此，在Electron现有的主进程主进程和渲染器进程渲染进程逻辑的基础上，Electron具有独立的服务概念。服务是一个不需要显示界面的后台进程。它不参与UI交互，并为主进程或其他渲染进程提供服务。它的底层实现是一个渲染窗口进程，允许节点注入和远程调用。
这样，您可以将代码中消耗cpu的操作（例如在文件上传中维护数千个上传任务的队列）写入一个单独的js文件中，然后使用BrowserService构造函数以js文件的地址路径为参数构建一个服务实例，以便将它们与主进程分离。如果您说这些消耗CPU的操作可以直接放入渲染窗口进程中？这实际上取决于项目本身的架构设计，以及在数据传输性能损失和传输时间方面的过程之间的权衡。创建一个简单的服务示例：
骗局
