Electron实战系列八：性能优化_electron性能优化

3个阶段:

①. 构建优化

②. 启动时优化

③. 运行时优化
1
2
3
4
5

1. 启动时优化:

①. 使用v8-compile-cache缓存编译代码

②. 优先加载核心功能,非核心功能动态加载

③. 使用多进程,多线程技术

④. 采用asar打包:会加快启动速度

⑤. 增加视觉过渡:loading + 骨架屏
1
2
3
4
5
6
7
8
9

(1). 使用v8-compile-cache缓存编译代码:

①. 使用V8缓存数据,为什么?
    a. 因为electorn使用V8引擎运行js,V8运行js时,需要先进行解析和编译,再执行代码
    b. 解析和编译过程消耗时间多,经常导致性能瓶颈
    c. 而V8缓存功能,可以将编译后的字节码缓存起来,省去下一次解析、编译的时间

②. 主要使用v8-compile-cache来缓存编译的代码:
    a. 在需要缓存的地方加一行
       require('v8-compile-cache')

③. 文档:
    https://www.npmjs.com/package/v8-compile-cache(opens new window)
1
2
3
4
5
6
7
8
9
10
11

(2). 优先加载核心功能,非核心功能动态加载:

伪代码如下
export function share() {
  const kun = require('kun')
  kun()
}
1
2
3
4
5

2. 运行时优化:

①. 对渲染进程 进行 Web 性能优化

②. 对主进程进行轻量瘦身
1
2
3

(1). 对渲染进程进行Web性能优化:

用一个思维导图来完整阐述如何进行Web性能优化,如下图所示:

(2). 对主进程进行轻量瘦身:

核心方案就是将运行时耗时、计算量大的功能交给新开的node进程去执行处理

伪代码如下:

const { fork } = require('child_process')
let { app } = require('electron')

// 将耗时、计算量大的功能,放在server.js,再fork到新开node进程中进行处理
function createProcess(socketName) {
  process = fork(`xxxx/server.js`, [
    '--subprocess',
    app.getVersion(),
    socketName
  ])
}

const initApp = async () => {
  // 其他初始化代码...
  let socket = await findSocket()
  createProcess(socket)
}

app.on('ready', initApp)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21