electron优化笔记

执行顺序

1、 定义任务优先级

安排优先级提高性能，定义了项目的生命周期，在不同阶段执行不同任务。

• will-finish-launching：当应用程序完成基础的启动的时候被触发
• ready：当 Electron 完成初始化时被触发，只触发一次
• window-all-closed：当所有的窗口都被关闭时触发
• before-quit：在程序关闭窗口前发信号。 调用 event.preventDefault() 将阻止终止应用程序的默认行为。
• will-quit：当所有窗口被关闭后触发，同时应用程序将退出

2、idleCallback

window.requestIdleCallback() 方法，在浏览器的空闲时段内执行

3、延迟加载模块

在一些模块只有在某些事件触发的时候才会被使用到，那就没必要在app启动的时候加载

// 旧代码
const xxx = require('xxx')

export function exec() {
	xxx()
}
1
2
3
4
5
6

优化后

export function exec() {
	const xxx = require('xxx')
	xxx()
}
1
2
3
4

这样在执行exec方法的时候，才会加载xxx模块

更高效的 dom 访问接口

使用更高效的 dom 访问接口，提升页面渲染速度

document.getElementsByClassName(‘xxx’) 比 document.querySelectorAll(‘.xxx’) 更快，运行前者 2900 万次的时间，后者只能运行不到 40 万次

document.getElementById(‘xxx’) 也比 document.querySelector(‘#xxx’) 更快，前者的速度是后者的 2 倍

进程通信

1、remote尽量少用

remote是同步的，基于同步的IPC，且没有缓存，每次都会从主进程中获取最新的值，确保取到的值是最新的

2、封装IPC库

• 搞成异步的
• 消息合并，合并事件推送，批量传递
• 序列化，将JSON序列化后传递；electron内部序列化稍微复杂，会处理如Buffer等特殊类型
• 一致化、简单易用的api

打包

…

参考：
官方文档