JavaScript V8 引擎和 Dart Native 快速入门

让我们讨论驱动 Electron 和 Flutter 的语言和技术。

JavaScript V8 引擎

Electron 将 Chromium 的渲染库与 Node.js 相结合。两者共享相同的 JavaScript 引擎 V8。直接引用V8 文档：

V8 是 Google 的开源高性能 JavaScript 和 WebAssembly 引擎，用 C++ 编写。它用于 Chrome 和 Node.js 等。

V8 编译和执行 JavaScript 源代码，处理对象的内存分配，并垃圾收集它不再需要的对象。V8 的停止世界、分代、准确的垃圾收集器是 V8 性能的关键之一。

V8 引擎在不断改进，虽然 JavaScript 通常被认为是一种解释型语言，但现代 JavaScript 引擎不再只是解释 JavaScript，而是编译它。V8在内部使用即时编译(JIT) 编译 JavaScript 以加快执行速度。

也可以使用本机模块与本机代码交互（请参阅本文以获取示例）。

飞镖原生

根据Dart Native 文档：

在开发过程中，快速的开发周期对于迭代至关重要。Dart VM 提供了一个即时编译器 (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 的兴起。Google 和 Flutter 团队维护 Dart，这意味着团队可以优化框架（Flutter）和语言（Dart），以帮助改善开发者体验。

性能注意事项

以下部分比较了 Flutter 和 Electron 之间的性能注意事项。这些领域可能会影响最终应用程序的性能，或者您的开发人员体验以及避免潜在性能问题所需的工作量。

Flutter和Electron 文档都涵盖了每个平台的性能，您应该查看它们以获取最新信息。

应用程序大小、依赖项和模块

要考虑的一个重要因素是已编译应用程序的可执行大小。Flutter 显然是赢家。Flutter 编译为机器码，这意味着 Dart 可以很聪明地知道最终构建中要包含什么以及要删除什么。请参阅与 Dart 的 AOT 构建大小相关的已关闭 PR 列表。这是一个不断改进和衡量的领域。

另一方面，电子应用程序在 Chromium 上运行。基本上，每个 Electron 应用程序都与自己的浏览器捆绑在一起。这就是使 Electron 成为可能的魔力，也是为什么您可以通过简单的“Hello, World!”获得大约 150mb（或更多）的可执行文件的原因。应用程序。类似的 Flutter 应用程序大约为 30mb。（稍后，在我们的性能指标中，我们将看一些实数来评估包大小。）

忽略 Electron 应用程序的庞大规模，还有其他重要因素需要考虑：

• 使用 Electron，您需要更加注意您包含哪些模块，因为未使用的代码仍将包含在您的最终包中（请参阅关于不小心包含模块的部分）。
• 在 Electron 中加载模块是一项非常昂贵的操作。作为开发人员，您需要注意将大模块的加载推迟到仅在需要时才加载（请参阅标题为过早加载和运行代码的部分）。
• 最后，建议您将应用程序的所有代码捆绑到一个包中，因为运行require是一项昂贵的操作（有各种 JavaScript 捆绑器可以帮助您完成此操作，例如 Webpack、Parcel 和 rollup.js 等等） .

如果你是一个铁杆 JavaScript 开发人员，你可能会翻白眼说“简单”，但这些小麻烦加起来。特别是如果您是新开发人员。

另一方面，Dart 在剥离不需要的代码和依赖项方面做得很好。如果您开始一个新的 Flutter 项目，那么在 macOS（以及所有其他平台）上运行的构建设置将已经设置并等待。

Flutter 需要的配置少得多，当您将应用程序构建到目标平台时，您将立即受益于 Dart 提供的所有 AOT 编译优势。

隔离、Web Worker 和进程

Flutter 和 Electron 应用程序都可以从 Main/UI 线程中卸载昂贵的工作，当您想要执行可能会阻塞 UI 的操作时，这是必要的：

• 在 Dart 中，每个线程都在自己的隔离区和自己的内存中，不同隔离区可以通信的唯一方法是通过端口传递值。
• 在 Electron 中，您可以使用允许使用线程并行执行 JavaScript 的工作线程。

有关这些进程的更多信息，请参阅 Electron 的阻塞主进程和 Flutter 的隔离和事件循环。

虽然这两个框架都可以以非阻塞方式执行昂贵的工作，但需要注意的是，Electron 默认会启动几个额外的进程，因为它运行的是 Chromium。

看一下来自macOS 活动监视器的屏幕截图：

Activity Monitor 在 macOS 上展示了一个 Electron “Hello, World” 应用程序。

您会注意到三个额外的辅助进程（Helper、GPU、Renderer），每个都占用一些内存和处理能力：

• 主进程创建和管理BrowserWindow实例和各种应用程序事件。
• 渲染进程运行您的应用程序（网页）的用户界面，它是webContents的一个实例。

查看 Cameron Notes 的优秀文章，深入了解 Electron 的主要和渲染器进程。如果您想了解更多信息，这是一个很好的起点。

另一方面，Flutter 只运行一个进程，并且您可以选择生成额外的隔离以从主线程中卸载工作。

Activity Monitor 在 macOS 上展示了一个 Electron “Hello, World” 应用程序。

有关 Flutter 隔离的更多信息，请查看以下文章：

• Dart 确实是多线程的
• Flutter 中的 Featherweight Isolates（讨论如何使用隔离组来减少 Flutter 应用程序的内存占用的视频）

渲染

这些主题超出了本文的范围。但无论您使用 Flutter 还是最新的 JavaScript SDK，了解您的代码如何转换为屏幕上的像素都非常重要。

如果您想了解更多信息，这里有一些很好的资源：

• Flutter 架构概述
• 浏览器如何工作：渲染

Flutter 和 Chromium 都使用2D 图形库Skia来处理渲染。

WebAssembly (Wasm)

一种新的机器码二进制格式，专为浏览器设计。编译为 WebAssembly 的应用程序可以在不影响性能的情况下与 JavaScript 一起运行。Flutter 和 Electron 应用程序都可以（并且确实）从这项技术中受益。

来自MDN 网络文档：

WebAssembly 是一种可以在现代 Web 浏览器中运行的新型代码——它是一种低级的类汇编语言，具有紧凑的二进制格式，以接近本机的性能运行，并提供 C/C++、C# 和 Rust 等语言带有编译目标，以便它们可以在 Web 上运行。它还被设计为与 JavaScript 一起运行，允许两者一起工作。

... 使用 WebAssembly JavaScript API，您可以将 WebAssembly 模块加载到 JavaScript 应用程序中，并在两者之间共享功能。这使您可以在相同的应用程序中利用 WebAssembly 的性能和功能以及 JavaScript 的表现力和灵活性，即使您不知道如何编写 WebAssembly 代码。

这太令人兴奋了！请参阅以下文章以了解有关 Wasm 的更多信息：

• WebAssembly 将 Figma 的加载时间缩短了 3 倍
• 对 Flutter 的 Web 支持
• Flutter web 使用 WASM 代替 dart2js
• 试验 Dart 和 Wasm

Flutter 和 Chrome 开发者工具

提高应用程序的性能并不是一项简单的任务，有时发现性能错误就像大海捞针一样。为此，您需要合适的工具来帮助您。幸运的是，Flutter 和 Electron 都可以使用出色的 DevTools。

对于这一类别，Electron 占据上风。Chrome DevTools是一款已经开发多年的高级软件。性能分析、调试、网络监控、布局检查和其他一切都非常出色。

Dart DevTools虽然很棒，但还很年轻。我个人喜欢使用它，它为您提供了调试 Flutter 应用程序所需的一切，但它肯定还有改进的空间。