本文由 QQ 技术团队王辉、吴浩、陈俊文分享，编辑 Tina 整顿，本文收录时有内容订正和排版优化。
1、引言
在瞬息万变的互联网行业中，年过二十四的即时通讯 IM 利用 QQ 堪称超长命的产品，见证了中国互联网崛起的残缺历程。然而，现在这个元老级产品经验了一次从内到外彻底的重构。在这次重构中，QQ 抉择了 Electron 作为 UI 跨平台开发框架。只管 Electron 被 Slack、Visual Studio Code 和 Discord 等大型产品宽泛应用，但也引发了一些网友的担心，例如内存占用、安装包体积和启动速度等方面的问题。本文内容整顿自 QQ 技术团队的采访，咱们一起来看看 QQ 团队抉择 Electron 作为桌面版跨端框架背地的决策与思考。
技术交换：
- 挪动端 IM 开发入门文章：《新手入门一篇就够：从零开发挪动端 IM》
- 开源 IM 框架源码：https://github.com/JackJiang2011/MobileIMSDK（备用地址点此）
（本文已同步公布于：http://www.52im.net/thread-4391-1-1.html）
2、系列文章
本文是系列文章中的第 8 篇，本系列总目录如下：
《IM 跨平台技术学习 (一)：疾速理解新一代跨平台桌面技术——Electron》
《IM 跨平台技术学习 (二)：Electron 初体验 (疾速开始、跨过程通信、打包、踩坑等)》
《IM 跨平台技术学习 (三)：vivo 的 Electron 技术栈选型、全方位实际总结》
《IM 跨平台技术学习 (四)：蘑菇街基于 Electron 开发 IM 客户端的技术实际》
《IM 跨平台技术学习 (五)：融云基于 Electron 的 IM 跨平台 SDK 革新实际总结》
《IM 跨平台技术学习 (六)：网易云信基于 Electron 的 IM 音讯全文检索技术实际》
《IM 跨平台技术学习 (七)：得物基于 Electron 开发客服 IM 桌面端的技术实际》
《IM 跨平台技术学习 (八)：新 QQ 桌面版为何抉择 Electron 作为跨端框架》（* 本文）
3、老 QQ 桌面版的技术债
3.1 多端代码不对立
QQ 的第一个版本公布于 1998 年，在 Windows 技术栈的根底上用纯原生的形式开发，在过后互联网带宽十分小的状况下，QQ 将安装包管制在了只有 200K 左右。2007 年后智能手机开始露出苗头，腾讯口头得比拟早，局部前端技术开发开始转型到了挪动端，在桌面端，QQ 随着业务和组织的倒退，针对三大操作系统陆续组建了三支不同的研发团队，各自负责本人的一套代码。
▲ 初版 QQ 的注册向导页
▲ 初版 QQ 的次要性能为即时聊天
三端不同代码，老产品历史包袱，加上挪动时代研发人员的转型，导致桌面 QQ 保护老本很高。QQ 技术团队介绍，拿之前的桌面 QQ 为例，Windows QQ 以前的 UI 框架用的是腾讯自研的 GF 框架，10 多年了，GF 这个框架文档还不全，新退出这个我的项目的团队人员，要基于这个根底框架去做一些事件，是效率很低的一件事件，缓缓的就没有人违心去用这个框架了。简而言之，就是技术债。
PS：如果你对 QQ 的发展史感兴趣能够看看上面这些文章：
《闲话即时通讯：腾讯的成长史实质就是一部 QQ 成长史》
《技术往事：守业初期的腾讯——16 年前的冬天，谁动了马化腾的代码》
《技术往事：史上最全 QQ 图标变迁过程，追寻 IM 伟人的演进历史》
《QQ 的胜利，远没有你设想的那么顺利和轻松》
《还原实在的腾讯：从最不被看好，到即时通讯巨头的草根创业史》
3.2 多端性能不统一
旧版的桌面端 QQ，Windows 的性能最丰盛，Mac OS 次之，Linux 性能十分简洁。比方“屏幕共享”这个性能，挪动端有，Windows 端有，然而 Mac OS 端是没有的。那用户就会遇到一个问题，像 Mac OS 端无奈与其它端 QQ 用户一起来应用这个性能。“多端不对立不利于用户对于 QQ 的对立认知。咱们这次的架构降级就是想尽量通过一套外围代码去拉平所有平台的体验，让它具备更好的可维护性和可扩展性，让桌面 QQ 可能更好地迭代产品交互和性能，降级用户体验，再次焕发成长的生命力。”
3.3QQ NT 我的项目的诞生
于是 QQ NT 我的项目的诞生了！QQ NT 我的项目是在 2022 年 3 月份正式启动，Mac OS QQ 在 6 月份开始公布内测，9 月份正式上架了 App Store，迭代了几个版本之后，QQ 团队就同步开发 Linux。在 2022 年，QQ 公布了新的 macOS 和 Linux 版本，包含 QQ 后盾其实也做了很大的扭转和重构，外围零碎做了全新重写，云原生成熟度也失去了很大的晋升。从 2023 年开始，QQ 团队聚焦做 Windows 端的开发，在 3 月底就开始内测，7 月初上架官网。同时挪动端 QQ NT 也在 7 月初实现了外围零碎的重写和全量降级。在目前全新的框架设计下，无论是外围零碎、性能迭代还是设计语言上，都能够尽可能地“原子化”，来让 QQ 后续更好地迭代性能。
4、新 QQ 桌面版重构的技术挑战
4.1 业务性能上的挑战
QQ 的重构其实是两方面的重构：
1）一个是面向简单业务的梳理重构；
2）一个是面向工程技术债的全新技术重构。重构之路也是两者互相随同的过程。
首先：在整个 QQ 重构过程中最大的挑战来自于 QQ 性能的复杂化，QQ 有很多十分复杂的历史性能，这些功能模块也已经由十分多不同的人经手负责过。其中哪些性能是不合理的或没有价值的，如何去做取舍往往是最难的。“尽管技术上咱们做了很多事件，但技术上的实现或者并没有那么难，咱们解决起来更有教训和从容。相比于技术的复杂度，业务上的往往须要思考的更多，这自身就是很大的挑战。”因为 QQ 曾经是近 25 年的产品了，有很多细小简单的性能。尽管这些性能看看起来很小，但用户量其实又很大，略微改变可能就会有很多的用户反馈，QQ 团队都得十分的关注。仅从产品性能角度上看，有些性能自身就曾经是很重的负债，而 QQ 团队外部有一个叫做“QQ 节能打算”的我的项目，会有比拟谨严的我的项目流程去评估是否须要下架。
4.2 技术重构上的挑战
技术上重构也有不少挑战，这次重构是一次跨平台的重构，而在多个平台外面比拟有挑战则是 Linux 平台。作为程序员，很多人免不了要跟 Linux 打交道。然而这么多年来，对于应用 Linux 零碎的用户来讲，有一个特地让人懊恼的问题，那就是没有一个好用的 IM 聊天工具。被寄予厚望的 QQ，此前在 Linux 版本上性能也没有 Windows 和 Mac OS 版本全面，迭代速度也显著慢过其余两个版本。业界甚至猜想 Linux 第一个版本是由腾讯实习生所写，毕竟这个说法进一步减轻了其初版的“简陋”个性，也为其“停更”的起因提供了更正当的解释。QQ 技术团队示意，较之另两个版本，Linux 版本的研发最为简单：1）一方面操作系统自身很多碎片化，市面上有十分多的发行版，也不不足一些千奇百怪的版本；2）另一方面因为机器运行环境或编译器的缺失，使得解决适配问题的难度很大。许多发行版相干的机器和开发环境实际上他们并没有，有时还须要内部公司帮忙进行一些测试工作。因为没有相应的开发环境，一旦呈现闪退等问题，解决难度天然会变得更大。此外，有时候须要与国产操作系统厂商进行非凡的单干，甚至须要对方寄送特定的编译好的代码库，但前后往往会破费一个月的工夫能力收到。而在本次重构之后，“Linux 性能跟 Windows 一样多了”。
4.3 选型 Electron 的质疑
技术上的另一大挑战便是外界对于 QQ 桌面端应用 Electron 的质疑，尤其是内存方面。外界有些用户在没有应用和剖析的状况下对此发表一些夸张和否定的舆论，也的确给 QQ 技术团队带来不小压力，但他们却始终动摇选型方向，也置信其中的问题能够被攻克和解决。
5、为何抉择 Electron 而非纯 Native 技术栈？
5.1 为什么 Windows 端不必原生实现？
的确过后有很多人在问，为什么 Windows 不必原生去实现？为什么不必 Qt？首先：不太想和以前一样，Windows、Mac OS、Linux 三端各由一个团队离开负责。在国内这种人才环境外面，相干的纯原生的开发人员其实十分难招了，桌面端的人才稀缺，同时也投入比拟大。而对于 Qt 技术栈，他们首先思考的其实还是人才的问题，国内纯熟 Qt 技术栈的人非常少。如果对这个框架不理解，应用它反而是一个负向作用。至于微软的 Webview2，从实质上讲，Webview2 和 Electron 并没有太大的区别，只是绝对在其中打包了一些微软本身的优化措施，其余方面也不是很欠缺，而且还无奈跨平台。尽管内存方面相较于 Electron 做了更多的优化。但据理解，比方微软 Teams 也没有齐全切到 Webview2。并且因为它没有开源，因而也没有方法基于 Webview2 做定制优化。包含 Flutter，QQ 团队示意他们过后也有过调研。他们放弃的一个起因是 Flutter 在桌面端的欠缺水平并不高，也放心标准化的问题。尽管以后 Flutter 十分风行，但谁也说不好这是不是“2015 年的 React Native”。大家放心随着时间推移，这套技术可能会失去保护反对，因为自身 Google 应用 Flutter 的占比也比拟小。“尽管它很热，但咱们历史上踩过了很多很多非标准化的坑，一旦某个技术栈热度一过、保护力度不够，它就会成为全新的负债，做选型时必然也是防止再有相似经验。”
5.2 抉择 Electron 的几个考量
至于为什么最初抉择 Electron，QQ 技术团队示意次要是基于以下几个考量。
1）首先最看重的是框架成熟度和技术栈的标准化：
Electron 基于 Web 技术栈，有足够低的上手和应用老本，不须要为了应用框架自身，还须要投入额定微小人力老本去做基建和周边工具链的建设，以前在 RN、Flutter 的实际上都有相似的状况。而应用 Electron，现有的 Web 前端的大部分基建都能够间接复用，而且应用 Web 开发 UI 的效率，在支流技术栈里算是很高的了。至于迭代效率我感觉从新版桌面 QQ 性能的迭代速度就能够证实，这放在以前是齐全办不到的。另外因为 Web 技术栈是标准化的，如果 Electron 批改开源协定或者要闭源了，他们也能很不便的去写出一套相似的框架。只不过当初曾经有开源的了，没必要再去反复建设一个。而且随着 Web 规范短暂倒退，Web 技术栈也不会有大的问题，而且还会越来越好。
2）其次是技术教训及人才储备：
技术选型是否适宜以后团队也是一个很重要的思考点，团队是否有相干的技术积攒，是否有人才储备来继续投入这个技术栈。Qt 确实在性能上是一个很好的抉择，但目前团队对 Qt 没有太多积攒，基建根本没有，而且相干人才其实比拟匮乏，招聘就更难了。而以后 QQ 技术团队 Web 前端团队还是有比拟多的积攒，在 QQ 频道我的项目中，也残缺验证了 Electron 的技术可行性。
3）最初就是 Electron 具备的桌面端跨平台的劣势：
但 QQ NT 架构并不是仅指 Electron，Electron 次要是作为 UI 跨平台的框架，只是占比很小的一部分，并且 QQ 桌面端不是全副用 Electron 实现，QQ NT 最外围的局部还是 QQ 底层通用形象的模块，称之为 NT 内核，包含外围登录、音讯零碎、关系链、富媒体、长连贯、数据库等等模块，齐全用 C++ 实现，全平台通用。因而底层是齐全跨平台的架构，而 Electron 只是下层桌面端 UI 跨平台较薄的一层。“其实咱们过后选型的时候，也确实看失去大家对 Electron 的评估褒贬不一，但咱们还是有信念去解决这个问题，后期也做了一些技术的 Demo 和预研。实际上 Electron 并没有蹩脚到这个境地。咱们感觉可能是国内很多没有用过 Electron 的开发者，对这个框架有些忌惮。其实你到 Electron 的网站去看，还是有十分多国内外的亿级 DAU 产品都应用 Electron 框架。目前这几年支流的桌面端利用根本都抉择了 Electron，如 Visual Studio Code、Discord、Slack、Skype、Whatsapp、Figma 等等，新的利用基本上也是首选 Electron，版本的迭代速度和社区气氛都很在线。”“咱们感觉不须要单纯因为口碑问题，就对这个选型没有了期待。还是要从理论登程，哪种技术栈适宜你的产品，看看到底能不能有技术实力去把这个事件搞定。”
6、如何无效管制 Electron 的内存占用？
外界之所以会感觉 Electron 内存占用高，是因为其自身是一个多过程的架构，主过程基于 Node.js, 而每个窗口都对应一个渲染过程以及 V8 实例。能够说从技术框架层面上，上手写代码很容易，但不容易去管控它的内存。QQ 技术团队认为：Electron 的开发者更多的是前端的开发者，可能在思维上没有去思考怎么在这样一套技术框架里，去对内存数据进行治理和管控。开发者须要从前端开发者的思维，转变为客户端开发者的思维。综合来看：对内存的认识其实不齐全是 Electron 的技术框架所导致的，更多的是门槛上、开发思维上，导致内存没有失去很好的关注和优化。其实最简略的 Electron 利用大略也就只有几十兆的内存占用。因为前端本来更多还是停留在开发即用即走的 Web 站点，很少实现一个超大客户端，不足管制内存的教训，所以面对 QQ 这么大一个产品的时候，你就必须十分在意内存的应用和管控。至于优化内存的突破口，能够说是从各个层面：从音讯的链路中的每条音讯的收发上，数据是怎么治理，包含像窗口及会话的治理，都得精打细算，也会做一些数据本地化和一些机制的按需加载，包含渲染上他们也提出一个基本的准则：“要做到所见才占用”，既咱们看到的内容才占用这一部分内存，没看到和用不到的任何场景的内存就不应该再占用，通过各种形式来去让内存达到一个设定的指标。他们也应用了不同维度的内存剖析工具，从 V8 引擎到过程，再到整个应用程序，买通整个链路进行多角度的细节剖析，以此来定位内存应用的瓶颈。之后采取一系列的针对性优化策略，包含缓存策略、按需加载、优雅降级等，同时应用线上监控、自动化测试伎俩，包含借助开发框架、工具建设、代码审查等，来阻止性能进化。（更多细节能够参看技术文章：《IM 跨平台技术学习 (九)：全面解密新 QQ 桌面版的 Electron 内存占用优化》）
通过一系列组合优化之后：QQ 的内存在长时间挂机的条件下，均匀稳固在 220M 左右。“当初优化还是不错的，比老版本要好很多。咱们认为这个难题还是能够被很好的攻克，内存并不是大家认为的这么不可控，然而也须要团队去破费相当精力去摸索和实际，能力去把内存管制到一个比拟现实的状态。”
7、将来瞻望
目前 QQ 的前端团队作为一个公线团队，不仅负责桌面 QQ 的研发，还有 QQ 根底经营、QQ 空间以及基于 QQ 生态的翻新我的项目研发，有比拟多的线上我的项目的开发与保护和外部研效工具的建设。波及的技术栈，包含 H5、Electron、Cocos、小程序、WebGL、WebAssembly、WebRTC 等。他们也示意会持续夯实这些技术，同时也一直地突破立下的性能指标，心愿让桌面 QQ 笼罩更多平台。他们也正在踊跃拥抱 AI：让 AI 在品质和效率上辅助日常开发。比方：前端设计稿还原，之前更多是一个耗时的体力活，D2C 是 QQ 前端始终摸索的方向，之前应用纯规定转换生成代码，在视觉还原上成果还不错，然而代码可读性和可维护性不能很好的满足预期，所以除了一些日抛型的经营流动有些应用之外，比拟难扩充成绩。当初 D2C 联合大模型，生成的代码品质高了很多，也能很不便的将代码与 UI 组件库做映射，达到能够在外围业务中高效应用，达到通过 AI 晋升研发效率的目标。针对一些无设计稿的治理平台开发，应用 P2C 提效，目前也有了一些不错的案例。另外：QQ 技术团队也在积极探索 AI 更广大的利用场景，比方代码评审，根本的 Lint 检检是难以实现的，但将曾经把握的内存透露模式通过规定的模式给到 AI，能够很不便地给开发同学一些不错的倡议，为性能看家护院提供多一道保障。
8、写在最初
QQ NT 我的项目于 2022 年 3 月份启动，Mac OS QQ 花了该团队 3 个月的开发工夫，9 月份上架 App Store，迭代了几个版本后同步开始开发 Linux QQ，并于这一年的最初一天上架各 Linux 利用市场，作为给 Linux 用户的一份非凡的新年礼物。2023 年 QQ 团队开始去聚焦做 Windows QQ NT 的开发，7 月正式上架利用市场和官网。同时挪动端的 QQ 从 2022 年的 Q4 开始开发，也曾经实现了全量降级和公布。另外：桌面 QQ 也是在 NT 版本中第一次反对 64 位，这须要将音视频、平安、字节码、图形库等 C++ 模块，包含 Electron 框架都从新进行编译，破费了比拟大的工作量。但在 64 位零碎上，QQ 从此便不再须要以 32 位利用的形式通过额定的兼容和转换来运行。毕竟额定操作会减少开销，导致性能降落。至此：QQ 实现了多个零碎平台之间架构的对立。而团队的将来布局还是一直地突破性能指标，并笼罩更多平台，同时摸索更多晋升研发效率的方法，放慢研发速度。腾讯 QQ 用跨平台 Electron 取代之前原生应用程序的开发模式，这一行动引发的反应的确微小。但咱们也能看出，不同于小型产品团队，在大公司里具备肯定规模的产品组织架构之下，疾速满足用户需要，并逐步须要为第三、第四乃至第五种运行平台提供反对时，放弃一致性和协调性并不是设想中的那么容易。而迟缓而低效，最终会令你输掉较量。不论应用什么跨平台开发框架，都要去抉择最合适本人团队的，也因而在 Web 规范技术栈上有丰盛积攒的 QQ 团队才会抉择 Electron。并且咱们认为没有人真正厌恶 Electron，只是咱们对 QQ，对国内 App 寄托了十分高的期盼。
9、相干材料
[1] Electron 官网开发者手册
[2] 疾速理解新一代跨平台桌面技术——Electron
[3] Electron 初体验 (疾速开始、跨过程通信、打包、踩坑等)
[4] Electron 根底入门 简单明了，看完啥都懂了
[5] vivo 的 Electron 技术栈选型、全方位实际总结
[6] 融云基于 Electron 的 IM 跨平台 SDK 革新实际总结
[7] 闲鱼 IM 基于 Flutter 的挪动端跨端革新实际
[8] 网易云信基于 Electron 的 IM 音讯全文检索技术实际
[9] 闲话即时通讯：腾讯的成长史实质就是一部 QQ 成长史
[10] 技术往事：守业初期的腾讯——16 年前的冬天，谁动了马化腾的代码
[11] 技术往事：史上最全 QQ 图标变迁过程，追寻 IM 伟人的演进历史
[12] QQ 的胜利，远没有你设想的那么顺利和轻松
[13] 还原实在的腾讯：从最不被看好，到即时通讯巨头的草根创业史
附录：更多无关 QQ、微信的技术故事
《技术往事：微信估值已超 5 千亿，雷军曾有机会收编张小龙及其 Foxmail》
《QQ 和微信厉害成长的背地：腾讯网络基础架构的这些年》
《2017 微信数据报告：日沉闷用户达 9 亿、日发消息 380 亿条》
《腾讯开发微信花了多少钱？技术难度真这么大？难在哪？》
《技术往事：“QQ 群”和“微信红包”是怎么来的？》
《开发往事：深度讲述 2010 到 2015，微信一路风雨的背地》
《开发往事：微信千年不变的那张闪屏图片的由来》
《开发往事：记录微信 3.0 版背地的故事（距微信 1.0 公布 9 个月时）》
《一个微信实习生自述：我眼中的微信开发团队》
《首次揭秘：QQ 实时视频聊天背地的神秘组织》
《为什么说即时通讯社交 APP 守业就是一个坑？》
《微信七年回顾：历经多少质疑和差评，才配领有明天的弱小》
《前开创团队成员分享：盘点微信的前世今生——微信胜利的必然和偶尔》
《即时通讯守业必读：解密微信的产品定位、翻新思维、设计法令等》
《QQ 现状深度分析：你还认为 QQ 曾经被微信战胜了吗？》
《[技术脑洞] 如果把 14 亿中国人拉到一个微信群里技术上能实现吗？》
《QQ 和微信止步不前，意味着即时通讯社交利用守业的第 2 春已来？》
《那些年微信开发过的鸡肋性能，及其带给咱们的思考》
《读懂微信：从 1.0 到 7.0 版本，一个支流 IM 社交工具的进化史》
《同为 IM 社交产品中的王者，QQ 与微信到底有什么区别》
《QQ 设计团队分享：新版 QQ 8.0 语音音讯改版背地的功能设计思路》
《社交利用教父级人物的张小龙和马化腾的同与不同》
《专访马化腾：首次开谈个人经历、治理心得、技术创新、微信的诞生等》
《一文读懂微信之父张小龙：失败蠢才、颠覆者、独裁者、兽性操控师》
（本文已同步公布于：http://www.52im.net/thread-4391-1-1.html）