。 QQ Windows版本新版本需内存达标后才会发货。
【Windows任务管理器中QQ内存使用详情】
这些进程在QQ启动时一直存在。让我们重点关注三类进程,它们也是内存优化的主要关注点:
Node:Electron的主要进程。负责窗口管理、进程间通信等。包含NT Core Data模块,负责与服务器交互并向UI提供数据服务。
渲染器:Chromium 内核渲染进程。负责渲染UI、提供用户交互等。 QQ启动时,有两个渲染进程。一个是QQ大面板,一个是主进程窗口池。窗口池是一个预先构建的渲染进程。您可以减少打开新窗口时的等待时间。
gpu:Chromium 内核GPU 进程。它的主要作用是处理渲染网页、播放视频、运行动画等与图形相关的任务。
确定了目标后,我们首先彻底调查了QQ的内存使用情况。从用户的角度,通过Windows任务管理器观察QQ的内存使用情况。让我们从最简单的“Hello World”开始,看看Electron 应用程序的最低内存要求和限制在哪里。结果显示我们只需要68M,并没有传说中的几百M那么大。
但随着使用的深入,比如在QQ聊天场景中执行一些操作后,主进程、GPU进程、渲染进程的内存占用开始达到600M。这意味着您距离目标还剩50% 以上。
*AIO 是聊天面板的缩写。
第一次观察不仅可以让您看到当前的挑战,还可以看到优化的潜力。我们相信,通过精心设计和不断优化,我们能够逐步接近甚至超越我们设定的目标。
我们做了什么来优化内存呢?接下来我们重点讨论如何控制和优化Electron的内存。我们的工作主要包括以下几个方面:
工具分析:首先,使用内存分析工具从V8引擎到进程到整个应用程序各个维度,打通整个链路,找出瓶颈,多角度进行详细分析。内存使用情况。
有针对性的优化:通过我们的工具识别出问题后,我们采用了一套有针对性的优化策略,包括缓存策略、按需加载、优雅降级等等。具体的优化工作我们稍后会详细介绍。
在线监控:通过本地或小规模验证后,需要进行大量用户验证,以确保优化措施适用于所有场景。然而,如何让用户在Windows任务管理器中看到内存使用情况是一个挑战,我们已经做了很多研究和验证。
防止性能下降和自动化测试:构建开发框架、工具和代码审查来保护您来之不易的优化结果,避免频繁的版本迭代影响QQ的内存目标,以及其他防止性能下降的措施。
工具分析在进行性能优化之前,需要选择合适的工具来帮助分析问题。 QQ的代码不仅包含V8的JS部分,还包含很多原生的C++模块。仅仅依靠Chromium 开发人员工具进行性能分析是不够的;您需要结合使用工具来解决问题。
由于篇幅限制,我们在这里不提供如何使用这些工具的详细信息。
【部分内存分析工具截图】
有针对性的优化1)资源利用率最大化
代码和静态资源
桌面版QQ的功能逻辑非常复杂,代码量巨大。代码不必通过网络请求加载,本地加载通常速度更快,但加载这么大的代码会消耗大量内存。因此,仍然需要代码瘦身、静态资源优化、分包、按需加载等优化措施。
【Devtools Memory分析QQ主窗口内存使用情况】
首先是代码精简。第三方软件包或SDK 通常包含Electron 客户端不需要的完整Web 兼容性和功能。因此,自定义它们或独立实现它们以减少代码负载。
在QQ的业务代码中,分包策略并不是完全根据各个页面(窗口)或模块的复用次数来制定的,往往是根据场景模块进行详细的定制。例如,打开一个窗口并输入您的使用场景。 1)窗口池中预启动的窗口页只加载需要执行的基本代码。 2) 当打开特定窗口时,加载相应的后路由页面。将加载入口代码。 3)具体使用时例如点击搜索、打开表情面板、转发消息、启用好友选择器时,会单独加载相应的功能模块代码。
【QQ主窗口业务模块拆解】
此外,其他静态资源(SVG、base64图像等)在加载时也会占用大量内存,因此我们采用按需加载策略。即只有在可见时才加载,在不可见时主动丢弃并回收。
[svg和base64资源的字符串内存使用情况]
将JS代码转换为字节码,以提高执行效率和代码保护。跳过源代码编译,字节码直接传递给V8 执行,但V8 在程序错误恢复和堆栈恢复等运行时步骤中引用源代码字符串。要删除这个源代码,使用与源代码相同长度的空格来占用空间,但是devtool检查显示这些空格字符串仍然占用了大量的内存空间。最后,我更改并删除了对V8源字符串的引用,彻底解决了源字符串内存占用问题。
图片资源
QQ作为即时通讯工具,涉及到大量图片的发送和接收。然而,渲染图像会消耗大量内存。例如,4000 x 2750 分辨率的图像,结合设备屏幕像素和聊天区域设计尺寸,只需渲染为567 像素宽的分辨率图像即可看起来清晰。当以4000 像素宽的分辨率进行渲染时,两张位图占用的内存大小理论上相差可达50 倍,而且还会因渲染而带来性能损失。
[图像大小如何影响内存的示例]
聊天消息列表中的大部分图片仅起到预览的作用,缩略图渲染就可以满足您的需求。仅当用户实际打开图像查看器并放大视图时,才会使用原始图像进行渲染。
据观察,在聊天中显示不同大分辨率的多个图像可能会导致渲染进程和GPU 进程之间的内存使用量存在较大差异。在发送和接收图像时,它根据屏幕设备信息计算显示区域所需的实际渲染分辨率,如果原始图像分辨率超过计算出的所需值,则首先调用压缩服务对图像进行压缩,生成图像。将其压缩到渲染所需的分辨率并渲染到聊天区域的屏幕上。测试了该策略优化下的常见聊天图片场景后,使用缩略图时的内存优化比原始图片在30M到50M左右。
【QQ优化图片截屏攻略】
2)按需呈现可见性
DOM 元素的数量
虽然复杂的聊天消息是必不可少的功能,但实际的消息量远低于常规的图形消息,因此应在适当的情况下及时处理WebWorker,以确保良好的用户体验,这是一个合理的策略。当WebWorker被销毁时,该线程占用的内存被完全释放。
3)性能和体验之间的平衡
洛蒂和动画解决方案选择
Super Expression 由Lottie 动画技术解决方案提供支持。它具有高分辨率和高帧速率的特点,但渲染成本也较高。为了确保Lottie 的高帧率并减少CPU 使用率,我们缓存了Lottie 渲染器生成的动画帧,但内存消耗成为主要问题。
【QQ乐蒂动画示例】
进行量化分析,超级表情Lottie资源继承自手机QQ,大小为512512,动画帧存储在int8数组中,因此一帧动画为5125124/1024 变为。 bit=1024Kb=1Mb,一个超级仪式如普通大小的庆典有160帧动画,但按照缓存9/10帧动画的策略,庆典会占用144Mb的内存。它是可回收的,但肯定会消耗大量内存。了解Lottie 渲染的内存消耗后,主要有两个步骤入手:
缓存的动画帧大小:桌面上的Lottie 渲染大小为120 x 120。考虑到需要保持Lottie动画的高质量,缓存的动画帧大小调整为实际大小的两倍,即240 x 240,以减少内存消耗。 72%。审查设计后,清晰度没有明显差异。
缓存策略:9/10动画帧缓存减少为3/4缓存,内存消耗减少35%,保证调整后的帧率。
上述两个步骤总共减少了81.8% 的内存消耗,将庆祝表情符号从144 Mb 减少到35 Mb。
最后,旧策略缓冲了渲染后暂时未使用的Lottie 风格的第一帧。总共31 个Lottie 公式:2.3k * 31=7M (max) 经过评估,我们暂时删除了这个策略。
【QQ乐蒂动画缓存首帧对内存的影响】
另外,桌面QQ的左侧导航栏采用了Lottie动画,与移动设备融合体验,四个图标导航栏占用内存约6M。改用CSS实现不仅可以达到与Lottie类似的效果,而且还完全消除了6M内存的使用。
【QQ导航栏动画对记忆的影响】
APNG动画优化
APNG 是一种基于PNG 的位图动画格式,扩展名为.png。最初的超级调色板选择了300 张图像,以达到最佳的色彩效果。由15KB静止图像合成的颜色渐变apng图像大小为4.2M,但与设计协商后进行了大量压缩,但不影响效果体验。 157KB,压缩率96%以上。
聊天列表和消息
聊天列表AIO作为QQ IM模块最重要的消息数据展示模块,其滚动体验离不开用户体验和内存的权衡。
在聊天列表静态和滚动过程中,维护的消息组件数量主要决定了QQ整体的内存使用情况。从服务器获取消息数据后,将其存储在本地DB中,并且根据策略将当前会话的消息数据缓存在内存中。
由于消息缓存在加载滚动时会消耗更多内存,因此还有特定的动态阈值策略来丢弃滚动方向相反的旧消息,从而将内存控制在可接受的范围内。如果用户需要重新操作并再次加载,底层就得重新从本地磁盘DB中拉取。
【QQ聊天消息列表加载攻略】
监控平台提供按版本、时间划分的指标曲线和对比,方便您查看和分析性能变化。同时开通企业微信机器人,实时推送绩效指标提醒。
根据告警信息对应的版本信息和代码记录进行排查,解决环路问题。
[劣化防止机构示意图]
这套机制此前已经在QQ频道桌面项目内部测试时进行了尝试,在运行过程中发现了一些典型的代码异常、崩溃、OOM问题,证明其在实践中是有效的。新版QQ的业务和设计更加复杂。建立良好的抗降级机制对于问题发现效率和整体性能质量都至关重要,也是我们团队重点关注的工作。今天依然如此,未来也将继续。
【防劣化推送及报警实例】
摘要:您可能想知道为什么应该选择Electron。事实上,我们仔细考虑了以下几点:
首先,新QQ意味着我们需要注重功能的快速迭代。否则根据QQ的大小,前面会很长。我们确保最终选择的跨平台解决方案足够成熟,开发和使用成本较低,并且希望使用框架本身不需要大量额外投资。
的人力成本。这个其实在 React Native、Flutter、Tauri 等跨平台框架的使用过程中,我们都遇到过类似的问题,除了功能开发,为了把框架生态、周边、工具链建设好,还需要投入巨大的额外成本,Qt 也有类似的问题。而使用 Electron,对于 Web 前端开发同学,基本上是 0 成本,现有的 Web 前端的大部分基建都可以直接复用,而且使用 Web 开发 UI 的效率,在主流技术栈里算是很高的了。并且这几年主流的桌面端应用基本都选择了 Electron,如 VScode、Discord、Slack、Skype、Whatsapp、Figma 等等,新的桌面应用基本上也是首选 Electron,另外,Electron 版本的迭代速度和社区氛围都很在线。
其次,从结果或者解决问题的角度来看,经过一系列优化之后基本可以将 QQ 核心聊天场景的内存控制在 300M 以内,150M 的安装包大小,与旧版纯 Native QQ 差别较小。不单单内存占用,其他核心体验,比如切 AIO 的流畅度上要优于旧版 QQ。即便是在今天,QQ 也坚定一年半之前选择了 Electron。
最后,让我们再次聚焦在内存优化的工作上,下图是我们在桌面 QQ 中针对 Electron 内存优化工作的一个概览。内存优化没有银弹,有的只是一步一个脚印深入做下去,芝麻西瓜都要捡,从量变到质变。未来我们完全有信心,凭着已有的经验和对其技术的理解,守住现在这些成果的同时,进一步优化 QQ 生态下的各个子业务、子模块的内存占用问题。因此,也希望通过我们实践经验分享, 让大家从更多辩证的视角来重新看待 Electron 或类 CEF 的技术方案。
[桌面 QQ 内存优化工作概览]
广告一下:新版 Windows QQ 体验地址 QQ PC 版官方网站(https://im.qq.com/pcqq),欢迎感兴趣的同学试用,也欢迎大家多提宝贵意见。
今日好文推荐
两个多月完成全自研:大模型之争,从 GPU 卷到了向量数据库
都在追“新潮”技术,但你有大厂们的动作快吗?
大模型竞争突然升级!亚马逊 CEO 亲自监督、组建新的核心技术团队,集中优势资源打造“最具野心”的大语言模型
一场 AI 引发的开源革命迫在眉睫?Hugging Face 更改文本推理软件许可证,不再“开源”
本文和图片来自网络,不代表火豚游戏立场,如若侵权请联系我们删除:https://www.huotun.com/game/645787.html