Record books about reading refactoring code.

C++ windows + dulib

JS Vue + vuex + nodejs + c++ 前端模块化、工程化、性能优化

技术选型: nw qt electron. 跨平台 快速开发 整合PC开发资源 nw electron: C++强类型语言 -> JS语言弱类型语言 数据库如何保持？sqlite->indexDB里面 关系型数据库 -> 非关系的数据库 传输速度差很多 electron 内嵌入一个web页面，针对web功能弱势点，封装一些功能 Sqlite, 截图, 升级程序，剪切板功能等等 针对electron方面做了不少优化: 不是一个原生的客户端，那么性能和启动速度肯定是不如原生的好 再一个界面白屏的白屏，大致原因：页面窗口创建，静态资源的加载，JS解析和执行 设置背景色或者延迟显示窗口，来避免闪烁 优先加载核心的功能，保证初次加载效率，让用户可以尽快进行交互。 Electron 每个版本都会预装当时最新的 Chrome 更新版本， v8 Code Cache。NodeJS 12 开始在构建时提前为内置库生成代码缓存，从而提升 30% 的启动耗时。 窗口预热 与 窗口池、窗口常驻 静态资源缓存， Service-Worker 可以拦截多个页面的网络请求 NodeJS 进行 I/O 操作，但是我们一定要尽量避免同步 I/O。例如同步的文件操作、同步的进程间通信。它们会阻塞页面的渲染和事件交互。 减少主进程负荷, 千万避免在主进程中跑计算密集任务和同步I/O。 涉及到多页面/窗口的 Electron 应用，IPC 会非常频繁，搞不好会成为性能瓶颈。 问题： 窗口阴影、圆角 剪切板不够强大 一些兼容问题 主进程崩溃，渲染进程不会退出，导致进程‘溢出’ 截屏。刚开始用 Electron 实现，效果不好，现在是原生实现

web端: vue + vuex 模式来管理状态, 但是针对我们这种业务比较复杂的场景下，就有点捉襟见肘了，而且代码相对的会混乱 整合这部分相对混乱的代码，我们基于原有的MVVM框架下，对M层进行了重新的架构搭建，采用MVC的框架，重新设计M层, 把M层当成V层, 然后去完善C层和M层, 这里还有一个问题就是当时的业务层逻辑到底应该是放在C还是M层，最终考虑到放在控制层的话 对整体的业务逻辑复用性并不是很好, 最后决定，由C层来控制，里面封装了很多Manager,比如DBManager,用来初始化DB， UserManager. messageManager, sessionManager等等吧，然后在M层来存储内存中数据 messageManager封装 离线消息的优化 性能优化 首屏优化 内存优化

面向过程 -> 面向对象

MVVM -> MVC

V -> M

C -> controler msgManager UserInfoManager

M -> model UserInfo GroupInfo

通用的工具模块封装 数据持久化: DB-> 封装为两个模块 数据库表设计啊 文件模块的封装 加密模块的封装 用户信息模块的封装 消息模块的封装 Session模块的封装 消息流程优化 factory -> messageManager messageEntiy

离线消息优化 offlineMsg

性能优化 图片的懒加载 左侧会话列表懒加载 插入消息优化，webworker 页面优化，v-show 和v-if 渲染优化，key值缓存 UI层优化，减少重排, 统一读取数据, 然后再写数据。 DOM渲染层优化 输入框优化 逻辑优化,

内存优化 闭包 事件绑定 全局变量、计时器 没有必要的全局变量

• 解除引用
• 减少对象的创建, 避免循环使用new对象
• 内存不是缓存, 大数据量东西, 不是很重要的资源，不要直接放在内存中
• 避免复杂的递归调用, 堆栈溢出, 复杂且每次调用需要在栈里存储大量信息的时候, 很容易就超过栈空间了
• 合理使用IndexDb, 定期清理数据，不去无脑写入数据
• 全局变量、计时器 首屏优化 减少Html请求，减少包体积，缩小图片体积，延迟加载JS文件，preDNS 特殊懒加载 正常流程的首屏加载顺序: HTML文档-> 内连CSS渲染-> Js加载及执行-> 加载第三方的库 优化后的逻辑: 首屏数据拉取逻辑置于顶部->首屏渲染CSS及JS->次屏逻辑延后处理和执行 页面切分为模块化加载，对应模块下的CSS交给JS js 延迟加载，有需要才去加载 使用雪碧图 缓存一切可缓存的资源 图片 非首屏都采用懒加载模式 图片、文件等放在同一域名下, 减少DNS解析 服务端模块化接口的支持 首屏内容最好做到静态缓存 避免js中进行不要的DOM读写操作 配置CDN加快下载速度

通信平台 MQQT协议上 封装一层连接，会话，创建等等。

实现功能： Web端：帮助团队完成底层代码重新架构，功能模块重新封装，包括：重构底层数据存储结构，设计接入localStorage、IndexDB、 FileSystem; 重构离线消息模块; 重构消息发送接收模块, 实现MVC模式逻辑与UI分离; 接入RSA, AES消息文件加解密功能; 完善云盘功能，并实现文件分块加密上传下载，断点续传功能; 桌面共享功能实现；UI部分重构封装等，及后续业务功能开发和维护。 Electron客户端: 共同搭建客户端，完善客户端功能：sqlite数据库; C++截图功能接入; 老版本升级功能接入; 静默升级功能实现； 通信平台：通信平台web端基础通信sdk模块封装 优化：界面白屏, 内存泄漏, 性能卡顿, 首屏时间 能够与用户积极交流，对线上BUG问题的进行现场排查，与不同端同步联调，及手机端单独web view引入的H5界面开发