注:AIO 是聊天面板的简称。
这个初步的观察让我们看到了目前的挑战,同时也让我们看到了优化的可能性。我们有信心,通过精心设计和持续优化,逐步接近甚至超越我们设定的目标。
内存优化我们都做了什么接下来,将重点介绍我们是如何掌控和优化 Electron 的内存的。我们的工作主要包括以下几个方面:
- 工具分析:首先,我们需要使用不同维度的内存分析工具,从 V8 引擎到进程,再到整个应用程序,打通整个链路进行多角度的细节分析,以此来定位内存使用的瓶颈。
- 定向优化:在通过工具定位到问题之后,我们会采取一系列的针对性优化策略,包括缓存策略、按需加载、优雅降级等。具体的优化工作我们将在后面进行详细介绍。
- 线上监控:在本地或小范围内验证通过之后,我们需要广大用户的验证来确认我们的优化措施是否适用于所有场景。然而,如何获取用户在 Windows 任务管理器中看到的内存使用量是一个挑战,我们已经做了大量的研究和验证。
- 防止性能退化和自动化测试:为了保护我们辛苦得来的优化成果,并避免频繁的版本迭代影响 QQ 的内存目标,我们会借助开发框架、工具建设、代码审查等手段来预防性能退化。
在进行性能优化之前,我们需要选择合适的工具来帮助我们分析问题。QQ 的代码不仅包含 V8 的 JS 部分,还包括许多 Native 的 C 模块。仅依靠 Chromium 开发者工具进行性能分析是不够的,因此我们需要组合使用多种工具来共同解决问题。
这些工具如何使用,由于篇幅的关系我们在这里不做详细介绍。
[部分内存分析工具截图]
定向优化1) 最大化资源使用率
- 代码及静态资源
桌面版 QQ 的功能逻辑非常复杂,代码量庞大。虽然代码不需要通过网络请求加载,本地加载速度通常较快,但加载如此庞大的代码会占用大量内存。因此,仍然需要进行代码瘦身、静态资源优化、分包和按需加载等优化措施。
[Devtools > memory 分析 QQ 主窗口内存占用]
首先是代码瘦身。对于第三方包或 SDK,它们往往包含了完备的 Web 兼容性及能力,而这些对于 Electron 客户端来说并不是必需的。因此,我们会对它们进行定制裁剪或独立实现,以减少代码的加载。
对于 QQ 的业务代码,分包策略不完全按照每个页面(窗口)以及模块复用次数来进行制订,更多的情况是按照场景模块来进行细粒度的定制。以打开一个窗口到进入使用场景为例:1)窗口池中预启动的窗口页面只加载必须执行的基础代码;2)当打开具体窗口时加载对应的路由后页面入口代码;3)当具体使用不同功能时动态加载,如点击搜索、打开表情面板、转发消息激活好友选择器的时候才会分别加载对应功能模块代码。