磐匠设计器

猿急送>深圳前端兼职程序员>林伟楠>

案例列表

基本信息

案例ID：208574

技术顾问：林伟楠 - 3年经验 - 深圳华云信息技术有限公司

联系沟通

微信扫码，建群沟通

项目名称：磐匠设计器

所属行业：工具 - 办公软件

->查看更多案例

案例介绍

## 深圳华云（中国移动外包）RPA机器人流程自动化

简介：智能化软件，RPA机器人就是借助一些能够自动执行的脚本，以软件自动化方式实现一系列原来需要人工完成的工作，降本增效；负责 **设计器** 开发和性能优化，实现业务人员无需懂代码，即可设计流程脚本。

- 核心功能--可视化流程图（画布）：

用户在画布上，画出（设计）一条流程脚本

基于 HTML5的 **Canvas画布**和**Drag&Drop拖放**API 添加、删除组件，基于 **SVG path**技术实现组件之间的连线

- 核心功能--智能录制：

录制用户鼠标、键盘等操作，转为一条流程脚本

基于 **Electron多窗口、IPC通信** 技术，实现点（提示当前选中的元素）、选（根据选中的元素，推荐可能的操作）、用（所有操作列表）的多界面联动。

- 性能优化--首屏：

渲染层是基于Vue开发的SPA应用，主窗口打开时会有一个比较耗时的加载过程（单独设计器就有50+模块，还有执行器、元素拾取等代码）。优化如下

1. 登录界面从主窗口中拆分并独立为一个窗口，并在启动软件时，先创建且设置隐藏的状态
2. 等登录窗口页面渲染完成后，设置显示状态（防止白屏）
3. 然后才加载主窗口，以及其它模块

解决白屏问题，首屏2秒提升到300ms

- 性能优化--日志：

特殊场景，设计器每秒陆陆续续会接收1000+条消息，然后展示到界面、保存到本地文件。

1. 每条日志一个span元素展示、并限制最大展示条数（减少DOM重构重排），配合**requestWithAnimation**动画帧技术快速刷新界面（还有个虚拟列表方案）；

2. 新开**WebWorker**线程 + **节流**，每隔500ms保存一次日志文件；