蛮有意思的,这两个人都在试图把造成这个问题的原因,归咎到某个与真正罪魁祸首毫无关系的东西上:原推把所有责任都推到了 Linux,而引用他的人把所有责任都推到了微软。
那么真正的责任在谁呢,我们来梳理一下:
- VS Code 是基于 Electron 开发的。VS Code 本身并没有在屏幕上渲染相关的代码,这部分都是由 Electron 负责的。
- 原推中遇到的问题,大概率是 Electron 在开启硬件加速之后,由于显卡驱动问题导致的。
- Electron 可以说是 Linux 的救星,Linux 上非常多应用都是基于 Electron 开发的。所以说并不是“其它所有东西似乎都运行良好”,所有基于 Electron 的应用应该都有这个问题。
- 原推中展示问题的是一段录屏,但我们我们在视频中却没看到任何录制软件的图标。同时视频中出现了两个光标,并且在鼠标点击的时候,光标周围会出现了一个圆圈。这看起来非常像是 macOS 自带的屏幕录制功能录出来的效果。也就是说原推是在 macOS 上使用了虚拟机运行的 Linux,然后使用了 macOS 的屏幕录制功能来录像的。
- Apple 的软件和硬件都不支持完整的 GPU 虚拟化。而在虚拟机中开启的 3D 加速,实际上是一种半虚拟化,你在 Linux 的 OpenGL/Vulkan 指令,会被翻译成 Metal 指令交给宿主机(macOS)执行。
- 显而易见这种转译层并不完美,遇到 BUG 也是正常的。
所以,这个事件的罪魁祸首其实是 Apple/macOS/macOS 上的转译层。但如果你不熟悉这所有的细节,你可能很容易就会像这两个人这样,把责任归咎到其它地方。
很多人觉得 Web 应用比原生应用慢、容易卡顿,是因为 JavaScript 太慢了。
事实恰恰相反,JS 其实很快,真正拖慢 Web 性能的,是因为 C++ 太慢了。
听到这里你肯定想反驳:明明 C++ 比 JS 快了不止一个数量级,你在这反向科普什么呢?别急,我们先来拆解一下 Web 到底慢在什么地方。
Web 的“慢”,主要慢在 UI 渲染上——也就是首次加载看到页面的时间,以及你每次交互后 UI 变化的时间。这种卡顿可能只有几十毫秒,但相比原生应用“指哪打哪”的丝滑,Web 就是让你觉得不够跟手。至于应用自身的业务逻辑计算,那点时间差用户压根察觉不到。
那究竟是谁在负责渲染 UI 呢?不是 JS,也不是 React。真正干脏活累活的,永远是浏览器的渲染引擎(比如 WebKit 或 Blink),而它们,全部都是用 C++ 写的。 JS 和 HTML 只是个“传话筒”,通过 API 告诉 C++ 引擎该画什么,自己并不负责真正的渲染。
看到这里你可能明白了,我说的“C++ 慢”,并不是指 C++ 这门语言本身不行,而是指它所实现的浏览器引擎和 DOM 机制,实在太慢了。
由于 DOM 本身庞大臃肿的设计缺陷,加上长达几十年的历史遗留包袱,导致这套 C++ 引擎在处理复杂网页时效率极低。更致命的是,JS 引擎和 C++ 引擎之间还要进行“跨语言通信”,每次 JS 操作 DOM,都要交一笔高昂的过路费。
相比之下,JS 凭借 V8 等引擎的 JIT 优化,性能早就跻身编译型语言的梯队,应付业务逻辑绰绰有余。所以,性能黑洞不在 JS 身上,反而在 C++ 写的渲染引擎里。
既然主要的性能瓶颈在底层渲染,那前端框架(如 React)天天做的性能优化,又是在优化什么?
今天的 Web 应用太复杂了,直接用原生 API 纯属开发灾难。React 引入声明式语法和 Virtual DOM,本质上是在 JS 层做了一层抽象。但抽象是有代价的,Virtual DOM 的 Diff 算法本身就会带来高昂的 JS 计算开销。
很多人崇拜的 React 时间切片(Time Slicing),实际上并不是让浏览器变快,而是把这笔高昂的 JS 开销拆分到各个微小的空闲时间片里,防止主线程被死死卡住,从而让浏览器有喘息的机会去优先响应用户的输入。换句话说,这个优化只是为了解决 React 自身引入的开销,它根本绕不过 C++ 引擎底层的性能天花板。
至于 Flutter on Web 为什么感觉更流畅?因为它是“掀桌子”的玩法。它直接弃用了浏览器的 DOM 树,改用 Canvas 配合 WebAssembly 运行的底层库(CanvasKit),在网页上直接绘制像素。这确实绕过了 C++ 引擎的 DOM 限制。
但 Flutter on Web 会是未来的趋势吗?我看未必。
这么做相当于在网页里硬生生自己造了一个微型的 UI 渲染引擎。这就意味着,除了业务逻辑,你还要靠代码去手动实现一大堆浏览器原本自带的底层特性:比如文本复制选中、SEO、屏幕阅读器(无障碍支持)等等。
让 Flutter 团队去把浏览器几十年沉淀的 feature 全重写一遍,成本太高了。再加上近期 Google 缩减 Flutter 投入的传闻,Flutter on Web 恐怕很难成为未来的主流。Web 的未来,终究还是要看 Web 自身标准的进化。
@HappyQQ_AI 如果你看过 VS Code 的一些访谈,你会发现 MS 首先想做的是一款能跑在浏览器里的在线编辑器,其次才是想做一款好用的编辑器。在能跑在网页上的前提下, VS Code 的性能基本没什么提升空间了,如果你用过已经死掉的 Atom,那才是真正的慢卡崩溃,而 VS Code 已经解决了 Atom 的性能问题。