3个阶段:
①. 构建优化
②. 启动时优化
③. 运行时优化
1. 启动时优化:
①. 使用v8-compile-cache缓存编译代码
②. 优先加载核心功能,非核心功能动态加载
③. 使用多进程,多线程技术
④. 采用asar打包:会加快启动速度
⑤. 增加视觉过渡:loading + 骨架屏
(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)
(2). 优先加载核心功能,非核心功能动态加载:
伪代码如下
export function share() {
const kun = require('kun')
kun()
}
2. 运行时优化:
①. 对渲染进程 进行 Web 性能优化
②. 对主进程进行轻量瘦身
(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)