同样用 Electron 重构,为什么 VSCode 性能那么好?

5 阅读3分钟

说起开源框架Electron,背后藏着一段极具戏剧性的往事——当年碾压 Atom 编辑器的VS Code,底层技术栈恰恰源自 Atom 团队开源的 Electron。

时间拉回2014年,彼时代码编辑器的王座还被Sublime Text这类闭源工具稳稳占据。对此,GitHub创始人克里斯·万斯特拉斯(Chris Wanstrath)提出构想:作为全球最大的代码托管平台,GitHub理应打造一款完全开源、高度可定制的编辑器。于是,Atom编辑器应运而生。

不同于传统原生客户端的开发思路,Atom从一开始就瞄准了跨平台目标,决定基于Web技术进行构建。而为了实现这个想法,GitHub团队在开发Atom之前,先打造了一款名为Atom Shell的底层框架。它的核心逻辑很简单:用Web技术降低跨平台桌面应用的开发门槛。后来,Atom Shell正式更名,也就是如今家喻户晓的Electron。

2022年12月15日,GitHub 正式宣布关停 Atom 项目。令人唏嘘的是,Atom虽黯然退场,它孵化的 Electron 却一路高歌猛进,还意外成全了昔日的竞争对手——VS Code。

如今提到Electron,人们总爱把它和 Tauri 这类基于 WebView 的跨平台框架对比。在多数人印象里,Electron应用的标签就是安装包动辄数百兆、内存占用居高不下,似乎它的定位就是给Web项目套个桌面端的“壳”。

但事实并非如此,VS Code就是最好的反例。这款基于Electron开发的编辑器,初代安装包仅几十兆,历经近十年迭代,体积也不过翻倍。更关键的是,和其他Electron应用比起来,VS Code的性能堪称“优等生”。

深究背后原因,核心无非两点:

  1. 顶配开发团队坐镇。微软不仅请来《设计模式》合著者、Eclipse之父埃里希·伽马(Erich Gamma)主导项目,还依托自身在Visual Studio上积累的深厚技术经验。这样的豪华配置,从一开始就甩开了Atom一大截。2018年微软技术博客曾披露,团队为优化核心组件Text Buffer,引入了全新数据结构Piece Tree,重构布局渲染逻辑,用原生JavaScript替代C++实现,彻底解决了大文件打开崩溃的痛点**。
  2. 极致的底层优化。2019年团队分享提到,他们通过分阶段启动、V8代码缓存优化,优先保障文件树和编辑器的加载速度;放弃React、Vue等前端框架,选择原生开发;采用多进程架构,让UI渲染与业务逻辑分离,插件运行在独立进程中——即便插件崩溃,主界面也能保持流畅。此外,大量运用WASM提升性能,借助LSP协议实现代码高亮与补全,再加上优化的进程间通信方案,种种操作让VS Code的优化细节,足以写成一本厚厚的教科书。

如此看来,如今的VS Code早已不能算作纯粹的Electron应用——Electron对它而言,更像一个“外壳”,内里早已被微软的硬核技术彻底重塑。

当然,VS Code的性能优势,只是相对Atom和普通Electron应用而言。随着Zed这类基于原生GPU渲染的高性能编辑器崛起,VS Code在性能赛道上已不占上风。但即便如此,在当下一众编辑器中,VS Code依旧是综合体验最均衡的选择。