11

我知道 Flutter 支持在Flutter Web中使用 WASM CanvasKit 使用 Skia 而不是DomCanvas，即“Skia + WebAssembly”。

我听说这提供了显着的性能改进，但是，我不知道如何启用它。

4

3 回答 3

21

您可以通过提供 Dart 环境常量在Flutter Web中启用CanvasKit / Skia ：

flutter run -d chrome --dart-define=FLUTTER_WEB_USE_SKIA=true

这些flutter工具现在有一个很好的快捷方式：

flutter run -d chrome --web-renderer canvaskit

该--dart-define=FLUTTER_WEB_USE_SKIA=true参数将设置常量以使用 Skia。您还需要将其提供给flutter build web：

flutter build web --web-renderer canvaskit

详细了解Flutter 中的 Web 渲染器。

选项

有以下三种选择--web-renderer：

  • auto (default)- 自动选择要使用的渲染器。此选项在应用程序在移动浏览器中运行时选择 HTML 渲染器，在应用程序在桌面浏览器中运行时选择 CanvasKit 渲染器。
  • html- 始终使用 HTML 渲染器。
  • canvaskit- 始终使用 CanvasKit 渲染器。

请参阅选择使用哪个选项来决定您应该使用哪个选项。

备择方案

我上面描述的可以在flutter/engine/initialization.dart文件中找到。确保检查master分支以查看信息是否仍然是最新的。

在那里，您可以看到配置 Flutter Web 以使用 CanvasKit 的其他选项：

FLUTTER_WEB_AUTO_DETECT

--dart-define=FLUTTER_WEB_AUTO_DETECT=true

现在也可以使用以下方法完成：

--web-renderer auto

提供此常量将为渲染器检测启用自动检测：

  • CanvasKit 将用于桌面设备。
  • HTML 将用于移动设备。

仅当您不指定时才适用window.flutterWebRenderer。

window.flutterWebRenderer

如果您启用自动检测（见上文），您可以在 JavaScript 代码/HTML 文件中动态指定渲染器：

...

<script>
  // This sets the Flutter web renderer in auto detect mode.
  // See https://stackoverflow.com/a/64583462/6509751.
  window.flutterWebRenderer = 'canvaskit';
</script>

<!-- This script installs service_worker.js to provide PWA functionality to
     application. For more information, see:
     https://developers.google.com/web/fundamentals/primers/service-workers -->
<script>
  var serviceWorkerVersion = null;
  ...

概括

在发现自动检测 PR之后，我非常感谢那里的当前情况总结如下：

如果启用了自动检测（由环境变量设置FLUTTER_WEB_AUTO_DETECT），则允许开发人员设置window.flutterWebRender为 canvaskit 或 html 来选择渲染后端。如果window.flutterWebRender未设置，flutter 引擎将canvaskit用于桌面设备，同时html用于移动设备。如果window.flutterWebRender设置为无效值（not canvaskitnor html），则默认为html.

如果禁用自动检测，它将检查环境变量的值FLUTTER_WEB_USE_SKIA。如果为真，请使用canvaksit. 否则，使用html.

于 2020-10-29T01:02:23.063 回答
3

如Web 渲染器文档中所述，这些是在canvaskit模式下构建/运行 Web 的有效命令：

flutter build web --web-renderer canvaskit

flutter run -d chrome --web-renderer canvaskit

--web-renderer 命令行选项采用三个值之一：auto、html 或 canvaskit。

  • auto（默认）- 自动选择要使用的渲染器。此选项在应用程序在移动浏览器中运行时选择 HTML 渲染器，在应用程序在桌面浏览器中运行时选择 CanvasKit 渲染器。
  • html- 始终使用 HTML 渲染器。
  • canvaskit- 始终使用 CanvasKit 渲染器。
于 2020-12-18T08:57:50.070 回答
0

在本地运行

带滑雪板

flutter run -d Chrome --dart-define=FLUTTER_WEB_USE_SKIA=true --release

带帆布套件

flutter run -d Chrome --dart-define=FLUTTER_WEB_CANVASKIT_URL=true --release

flutter run -d Chrome --dart-define=FLUTTER_WEB_CANVASKIT_FORCE_CPU_ONLY=true --release

于 2020-11-06T17:21:41.150 回答