XCel 项目总结 - Electron 与 Vue 的性能优化

XCEL 是由凹凸实验室推出的一个 Excel 数据清洗工具，其通过可视化的方式让用户轻松地对 Excel 数据进行筛选。

XCEL 基于 Electron 和 Vue 2.0 进行开发，充分利用 Electron 多进程任务处理等功能，使其拥有高性能、跨平台（windows 7+、Mac 和 Linux）的特性。

落地页：https://xcel.aotu.io/ ✨✨✨

项目地址：https://github.com/o2team/xcel ✨✨✨

项目背景

用户研究的定量研究和轻量级数据处理中，均需对数据进行清洗处理，用以剔除异常数据，保证数据结果的信度和效度。目前因调研数据和轻量级数据的多变性，对轻量级数据清洗往往采取人工清洗，缺少统一、标准的清洗流程，但对于调研和轻量级的数据往往是需要保证数据稳定性的，因此，在对数据进行清洗的时候最好有可以标准化的清洗方式。

特性一览

• 基于 Electron 研发并打包成为原生应用，用户体验良好；
• 可视化操作 Excel 数据，支持文件的导入导出；
• 拥有单列运算逻辑、多列运算逻辑和双列范围逻辑三种筛选方式，并且可通过“且”、“或”和“编组”的方式任意组合。

思路与实现

结合用研组的需求，我们利用 Electron 和 Vue 的特性对该工具进行开发。

技术选型

• Electron：桌面端跨平台框架，为 Web 提供了原生接口的权限。打包后的程序兼容 Windows 7 及以上、Mac、Linux 的 32 / 64 位系统。详情>>
• Vue 全家桶：Vue 拥有数据驱动视图的特性，适合重数据交互的应用。详情>>
• js-xlsx：各种电子表格格式的解析器和生成器。纯 JavaScript 实现，适用于 Node.js 和 Web 前端。详情>>

实现思路

1. 通过 js-xlsx 解析 Excel 文件生成 JSON 格式
2. 根据筛选条件对 JSON 数据进行筛选过滤
3. 将过滤后的 JSON 数据生成 js-xlsx 指定的数据结构
4. 利用 js-xlsx 对转换后的数据生成 Excel 文件

---

纸上得来终觉浅，绝知此事要躬行

相关技术

如果对某项技术比较熟悉可略读/跳过。

Electron

Electron 是什么？

Electron 是一个能让你通过 JavaScript、HTML 和 CSS 构建桌面应用的框架。这些应用能打包到 Mac、Windows 和 Linux 电脑上运行，当然它们也能上架到 Mac 和 Windows 的 app stores。

• JavaScript、HTML 和 CSS 都是 Web 语言，这就意味着它们都是组成网站的一部分，浏览器（如 Chrome）能将这些代码转为可视化图像。
• Electron 是一个框架：Electron 对底层代码进行抽象和封装，让开发者能在此之上构建项目。

为什么它如此重要？

通常来说，桌面应用都需要用每个操作系统对应的原生语言进行开发。这意味着需要拥有 3 个团队为这个应用编写 3 个相应的版本。Electron 则允许你通过 web 语言编写一次即可。

• 原生（操作系统）语言：用于开发主流操作系统的应用的原生语言如下（大多数情况下）：Mac 对应 Objective C、Linux 对应 C、Windows 对应 C++。

它由什么组成？

Electron 结合了 Chromium、Node.js 和用于调用操作系统本地功能的 API（如打开文件窗口、通知、图标等）。

• Chromium：Google 创造的一个开源库，并用于 Google 的浏览器 Chrome。
• Node.js（Node）：一个用于在服务器运行 JavaScript 的运行时（runtime），它拥有文件系统和网络的权限（你的电脑也可以是一台服务器！）。

开发体验如何？

基于 Electron 的开发，就好像开发一个网页一样，而且能够无缝地 使用 Node。或者说：就好像构建一个 Node app，并通过 HTML 和 CSS 构建界面。另外，你只需为一个浏览器（最新的 Chrome）进行设计（即无需考虑兼容性）。

• 使用内置的 Node：这还不是全部！除了 Node API，你还可以使用托管在 npm 上，超过 350,000 个的模块。
• 一个浏览器：并非所有浏览器都提供一致的样式，因此 web 设计师和开发者时常不得不花费更多的精力去让一个网站在不同的浏览器上看起来一致。
• 最新的 Chrome：可使用超过 90% 的 ES2015 特性和其它很酷的特性（如 CSS 变量）。

两个进程（重点）

Electron 有两个种进程：『主进程』和『渲染进程』。有些模块只能工作在其中一个进程上，而有些则能工作在两个进程上。主进程更多地充当幕后角色，而渲染进程则是应用的每个窗口。

PS：可通过任务管理器（PC）/活动监视器（Mac）查看进程的相关信息。

• 模块：Electron 的 API 是根据它们的功能进行分组。例如：dialog 模块拥有所有原生 dialog 的 API，如打开文件、保存文件和弹窗。

主进程

主进程，通常是一个命名为 main.js 的文件，该文件是每个 Electron 应用的入口。它控制了应用的生命周期（从打开到关闭）。它能调用原生元素和创建新的（多个）渲染进程，而且整个 Node API 是内置其中的。

• 调用原生元素：打开 diglog 和其它操作系统交互均是资源密集型操作（注：出于安全考虑，渲染进程是不能直接调用本地资源的），因此都需要在主进程完成。

渲染进程

渲染进程是应用的一个浏览器窗口。与主进程不同，它能存在多个（注：一个 Electron 应用只能有一个主进程）并且是相互独立的。它们也能是隐藏的。它通常被命名为 index.html。它们就像典型的 HTML 文件，但在 Electron 中，它们能获取完整的 Node API 特性。因此，这也是它与其它浏览器不同的地方。

• 相互独立：每个渲染进程都是独立的，这意味着就算它们某个崩溃了，也不会影响其余的渲染进程。
• 隐藏的：你可以设置一个窗口是隐藏的，然后让它只在背后执行代码（