Electron优化
MYPC客户端优化清单
启动页优化
- 开机启动？
- 增加精简启动窗口
- 加载本地启动页面 file://load.html
主进程优化
- 异步加载，优化http服务启动速度
- 后台预加载登录
- 减少IPC通信
- 托盘进程常驻
主页面优化（在线模式：登录~课程）
- 开启PWA
- 减少IPC通信
- 用户登录时，后台预加载课程页面
编辑页优化
- 开启PWA
- 减少IPC通信
- 先预览课件后加载资源（需服务端支持）
- 压缩资源
授课进程优化
- 预加载授课进程
- 减少IPC通信
- 后台常驻
授课页优化
- 预加载页面
- 减少IPC通信
- 使用过渡动画优化效果
游戏优化
优化 游戏元素拖拽卡顿
- 现有逻辑：拖动元素时，有过多的，循环遍历元素，检测碰撞的逻辑。
- 优化方案：减少碰撞检测循环遍历（待调试确认）
动画优化
优化 动画元素拖拽卡顿
优化 动画元素，显示隐藏逻辑。（排查发现，打开控制台发现有过多执行方法日志）
- 现有逻辑：通过计算属性计算元素显示隐藏逻辑，元素频繁快速拖动也会触发计算方法。
- 优化方案：
- 初始化时执行一次元素显隐逻辑，元素动画运动完执行一次元素显隐逻辑。（待调试确认）
- 快速拖拽元素 频繁调用移动元素方法时，不使用 vuex 的 slidesStore.updateSlide，而是使用 vue 的双向绑定。（待调试确认）
其它优化
- 窗口预热 与 窗口池、窗口常驻
- 预加载和执行代码
- 精简polyfills
- 不阻塞主进程：worker threads 或 异步执行
- 不阻塞渲染进程：小的操作使用requestIdleCallback() 而长时间运行的操作使用Web Workers
- 精简模块&延迟加载模块，检查依赖 node –cpu-prof –heap-prof -e “require(‘is-online’)”
- 精简网络请求
- 将公共代码打包到本地
- 使用 Rollup、Webpack 等构建工具将代码打包成单文件
- Electron协议拦截替代fastify（http服务）
- Performance API 关键节点打点
- 使用V8缓存数据 import (‘v8-compile-cache’)
- 使用性能监控分析 v8-inspect-profiler
- 使用生命周期阶段(Lifecycle Phases) 梳理启动阶段优先级
- 增加全局错误及异常监听，写入日志
- 增加electron-bridge 封装，减少ipc
- 交互体验优化
- 使用 MouseDown 来替代 MouseUp / Click 事件，先确保 Tab 很快的切换
- 打开耗时较大的页面或文件时，使用骨架或优先渲染主体部分
相关资料
Electron优化
http://example.com/20220506-Electron优化/