问题描述
我知道Flutter支持使用WASM CanvasKit(即“ Skia + WebAssembly”)在 Flutter Web 中使用Skia代替DomCanvas。
我听说这可以显着改善性能,但是我不知道如何启用它。
解决方法
您可以通过提供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
分支以查看信息是否仍是最新的。
在此处,您可以看到将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>
window.flutterWebRenderer = 'canvaskit';
</script>
<script src="main.dart.js" type="application/javascript"></script>
...
摘要
在发现auto detect PR之后,我非常感谢以下有关当前情况的摘要:
,如果启用了自动检测(由环境变量
FLUTTER_WEB_AUTO_DETECT
设置),则允许开发人员将window.flutterWebRender
设置为canvaskit或html以选择呈现后端。 如果未设置window.flutterWebRender
,则颤动引擎将canvaskit
用于台式设备,而将html
用于移动设备。 如果window.flutterWebRender
设置为无效值(不是canvaskit
或html
),则默认为html
。如果禁用了自动检测,它将检查环境变量
FLUTTER_WEB_USE_SKIA
的值。如果为true,请使用canvaksit
。否则,请使用html
。
如Web renderers documentation中所述,这些是在 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渲染器。
要在本地运行
with skia
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