使用 electron 引起的思考

weixin_34107955發表於2017-04-11

零、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   // 網頁主頁
  1. 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 引用資源的連結轉化為絕對路徑
打包後，程式由於絕對路徑的原因，只能在開發的機子上使用，分發給他人後，會造成資源缺失的問題

相關文章