本文由 简悦SimpRead 转码，原文地址 getstream.io
了解开发桌面应用时Flutter和JavaScript的性能差异 a......
在跨平台领域，Flutter和JavaScript是开发者和工程团队的首要选择。本文探讨了Flutter和Electron--两个让你的应用程序在桌面上运行的解决方案之间的性能差异。两者都是流行的选择，但其中的性能差异值得考虑。
这篇文章包括以下内容。
- 支持Flutter和Electron的底层引擎和技术。
- 重要的性能考虑因素以及它们与Flutter Desktop和Electron的关系。
- 在macOS上演示Flutter Desktop和Electron应用程序的真实性能指标。
在继续阅读之前，请记住，这篇文章并不是为了推广一种解决方案而不是另一种。现代计算机和设备上的资源已经足够多，你很难发现一个制作精良的Flutter桌面应用程序与一个制作精良的Electron应用程序之间的区别。
性能仅仅是一个指标。你的团队的开发人员的生产力、经验和知识也是决定使用哪种解决方案时需要考虑的重要因素。
免责声明。本文作者是getstream.io的Flutter开发者。为了保证质量，JavaScript工程师审查了这篇文章。虽然我们尽了一切努力在这两种技术之间创建一个公正的、公平的比较，但可能存在无意的错误或不正确的测量。
这些测试所使用的所有代码都在文章中进行了链接；请随时发现错误或不一致的地方，并帮助提高结果的质量。
Electron和Flutter桌面的现状
Electron
Electron经受住了时间的考验，并被证明是将网络应用带到桌面上的一个好的解决方案。事实上，我最喜欢的（也是最常用的）一些桌面应用都在Electron上运行，比如Visual Studio Code、Figma和Slack。其他流行的应用程序包括Discord、Skype和Tusk。
微软正在将Teams从Electron转移到Edge WebView2。
这些都是大公司和大应用程序。大量的资源和工程力量被用于改善Electron、NodeJS、V8引擎、JavaScript、HTML和整个网络。看看微软在优化VSCode方面所做的工作，使其感觉像一个本地应用程序。
但是，每一个好的Electron应用程序，都有一个坏的应用程序（不要指名道姓👀）。Electron应用程序以其大的可执行文件尺寸、大量的内存/资源使用而闻名，而且在某些情况下，启动时间长，并有jank问题。
Flutter
Flutter有一个雄心勃勃的目标，即从一个代码库中瞄准各种设备。Flutter已经证明了自己是一个很好的移动（Android和iOS）开发解决方案，自其V1版本发布以来，其性能得到了稳步提高。多年来有一些性能问题，但大部分问题已经得到解决。
然而，Flutter Desktop，在撰写本文时仍处于测试阶段。目前还没有用Flutter Desktop制作的大名鼎鼎的应用程序，我们可以进行实验并与Electron直接比较。时间会证明它在生产场景中是一个多好的解决方案，但从我的个人经验来看，最初的性能结果似乎很有希望。从理论上讲，一个在移动端运行良好的Flutter应用程序在桌面上也应该运行得很好，甚至更好。
关于JavaScript V8引擎和Dart Native的简要说明
让我们来讨论一下驱动Electron和Flutter的语言和技术。
JavaScript V8引擎
Electron结合了Chromium的渲染库和Node.js。两者共享同一个JavaScript引擎，V8。直接引用V8 docs。
V8是谷歌的开源高性能JavaScript和WebAssembly引擎，用C++编写。它被用于Chrome和Node.js，以及其他。
V8编译和执行JavaScript源代码，处理对象的内存分配，以及垃圾收集它不再需要的对象。V8的stop-the-world、generation、精确的垃圾收集器是V8性能的关键之一。
V8引擎在不断改进，虽然JavaScript通常被认为是一种解释语言，但现代的JavaScript引擎不再只是解释JavaScript，而是编译它。V8内部用及时编译（JIT）编译JavaScript，以加快执行速度。
Dart Native
在开发过程中，快速的开发周期对迭代至关重要。Dart虚拟机提供了一个及时的编译器（JIT），带有增量的重新编译（实现热重载），实时指标集合（支持DevTools），以及丰富的调试支持。
当应用程序准备部署到生产中时--无论您是发布到应用程序商店还是部署到生产后端--Dart AOT编译器都可以提前编译为本地ARM或x64机器代码。经过AOT编译的应用程序在启动时具有一致的、短的启动时间。
AOT编译的代码在高效的Dart运行时内运行，该运行时执行健全的Dart类型系统，并使用快速对象分配和生成垃圾收集器管理内存。
关键的收获是，Dart可以以热重载的形式给你带来快速的开发者体验，并在你创建发布构建时，给目标架构带来小型编译应用程序的好处。
下面是其他一些值得注意的Dart功能和更新。
- Dart最近增加了对健全空安全的支持，这使得Dart AOT编译器能够产生更快的机器代码（查看Dart和健全类型的性能优势了解更多信息）。
- Dart的外国函数接口（FFI）可以让你使用现有的C库，以获得更好的可移植性，可以选择使用高度调整的C代码来完成性能关键的任务。阅读Dart 2.13了解更多关于Dart FFI的信息。
Dart正在成长为一种单独的伟大语言，但它的流行绝对可以归功于Flutter的崛起。谷歌和Flutter团队维护着Dart，这意味着该团队可以优化框架（Flutter）和语言（Dart）以帮助改善开发者的体验。
性能方面的考虑
下面的章节比较了Flutter和Electron的性能考虑。这些是可能对最终应用程序的性能产生影响的领域，或者是你的开发者经验和避免潜在性能问题所需的工作量。
Flutter和Electron docs都涵盖了每个平台的性能，你应该查看这些最新的信息。
应用程序大小、依赖性和模块
要考虑的一个重要因素是你编译的应用程序的可执行大小。这里Flutter是明显的赢家。Flutter编译为机器代码，这意味着Dart可以很聪明地决定在最终构建时包括哪些内容，剥离哪些内容。请看这个已关闭的PR列表，与Dart的AOT构建大小有关。这是一个不断改进和测量的领域。
另一方面，Electron应用程序在Chromium上运行。基本上，每个Electron应用程序都与它自己的浏览器捆绑在一起。这就是使Electron成为可能的神奇之处，但也是为什么你在一个简单的 "Hello, World!"应用程序中得到一个大约150mb（或更多）的可执行文件。一个类似的Flutter应用程序大约是30MB。（稍后，在我们的性能指标中，我们将看一下一些真实的数字来评估包的大小）。
忽略一个Electron应用程序的纯粹的大小，还有其他重要的因素需要考虑。
- 在Electron中，你需要更加注意你所包含的模块，因为未使用的代码仍然会被包含在你的最终包中（见不小心包含模块一节）。
- 在Electron中加载模块是一个令人惊讶的昂贵的操作。作为开发者，你需要注意将大模块的加载推迟到需要的时候（见过早加载和运行代码一节）。
- 最后，建议你将所有应用程序的代码捆绑在一起，因为运行 "require "是一个昂贵的操作（有各种JavaScript捆绑器可以帮助你做到这一点，比如Webpack、Parcel和rollup.js等等）。
如果你是一个铁杆的JavaScript开发者，你可能会揉揉眼睛说，"很简单"，但这些小麻烦会增加。特别是如果你是一个新的开发者。
另一方面，Dart在剥离不需要的代码和依赖方面做得很好。如果你开始一个新的Flutter项目，那么在macOS（以及所有其他平台）上运行的构建设置将已经设置好并等待。
Flutter需要的配置要少得多，而且当你在目标平台上构建你的应用程序时，你会立即受益于Dart提供的所有AOT编译优势。
隔离器、网络工作者和进程
Flutter和Electron应用程序都可以从Main/UI线程中卸载昂贵的工作，当你想执行有可能是UI阻塞的操作时，这一点是必要的。
- 在Dart中，每个线程都在自己的隔离区中，有自己的内存，不同的隔离区可以沟通的唯一方式是通过端口传递数值。
- 在Electron中，你可以使用worker threads，使线程的使用能够并行地执行JavaScript。
虽然这两个框架都能以非阻塞的方式执行昂贵的工作，但需要注意的是，Electron默认会启动几个额外的进程，因为它正在运行Chromium。
看看这个来自**macOS活动监视器的截图吧。
活动监视器展示了MacOS上的Electron "Hello, World "应用程序。
你会注意到三个额外的辅助进程（Helper, GPU, Renderer），每个进程都占用了一些内存和处理能力。
- 主进程创建并管理BrowserWindow实例和各种应用程序事件。
- 渲染进程运行你的应用程序的用户界面（网页），它是webContents的一个实例。
看看Cameron Notes的优秀文章，深入了解Electron的主进程和渲染器进程 。如果你想了解更多信息，这是一个很好的开始。
另一方面，Flutter只运行一个进程，而且你可以选择生成额外的隔离程序来卸载主线程的工作。
活动监视器展示了macOS上的Electron "Hello, World "应用程序。
关于Flutter隔离器的更多信息，请查看以下文章。
- Dart确实是多线程的
- Flutter中的轻量级隔离器 (一个讨论如何使用隔离器组来减少Flutter应用程序的内存占用的视频)
渲染
这些话题已经超出了本文的范围。但无论您是使用Flutter还是最新的JavaScript SDK，了解您的代码如何转化为屏幕上的像素是很重要的。
如果您想了解更多，这里有一些好的资源。
Flutter和Chromium都使用Skia，一个2D图形库，来处理渲染问题。
WebAssembly (Wasm)
一种新的机器码二进制格式，是专门为浏览器设计的。编译成WebAssembly的应用程序可以与JavaScript一起运行而不影响性能。Flutter和Electron的应用程序都可以（也确实）从这项技术中受益。
来自MDN Web Docs。
WebAssembly是一种可以在现代网络浏览器中运行的新型代码--它是一种类似于汇编的低级语言，具有紧凑的二进制格式，以接近原生的性能运行，为C/C++、C#和Rust等语言提供了一个编译目标，以便它们可以在网络上运行。它还被设计为与JavaScript一起运行，使两者能够一起工作。 ......使用WebAssembly的JavaScript APIs，你可以将WebAssembly模块加载到一个JavaScript应用程序中，并在两者之间共享功能。这允许你在同一个应用程序中利用WebAssembly的性能和力量以及JavaScript的表现力和灵活性，即使你不知道如何编写WebAssembly代码。
这是令人难以置信的。请参阅以下文章，了解更多关于Wasm的信息。
Flutter和Chrome DevTools
提高应用程序的性能并不是一件简单的事情，有时寻找性能错误就像在干草堆里找一根针。为此，你需要正确的工具来协助你。幸运的是，Flutter和Electron都可以使用奇妙的DevTools。
对于这个类别，Electron占了上风。Chrome DevTools是一个先进的软件，已经开发了很多年。性能分析、调试、网络监控、布局检查以及其他一切都很惊人。
Dart DevTools虽然令人惊叹，但仍然很年轻。我个人很喜欢使用它，它为你提供了调试Flutter应用程序所需的一切，但它肯定仍有改进的余地。
性能测试
现在我们已经讨论了每个平台的重要性能因素，让我们运行一些应用程序，看看Flutter Desktop和Electron如何比较。
这些测试只在macOS Big Sur v11.5.2上进行，在一台MacBook Pro（16英寸，2019年）上进行，规格如下。
- 2.3 GHz 8核英特尔酷睿i9
- AMD Radeon Pro 5500M 4GB
- Intel UHD Graphics 630 1536 MB
源代码和安装说明可在Github资源库中找到。我们鼓励你自己运行这些测试，做你自己的实验。 请注意，这些只是演示。
你可以用许多不同的方式对这些例子进行优化，适用于Flutter和Electron。这只是一个开箱即用的性能比较；你可以通过最小的开发者努力得到什么。
此外，运行其中的一些性能测试导致了剖析的开销。当不对应用程序进行剖析时，现实世界的结果可能会有所不同。
你也应该期望不同的运行之间有一些差异。理想情况下，你应该多次运行这些测试并取其平均值（本文没有这样做，只选择了第一次运行）。
⚠️ 在这些例子中，**Electron Forge**被用来配置和运行Electron项目。NPM 版本7.23.0被使用。 ⚠️ Flutter 版本2.5.1在稳定通道上使用。 ⚠️ 注意Chromium限制了每秒帧数（fps）。更多信息请参见Chrome的无限帧率文章。
"Hello World" App!
一个显示 "Hello, World!"的简单应用程序。
应用程序的启动时间
Flutter和Electron都能在一秒内打开并绘制到屏幕上，Flutter稍快。
"你好，世界！"应用程序，Flutter与Electron的启动时间对比
可执行文件的大小
在这里我们可以看到，即使是一个简单的应用程序，Electron应用程序也会占用大量的空间!
Flutter
- 部署目标10.11及以上。37.3mb
- 部署目标11.0及以上版本：22.7mb
Electron
- 183.9mb
活动监控
Flutter使用的内存最少（~38mb，而 ~100mb）。所有这些额外的Electron进程都会增加。
内存
"Hello, World" Flutter应用程序。内存~37.9mb
"Hello, World" Electron应用程序。内存。~99.6mb (44.9 + 26.1 + 18 + 10.6)
在这个例子中没有显示CPU、GPU和能源的影响。
剖析/每秒帧数
一个愚蠢的例子，但为了好玩而包括在内。在这里，应用程序的窗口被调整大小以触发重新渲染。
正如预期的那样，Flutter和Electron都能在60fps下舒适地运行。但请注意，Chromium限制了帧数。这就是为什么Electron的每帧时间总是在16ms左右。
Flutter
每帧3ms以下，60fps。
Flutter，60fps，平均帧数在3ms以下
Electron
每帧约16-17毫秒，60帧。
Electron, 60fps, 平均帧时间设置为16-17ms
Lottie动画应用
这个例子加载了150个Lottie动画，并在同一时间为它们制作动画。
应用程序的启动时间
在这里，Electron应用比Flutter应用早半秒打开；但是，第一次内容满格的绘制是在同一时间。应该注意的是，Electron应用程序在最初的几秒钟内有非常明显的掉帧现象。
"Lottie Animations "应用程序，Flutter与Electron的启动时间
可执行大小
在这里，当使用Electron时，加载额外的模块可能会导致包的大小显著增加（与 "Hello, World "的样本相比，大了~80mb）。
Flutter应用程序在添加Lottie包和动画文件后只增加了~7mb。
Flutter
- 部署目标10.11及以上。40.7mb
- 部署目标11.0及以上版本：29.1mb
Electron
- 259.1mb
活动监控
Flutter在所有类别中使用较少的资源。CPU、GPU、内存和能源。
然而，最突出的结果是Electron版本使用了大量的内存。大致是2.2GB，而Flutter是170MB。
CPU/GPU
Flutter的CPU和GPU使用率较低。~130%（CPU）和 ~13%（GPU），而Electron的 ~215%（CPU）和41%（GPU）。
"Lottie" Flutter应用程序。CPU。~130.6%和GPU。~12.8%
"Lottie" Electron应用程序。CPU。~215% (0.2 + 101.6 + 113.4) 和GPU。~41%
内存
与Electron的~2.2GB相比，Flutter的内存使用量低得多，只有 ~170MB。
"Lottie" Flutter应用程序。内存。~168.5 MB
"Lottie" Electron应用程序。内存。~2261.3MB (2100 + 95.6 + 55.3 + 10.4)
能源影响
Flutter使用的能量较少，影响为~130，而Electron为 ~220。
"Lottie" Flutter应用程序。能量：~131.6
_"Lottie" Electron应用程序。能量：~220.7 (0.2 + 137.8 + 82.7) _
剖析/每秒的帧数
在这个例子中，Flutter和Electron之间有一个明显的运行时间差异。在启动时，Flutter立即运行，并保持稳定的40-45fps，而Electron在最初几秒钟显示出明显的帧数下降，然后保持20-25fps。
Flutter
每帧10-30ms不等，平均约为40-45fps。
"Lottie Animations "应用程序。Flutter桌面剖析.
Electron
每帧25-60ms不等，平均约为20fps-25fps。
"Lottie Animations "应用程序。Electron剖析。
高分辨率图像应用
这个例子通过网络加载了100张高分辨率的图片，将它们缓存起来，缩小到一个小尺寸，并连续旋转图片。
注意，在Flutter上，cached_network_image包被用来在运行之间缓存图像。
应用程序的启动时间
Flutter和Electron都在一秒内打开，Flutter应用的打开和加载图像的速度稍快。在Electron应用程序中，最初的几秒钟会有明显的帧数下降。
在 "旋转图像 "应用程序中，Flutter桌面与Electron的启动时间对比。
可执行文件的大小
Electron应用程序的大小与 "Hello, world "的例子完全相同。Flutter应用程序的大小为5mb，包括图像缓存包。
Flutter
- 部署目标11.0及以上：27.7mb
Electron
- 183.9mb
活动监控
在这个例子中，除了内存使用量，Flutter少用了大约100mb，结果要接近得多。
CPU/GPU
Flutter和Electron之间的差异不大。Flutter使用的资源略少。
"图像 "应用程序Flutter。CPU。~13.6%和GPU。~2.97%
"图像 "应用程序Electron。CPU。~17.5 % (1.1 + 7.7 + 8.7) 和GPU ~2.8%。
内存
Flutter比Electron少用了大约100MB。
"图像 "应用程序Flutter。内存 : ~73.5mb.
"图像 "应用程序Electron。内存。~173.5mb (74.2 + 54.4 + 29.1 + 15.8)
能量影响
Flutter和Electron之间差别不大，能量影响在12-17%之间。
"图像 "应用程序Flutter。能量影响：~12.5
"图像 "应用程序Electron。能量影响：~17 (1.1 + 8.4 + 7.5)
剖析/每秒帧数
在应用程序启动时，Electron版本有明显的帧数下降。但在最初的几秒钟后，两者都以60fps运行，没有问题。
Flutter
除了偶尔的帧数下降，它的渲染速度接近每帧1ms。一个轻松的60fps。
"图像 "应用程序Flutter。每帧1毫秒，60fps。
Electron
强制每帧16ms，60fps。
"图像 "应用程序Electron。帧数设置为16ms，60fps。然而，应用程序启动时帧数明显下降。
结论
你必须从所提供的数据中做出自己的结论🙂。如果你想把你的应用程序带到桌面上，两者都是很好的跨平台选择。
以下是对调查结果的总结。
Electron
- 随着Electron应用程序的发展，它可能会在启动时间和首次内容的绘制时间上挣扎。然而，像VSCode和Figma这样的应用证明这一点是可以避免的。
- Electron被证明是一个可行的解决方案；如果你能写出一个快速和高性能的网络应用程序，那么你也能在Electron上做到这一点。
- 具有较大的安装尺寸和内存使用量。
- 你需要更加注意你所包含的模块，它们何时被加载，以及你的应用程序是如何被打包的。
- Wasm的集成可以极大地改善某些任务。
Flutter
- Flutter Desktop仍处于Beta阶段，尚未在更大范围内得到验证。
- Flutter将有更小的内存占用和安装尺寸。这些数字也可能会改善，特别是随着Dart的不断优化。
- 瞄准多个平台很容易，只需要最小的开发人员配置。
- Flutter的平台集成和FFI是非常好的解决方案。
- Dart的null safety和它与Wasm的潜在整合都是Flutter的锦上添花。
就性能实验而言，如果能将两个大型的、类似的Flutter和Electron应用程序并排演示，并能够比较更多的真实场景，那就太棒了。
一旦Flutter的桌面应用开始出现，这将是一个有趣的对话。
