Web 渲染器

命令行参数
配置运行时
选择合适的渲染器
示例

你可以选择两种不同的渲染器来运行和构建 Web 应用。下文将介绍这两种渲染器以及它们的适用场景：

使用 CanvasKit 渲染
应用在移动和桌面端保持一致，有更好的性能，以及降低不同浏览器渲染效果不一致的风险。但是应用的大小会增加大约 1.5MB。 CanvasKit 使用 WebGL 来渲染 Skia 绘制命令。

使用 HTML 渲染
使用 HTML，CSS，Canvas 和 SVG 元素来渲染，应用的大小相对 CanvasKit 较小。

--web-renderer 可选参数值：canvaskit、html 或 auto。

canvaskit （即将成为默认） - 始终使用 CanvasKit 渲染器。
auto（默认）- 自动选择渲染器。移动端浏览器选择使用 HTML，桌面端浏览器选择使用 CanvasKit。
html - 始终使用 HTML 渲染器。

此选项适用于 run 和 build 命令。例如：

flutter run -d chrome --web-renderer html

flutter build web --web-renderer canvaskit

如果运行/构建目标是非浏览器设备（即移动设备或桌面设备），这个选项会被忽略。

要在运行时覆写 web 渲染器，请执行以下操作：

使用 auto 选项构建应用。
按照编写自定义的 flutter_bootstrap.js 中的指南，来设置自定义 Web 应用初始化。
准备一个 renderer 属性设定为 "canvaskit" 或 "html" 的配置对象。
将你准备好的 config 对象作为新对象的 config 属性，传递给先前注入的代码所提供的 _flutter.loader.load 方法。

html<body>
  <script>
    {{flutter_js}}
    {{flutter_build_config}}

    // TODO: Replace this with your own code to determine which renderer to use.  
    const useHtml = true;
  
    const config = {
      renderer: useHtml ? "html" : "canvaskit",
    };
    _flutter.loader.load({
      config: config,
    });
  </script>
</body>

在 main.dart.js 中的 Flutter engine 启动之后，就无法再更换 Web 渲染器。

canvaskit（默认）：在移动端和桌面端的浏览器上都更关心性能，以及像素级的一致性。

html：在移动端和桌面端的浏览器上都更关心应用下载的大小，而非性能。

auto：在移动端浏览器上更关心应用下载的大小，在桌面端浏览器上更关心性能。

在 Chrome 浏览器上使用默认 (auto) 渲染器运行：

flutter run -d chrome

使用默认 (auto) 渲染器构建应用（发布模式）：

flutter build web --release

使用 CanvasKit 渲染器构建应用（发布模式）：

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

使用 HTML 渲染器构建应用（发布模式）：

flutter run -d chrome --web-renderer html --profile

命令行参数

配置运行时

选择合适的渲染器

示例