如何在 Flutter Web 中使用 Skia / CanvasKit？

Question

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

我听说这可以显着提高性能，但是我不知道如何启用它。

Answer 1

您可以通过提供 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

Learn more about web renderers in Flutter.

选项

--web-renderer有three options:

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

请参阅 Choosing which option to use 来决定您应该使用哪个选项。

备选方案

我上面描述的可以在flutter/engine/initialization.dart file中找到。确保检查 master 分支以查看信息是否仍然是 up-to-date.

在那里，您可以看到配置 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 
  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;
  ...

总结

发现auto detect PR后，非常感谢里面对现状的总结如下：

If auto detect is enabled (set by environment variable FLUTTER_WEB_AUTO_DETECT), developers will be allowed to set window.flutterWebRender to either canvaskit or html to select the rendering backend. If window.flutterWebRender is not set, flutter engine will use canvaskit for desktop device while using html for mobile device. If window.flutterWebRender is set to an invalid value (not canvaskit nor html), it will default to html.

If auto detect is disabled, it will check the value of environment variable FLUTTER_WEB_USE_SKIA. If true, use canvaksit. Otherwise, use html.

Answer 2

本地运行

与 skia

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

带 canvas 套件

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

Answer 3

如 Web renderers documentation 中所述，这些是在 canvaskit 模式下 build/run web 的有效命令：

flutter build web --web-renderer canvaskit

flutter run -d chrome --web-renderer canvaskit

The --web-renderer command line option takes one of three values, auto, html, or canvaskit.

auto (default) - automatically chooses which renderer to use. This option chooses the HTML renderer when the app is running in a mobile browser, and CanvasKit renderer when the app is running in a desktop browser.

html - always use the HTML renderer.

canvaskit - always use the CanvasKit renderer.

如何在 Flutter Web 中使用 Skia / CanvasKit？

How to use Skia / CanvasKit in Flutter Web?

skia

dart

flutter

flutter-web

canvaskit

选项

备选方案

`FLUTTER_WEB_AUTO_DETECT`

总结

本地运行

与 skia

带 canvas 套件