基础知识

随着 Flutter 持续发展，其在 Web 和桌面平台的性能和能力也在不断提升。WebAssembly (Wasm) 和 Dart Native 是其中两个关键的技术方向，它们旨在为 Flutter 应用提供更接近原生的性能和更广泛的平台支持。

1. WebAssembly (Wasm)

WebAssembly 是一种低级的、类汇编语言的二进制指令格式，它可以在现代 Web 浏览器中以接近原生的速度运行。Wasm 旨在作为 C/C++/Rust 等语言的编译目标，使得这些语言编写的应用程序可以在 Web 上高性能运行。

• Flutter Web 与 Wasm：

  • CanvasKit 渲染器：Flutter Web 的 CanvasKit 渲染器就是基于 WebAssembly 实现的。它将 Skia 渲染引擎编译为 WebAssembly，从而在浏览器中提供高性能的 2D 图形渲染，使得 Flutter Web 应用的视觉效果和性能更接近原生。
  • Dart to Wasm 编译：Dart 团队正在积极开发将 Dart 代码直接编译为 WebAssembly 的能力。这将允许 Dart 代码在浏览器中以更高的性能运行，而无需经过 JavaScript 桥接层。这对于 CPU 密集型任务（如游戏、数据处理）尤其重要。

• Wasm 的优势：

  • 接近原生性能：Wasm 是一种二进制格式，经过优化后执行速度非常快。
  • 安全性：Wasm 运行在一个沙箱环境中，与 JavaScript 具有相同的安全模型。
  • 紧凑性：Wasm 文件通常比 JavaScript 文件更小，加载速度更快。
  • 多语言支持：Wasm 允许使用 C/C++/Rust 等多种语言编写 Web 应用，并与 JavaScript 协同工作。

2. Dart Native

Dart Native 是 Dart 平台的一个重要组成部分，它指的是 Dart 代码可以被编译为针对特定平台的机器码（Native Code）。这使得 Dart 应用程序可以在没有 Dart VM 的情况下独立运行，从而实现更快的启动速度、更小的内存占用和更接近原生的性能。

• Dart Native 的实现：

  • AOT (Ahead-of-Time) 编译：Dart 代码在部署前被编译为原生机器码。这是 Flutter 发布模式下构建应用的方式，也是 Dart Native 的核心。
  • JIT (Just-in-Time) 编译：Dart 在开发模式下使用 JIT 编译，支持热重载和快速开发。

• Dart Native 的应用：

  • Flutter 移动应用：Flutter 应用在发布时就是通过 AOT 编译为原生 ARM 或 x86 机器码的。
  • Flutter 桌面应用：Flutter 桌面应用同样通过 AOT 编译为原生机器码。
  • Dart CLI 工具：你可以使用 Dart 编写命令行工具，并将其编译为独立的、可执行的二进制文件，无需安装 Dart SDK 即可运行。
  • Dart 服务器端应用：Dart 也可以用于编写高性能的服务器端应用，并通过 AOT 编译部署。

3. Wasm 与 Dart Native 的关系

Wasm 和 Dart Native 都致力于提供高性能的执行环境，但它们针对的平台和使用场景有所不同：

• Wasm 主要针对 Web 平台，目标是在浏览器中实现接近原生的性能。
• Dart Native 主要针对 移动、桌面和服务器端 等非 Web 平台，目标是生成独立的、高性能的原生可执行文件。

尽管目标平台不同，但它们都体现了 Dart 语言在性能优化方面的努力，以及其“一次编写，多处运行”的愿景。

官方文档链接

• Flutter Web 渲染器
• Dart to Wasm (GitHub Issue)
• Dart Native

Flutter 开发中的应用案例

WebAssembly 和 Dart Native 更多是底层技术，开发者通常不需要直接与它们交互，而是通过 Flutter 框架来间接利用它们的优势。然而，理解这些技术有助于我们更好地选择渲染器、优化应用性能，并了解 Flutter 的未来发展方向。

案例：理解 Flutter Web 的 CanvasKit 渲染器

这个案例不是编写代码，而是通过配置和观察来理解 Flutter Web 的 CanvasKit 渲染器如何工作，以及它对性能的影响。

步骤 1: 创建一个 Flutter Web 项目

如果你还没有，创建一个新的 Flutter 项目并启用 Web 支持：

flutter create my_web_app
cd my_web_app
flutter config --enable-web
flutter create .
flutter pub get

步骤 2: 运行并观察默认渲染器

运行你的 Flutter Web 应用：

flutter run -d chrome

打开浏览器的开发者工具 (F12)，切换到“网络” (Network) 标签页。你会看到浏览器加载了 canvaskit.wasm 文件。这表明 Flutter 默认使用了 CanvasKit 渲染器。

步骤 3: 强制使用 HTML 渲染器并观察

停止当前运行的应用，然后使用 HTML 渲染器重新运行：

flutter run -d chrome --web-renderer html

再次打开浏览器的开发者工具，切换到“网络” (Network) 标签页。你会发现 canvaskit.wasm 文件不再被加载。相反，Flutter 会使用 HTML 和 CSS 来渲染 UI。

步骤 4: 构建发布版本并比较文件大小

分别构建 CanvasKit 和 HTML 渲染器的发布版本：

flutter build web --release --web-renderer canvaskit
flutter build web --release --web-renderer html

构建完成后，检查 build/web 目录。你会发现：

• 使用 CanvasKit 渲染器构建的版本会包含一个较大的 canvaskit.wasm 文件。
• 使用 HTML 渲染器构建的版本则没有 canvaskit.wasm 文件，但可能会有更多的 JavaScript 文件。

案例分析：

• CanvasKit 的优势：CanvasKit 渲染器通过 WebAssembly 提供了更一致的像素级渲染，使得 Flutter Web 应用在不同浏览器和设备上都能保持高度一致的视觉效果，并且在图形密集型场景下性能更优。
• CanvasKit 的缺点：canvaskit.wasm 文件通常较大，这意味着首次加载时间可能会更长。对于简单的、文本为主的 Web 应用，HTML 渲染器可能更轻量。
• 自动选择：Flutter 默认会根据设备和浏览器能力自动选择最佳渲染器。例如，在移动浏览器上可能会优先使用 HTML 渲染器以减少初始加载。
• Dart to Wasm 的未来：当 Dart 代码能够直接编译为 WebAssembly 时，将进一步提升 Flutter Web 应用的性能，尤其是在执行 Dart 业务逻辑时，减少 JavaScript 桥接的开销。

这个案例虽然没有涉及复杂的编码，但它帮助我们理解了 Flutter Web 底层的渲染机制，以及 WebAssembly 在其中扮演的角色。对于需要构建高性能 Web 应用的开发者来说，了解这些底层细节有助于做出更明智的决策。