electron启动白屏时间过长优化方案

1. 按需加载模块

把不需要马上用到的模块推迟到要用时候引入,避免头部文件一次性引入过多依赖,页面加载过于臃肿(比如ui组件库,和一些js插件)

2. 窗口先创建后隐藏,初始化后再展示

有点类似于障眼法,没有从根本上去优化速度

const options = {
    width: 500,
    height: 890,
    center: true,
    title: '桌面开发App',
    icon: path.join(__dirname, 'icon.png'),

    webPreferences: {
      preload: path.join(__dirname, 'preload.js'),
      nodeIntegration: true,
      // enableRemoteModule:true,
      contextIsolation: false,
      nodeIntegrationInWorker: true,
      enableRemoteModule: true,
      webSecurity: false,
      // 允许使用webview
      //   webviewTag: true
    },

	//优化速度重点在这里
    show: false, // newBrowserWindow创建后先隐藏

  }
  // Create the browser window.
  const mainWindow = new BrowserWindow(
    options
  );

  globalShortcut.register('Control+Shift+i', function () {
    mainWindow.webContents.openDevTools()
  })

  mainWindow.on('focus', () => {
    globalShortcut.register('CommandOrControl+F', function () {
      if (mainWindow && mainWindow.webContents) {
        mainWindow.webContents.send('on-find', '')
      }
    })
  })
  mainWindow.on('blur', () => {
    globalShortcut.unregister('CommandOrControl+F')
  })
	
	//优化速度重点在这里
  mainWindow.on('ready-to-show', () => {
    mainWindow.show() // 初始化后再显示
  })

3. web性能优化

electron客户端是基于h5页面开发,优雅简洁高性能代码加快启动速度

4. 优化主进程(electron.js)

使用node.js子进程,优化主进程负担,也可以new 一个Worker做线程上的处理,不过不可以和页面dom做交互,适用于用户频繁操作与缓存对比等场景

  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 2
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

夜空孤狼啸

你的鼓励是我创作的最大动力!

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值