使用 electron 引起的思考

零、electron 简介

1. 历史：Atom 编辑器衍生出的 Atom Shell，后更名为 Electron
2. 可以跨 Linux、Mac、Win7-8 平台开发桌面程序
   「写本文时，electron 版本为 1.6.2，electron 并不支持 win10」
3. 使用网页开发的形式，加速了开发效率，但在性能操作上表现欠佳
   「实质上仅用了 Webkit 浏览器内核的壳子套了开发者的代码，可以直接做浏览器用」
4. 打包软件一般 安装包 40M 起步，软件体积 100M 起步

一、electron 的布局

I. 文件布局

1. 源代码布局

app/             // 名称固定，方便 electron 取文件
├── package.json // 程序的名称、简介、版本等信息 ，程序的编译，打包脚本等
├── main.js      // 程序运行唯一入口，可以在 package.json 修改入口文件
└── index.html   // 网页主页

2. electron 打包后程序的文件存放

resources/         // 程序根目录下的文件
├── app/           // 编写的源代码「可选，Mac 中在打包后直接省略了该部分」
└── electron.asar  // 源代码 经过 asar 打包压缩后生成的 程序需要引用文件「必须」

II. 运行方式

1. 依托 NodeJS 构建的独立服务器获取系统资源
2. 以唯一的 main.js 作为主进程，网页的渲染作为其多个子进程
3. 页面和主线程之间的交流：通过 ipcMain「主」 和 ipcRenderer 「页面」互相广播交流
4. 页面之间的交流：可以通过在主线程广播转发给页面

• 过多使用通过广播发送信息，会导致程序的卡顿
  建议使用一个广播，而用参数作为消息类型的判断
• 每个窗口都是一个进程，开启过多的窗口会造成巨大的卡顿

// 减少过多广播的方法
ipcMain.on(gc.message, function (event, type, ...arg) {
    switch (type){
        case gc.msgMainLog:
            log(...arg);
            break;
        case gc.msgOpenEffect:
            CreateWindow.openEffect(event.sender, ...arg);
            break;
        case gc.msgAddSequence:
            CreateWindow.addSeq(event.sender, ...arg);
            break;
        case gc.msgAddPlist:
            CreateWindow.addPlist(event.sender, ...arg);
            break;
    }
});

二、electron 的不足

1. 性能：canvas 标签使用 17个左右 就开始内存紧张，循环利用
2. 官网未能提供一个 即可以记录渲染线程，又可以记录主线程的 log
   好在 Github 上从不缺少这样的 东西
3. 在搭配使用 React 时，不能在 electron 的 index.html 中直接引用的 CSS 内引用资源，哪怕是相对路径的连接也不行
   解决方法：

• 把 CSS 写入 React，而不是单独在 index.html 中引用
• 把 CSS 引用的资源编译成 base64 写入到 CSS 文件中
  「不过 引用资源过大会造成 CSS 的加载更慢」

由于 React 在编译打包的时候，会把 CSS 引用资源的链接转化为绝对路径
打包后，程序由于绝对路径的原因，只能在开发的机子上使用，分发给他人后，会造成资源缺失的问题